我們?cè)谟肑S寫(xiě)程序的時(shí)候,經(jīng)常會(huì)遇到像在程序中直接控制字體的大小顏色等基本信息,尤其的在后臺(tái)方便,小編測(cè)試用javascript寫(xiě)了一個(gè)這個(gè)控件,喜歡的拿走吧。
站在用戶的角度思考問(wèn)題,與客戶深入溝通,找到瑞麗網(wǎng)站設(shè)計(jì)與瑞麗網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋瑞麗地區(qū)。
以上就是用JS寫(xiě)的運(yùn)行效果,一下我們來(lái)看看代碼具體實(shí)現(xiàn)方式:
知識(shí)點(diǎn):for循環(huán)語(yǔ)句,字符串方法,進(jìn)制轉(zhuǎn)換,this指向問(wèn)題,變量,數(shù)組方法,基本事件處理等。
<!doctype html><!--聲明html版本編寫(xiě)指令 H5--> <html> <head> <!--聲明頁(yè)面編碼 uft-8 國(guó)際編碼--> <meta charset="UTF-8"> <!--網(wǎng)站三要素 關(guān)鍵字 頁(yè)面描述 標(biāo)題--> <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:5px solid #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>字號(hào)</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主要針對(duì)頁(yè)面當(dāng)中的HTML元素以及樣式進(jìn)行修改,從而得到特效 2.我們一般用JS寫(xiě)特效,要知道觸發(fā)特效的條件是什么 3.促發(fā)這個(gè)條件的對(duì)象是誰(shuí) 4.寫(xiě)這個(gè)事件里面發(fā)生的事情 5.獲取鼠標(biāo)的移動(dòng)水平方向的距離 6.this代表當(dāng)前執(zhí)行這個(gè)事件的對(duì)象 (這個(gè)事件是誰(shuí)做的 那么這個(gè)事件當(dāng)中的this就是誰(shuí)) */ var oBut =document.getElementsByClassName("but");//通過(guò)元素的類名 是以一個(gè)數(shù)組的形式保存 var oFont =document.getElementById("show");//通過(guò)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++)//重復(fù)執(zhí)行某一個(gè)語(yǔ)句(循環(huán)體)限制條件 { oBut[i].index=i;//自定義一個(gè)index屬性保存i oBut[i].onmousedown =function(e){//鼠標(biāo)點(diǎn)擊下去 //event事件對(duì)象 clientX clientY var e = e || window.event;//做IE兼容 this.x =e.clientX;//當(dāng)前對(duì)象的屬性去保存這個(gè)值(自定義一個(gè)x屬性) var thisIndex = this;//定義一個(gè)變量保存this指向?qū)ο? var lastLeft = width[this.index]; //console.log("鼠標(biāo)點(diǎn)擊下去"); document.onmousemove =function(e){//鼠標(biāo)移動(dòng)事件 //console.log("鼠標(biāo)移動(dòng)事件"); 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(){//鼠標(biāo)松開(kāi)事件 //console.log("鼠標(biāo)松開(kāi)事件"); this.onmousemove =null;//終止移動(dòng)事件 this.onmouseup =null;//終止鼠標(biāo)松開(kāi)事件 } } } </script> </html>
網(wǎng)頁(yè)名稱:javascript字體顏色控件的開(kāi)發(fā)JS實(shí)現(xiàn)字體控制
瀏覽地址:http://muchs.cn/article18/ihcogp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、App設(shè)計(jì)、自適應(yīng)網(wǎng)站、外貿(mào)建站、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)