简易调色板（js）

完整代码：

<body>
   <p><span>红：</span>
       <input type="button" value="-" id="btnRL">
       <input type="text" value="110" id="r_txt">
       <input type="button" value="+" id="btnRR">
   </p>
   <p>
       <span>绿：</span>
       <input type="button" value="-" id="btnGL">
       <input type="text" value="222" id="g_txt">
       <input type="button" value="+" id="btnGR">
   </p>
   <p>
       <span>蓝：</span>
       <input type="button" value="-" id="btnBL">
       <input type="text" value="222" id="b_txt">
       <input type="button" value="+" id="btnBR">
   </p>
   <script type="text/javascript">
       // 获取文本内值
       var or = parseInt(document.getElementById('r_txt').value);
       var og = parseInt(document.getElementById('g_txt').value);
       var ob = parseInt(document.getElementById('b_txt').value);

       // 获取text文本对象
       var orOb = document.getElementById('r_txt');
       var ogOb = document.getElementById('g_txt');
       var obOb = document.getElementById('b_txt');

       // 初始化背景色
       var cChar = or + "," + og + "," + ob;
       document.bgColor = cChar;

var obtnRL = document.getElementById('btnRL');
var obtnRR = document.getElementById('btnRR');

var oBtnGL = document.getElementById('btnGL');
var oBtnGR = document.getElementById('btnGR');

var obtnBL = document.getElementById('btnBL');
var obtnBR = document.getElementById('btnBR');

       // 点击-+按钮，调节背景颜色
       obtnRL.onclick = bgRLighter;
       obtnRR.onclick = bgRBigger;
       oBtnGL.onclick = bgGLighter;
       oBtnGR.onclick = bgGBigger;
       obtnBL.onclick = bgBLighter;
       obtnBR.onclick = bgBBigger;

           if (isLegit) {
               alert("请输入0～255之间的合法RGB值！！！");
               return;
           }
           cChar = or + "," + og + "," + ob;
           document.bgColor = cChar;
       }

       ogOb.onblur = function () {
           og = document.getElementById('g_txt').value;
           isLegit = (function(og){
               if (og < 0 || og > 255) {
                   isLegit = true;
               } else {
                   isLegit = false;
               }
               return isLegit;
           })(og);

           if (isLegit) {
               alert("请输入0～255之间的合法RGB值！！！");
               return;
           }
           cChar = or + "," + og + "," + ob;
           document.bgColor = cChar;
       }

       obOb.onblur = function () {
           ob = document.getElementById('b_txt').value;
           isLegit = (function(ob){
               if (ob < 0 || ob > 255) {
                   isLegit = true;
               } else {
                   isLegit = false;
               }
               return isLegit;
           })(ob);

           if (isLegit) {
               alert("请输入0～255之间的合法RGB值！！！");
               return;
           }
           cChar = or + "," + og + "," + ob;
           document.bgColor = cChar;
       }

       function bgRLighter() {
           or--;
           if (or < 0 || or > 255) {
               return;
           }
           cChar = or + "," + og + "," + ob;
           document.getElementById('r_txt').value = or;
           document.bgColor = cChar;
       }

       function bgRBigger() {
           or++;
           if (or < 0 || or > 255) {
               return;
           }
           cChar = or + "," + og + "," + ob;
           document.getElementById('r_txt').value = or;
           document.bgColor = cChar;
       }

       function bgGLighter() {
           og--;
           if (og < 0 || og > 255) {
               return;
           }
           cChar = or + "," + og + "," + ob;
           document.getElementById('g_txt').value = og;
           document.bgColor = cChar;
       }

       function bgGBigger() {
           og++;
           if (og < 0 || og > 255) {
               return;
           }
           cChar = or + "," + og + "," + ob;
           document.getElementById('g_txt').value = og;
           document.bgColor = cChar;
       }

       function bgBLighter() {
           ob--;
           if (ob < 0 || ob > 255) {
               return;
           }
           cChar = or + "," + og + "," + ob;
           document.getElementById('b_txt').value = ob;
           document.bgColor = cChar;
       }

       function bgBBigger() {
           ob++;
           if (ob < 0 || ob > 255) {
               return;
           }
           cChar = or + "," + og + "," + ob;
           document.getElementById('b_txt').value = ob;
           document.bgColor = cChar;
       }
   </script>
</body>

简易调色板（js）

猜你喜欢