我們在用JS寫程序的時候，經常會遇到像在程序中直接控制字體的大小顏色等基本信息，尤其的在后臺方便，小編測試用javascript寫了一個這個控件，喜歡的拿走吧。
以上就是用JS寫的運行效果，一下我們來看看代碼具體實現方式：
知識點：for循環語句，字符串方法，進制轉換，this指向問題，變量，數組方法，基本事件處理等。
<!doctype html><!--聲明html版本編寫指令 H5--><html> <head> <!--聲明頁面編碼 uft-8 國際編碼--> <meta charset="UTF-8"> <!--網站三要素 關鍵字 頁面描述 標題--> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> *{margin:0px;padding:0px;font-family:"微軟雅黑";} #box{width:400px; height:450px; background:#000; margin:50px auto; border:5pxsolid #000; border-radius:5px; } #show{width:100%; height:190px; background:#00ccff; line-height:200px; font-size:8px; font-weight:bold; text-align:center; border-radius:5px; } #font ul{margin-left:10px; margin-top:30px;} #font ul li{width:380px; height:50px; list-style-type:none; color:#ddd;} #font ul li span{display:block; width:50px; height:50px; line-height:50px; text-align:right; float:left; } #font ul li .roll{width:290px; height:50px; float:left; line-height:50px; padding-left:30px; } #font ul li .roll .move{width:200px; height:12px; display:inline-block; background:#fff; margin-left:15px; margin-right:15px; border-radius:10px; background-size:cover; border:1px solid #fff; position:relative; } #font ul li .roll .move .prog{position:absolute; top:0px; width:0px; height:12px; border-radius:10px 0 0 10px; background:url("images/slider-bar.png") bottom;} #font ul li .roll .move .prog .but{width:22px; height:22px; position:absolute; top:-3px; background:url("images/dot-bg.png") no-repeat; cursor:pointer; left:0px;} </style> </head> <body> <div id="box"> <div id="show">云煙好帥啊</div> <div id="font"> <ul> <li> <span>字號</span> <div class="roll"> 8 <div class="move"> <div class="prog"> <div class="but"></div> </div> </div> 40px </div> </li> <li> <span>顏色R</span> <div class="roll"> 0 <div class="move"> <div class="prog"> <div class="but"></div> </div> </div> 255 </div> </li> <li> <span>G</span> <div class="roll">0 <div class="move"> <div class="prog"> <div class="but"></div> </div> </div> 255 </div> </li> <li> <span>B</span> <div class="roll"> 0<div class="move"> <div class="prog"> <div class="but"></div> </div> </div> 255 </div> </li> </ul> </div> </div> </body> <script type="text/javascript"> /* 1.JS主要針對頁面當中的HTML元素以及樣式進行修改，從而得到特效 2.我們一般用JS寫特效，要知道觸發特效的條件是什么 3.促發這個條件的對象是誰 4.寫這個事件里面發生的事情 5.獲取鼠標的移動水平方向的距離 6.this代表當前執行這個事件的對象 (這個事件是誰做的 那么這個事件當中的this就是誰) */ var oBut =document.getElementsByClassName("but");//通過元素的類名 是以一個數組的形式保存 var oFont =document.getElementById("show");//通過ID名獲取元素 var oProg =document.getElementsByClassName("prog"); var width = [0,0,0,0]; var rgb = ["00","00","00"]; for (var i=0;i<oBut.length;i++)//重復執行某一個語句（循環體）限制條件 { oBut[i].index=i;//自定義一個index屬性保存i oBut[i].onmousedown =function(e){//鼠標點擊下去 //event事件對象 clientX clientY var e = e || window.event;//做IE兼容 this.x =e.clientX;//當前對象的屬性去保存這個值(自定義一個x屬性) var thisIndex = this;//定義一個變量保存this指向對象 var lastLeft = width[this.index]; //console.log("鼠標點擊下去"); document.onmousemove =function(e){//鼠標移動事件 //console.log("鼠標移動事件"); var e = e || window.event;//做IE兼容 width[thisIndex.index] =e.clientX-thisIndex.x+lastLeft; if (width[thisIndex.index]>180)width[thisIndex.index]=180; if (width[thisIndex.index]<0)width[thisIndex.index]=0; oBut[thisIndex.index].style.left =width[thisIndex.index]+"px"; oProg[thisIndex.index].style.width =width[thisIndex.index]+"px"; if (thisIndex.index ==0) {oFont.style.fontSize =width[thisIndex.index]/180*40+8+"px"; //駝峰命名法 }else{ var num = parseInt(width[thisIndex.index]/180*255); /*if (num<16) { numStr ="0"+num.toString(16); }else{ numStr = num.toString(16); }*/rgb[thisIndex.index-1] =num<16?"0"+num.toString(16):num.toString(16);oFont.style.color ="#"+rgb[0]+rgb[1]+rgb[2]; } }document.onmouseup =function(){//鼠標松開事件//console.log("鼠標松開事件");this.onmousemove =null;//終止移動事件this.onmouseup =null;//終止鼠標松開事件 } } }</script></html>新聞熱點
疑難解答
