首頁 > 開發者 > JavaScript
今天我又碼了兩個特效：一個是用原生input[type=range]的，另一個完全自訂的；下面是完整代碼和示範：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> #tip{ position: absolute; top: 30px; left: 0; right: 0; width: 200px; height: 160px; margin: auto; border: 1px solid gray; background-color: cornsilk; } #tip div{ position: relative; width: 100%; height: 80px; border-bottom: 1px solid gray; } .out{ position: relative; left: 16%; display: inline-block; border: 2px solid royalblue; margin-top: 20px; width: 130px; height: 20px; background-color: lightgoldenrodyellow; } .in{ display: block; height: 20px; line-height: 20px; text-align: right; color: white; width: 50%; background-image: linear-gradient(to right,powderblue 0%,#336699 50%,red 100%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="range"] { position: relative; left: 19%; top: 5px; box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset; background-color: lightskyblue; border-radius: 15px; width: 60%; -webkit-appearance: none; -moz-appearance: none; appearance: none; height:15px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 20px; width: 10px; background-color: coral; border-radius: 15px; -webkit-box-shadow: 0 -1px 1px black inset; -moz-box-shadow: 0 -1px 1px black inset; box-shadow: 0 -1px 1px black inset; } input[type="range"]:before{ content: attr(value); color: white; border-radius: 5px 0 0 5px; background-color: lightskyblue; } input[type="range"]:after{ content: attr(max); color: white; border-radius:0 5px 5px 0; background-color: lightskyblue; } .b{ display: inline-block; width: 22px; padding: 0; } #outer2{left: 5px} #btn1{ position: relative; left: 5px; } #btn2{ position: relative; left: 5px; } </style> <script> window.onload = function(){ //原生組件range var inner = document.getElementById('inner1'); var range = document.getElementById('range'); range.onclick = function(){ inner.innerHTML = range.value; inner.style.width = range.value+'%'; }; range.onmousemove = function(){ inner.innerHTML = range.value; inner.style.width = range.value+'%'; }; //自訂群組件 var outer2 = document.getElementById('outer2'); var inner2 = document.getElementById('inner2'); var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var id,id1; var value = parseInt(inner2.innerHTML); var a = parseFloat(window.getComputedStyle(outer2,null).width)/100; //減--- btn1.onmousedown = function(){ id1 = setTimeout(function change(){ if(value>0) { value--; inner2.innerHTML = value; inner2.style.width = (value) * a + 'px'; id = setTimeout(function(){ clearTimeout(id); change(); },16.7); }else{clearTimeout(id);} },500); }; btn1.onmouseup = function(){clearTimeout(id1);clearTimeout(id)}; btn1.onclick = function(){ console.log('a:'+a+','+'value:'+value); if(value>0){ value--; inner2.innerHTML = value; inner2.style.width = (value)*a+'px'; } }; //加+++ btn2.onmousedown = function(){ id1 = setTimeout(function change(){ if(value<100) { value++; inner2.innerHTML = value; inner2.style.width = value * a + 'px'; id = setTimeout(function(){ clearTimeout(id); change(); },16.7); }else{clearTimeout(id);} },500); }; btn2.onmouseup = function(){clearTimeout(id1);clearTimeout(id)}; btn2.onclick = function(){ if(value<100){ value++; inner2.innerHTML = value; inner2.style.width = value*a+'px'; } } } </script></head><body> <form id="tip"> <div> <span id="outer1" class="out"> <span id="inner1" class="in">50</span> </span> <input id="range" class="ran" type="range" min="0" max="100" step="1" value="50"> </div> <div id="d2"> <input id="btn1" class="b" type="button" value="<"> <span id="outer2" class="out"> <span id="inner2" class="in">50</span> </span> <input id="btn2" class="b" type="button" value=">"> </div> 按住按鈕0.5秒, 會持續變化! </form></body></html>
第一個的實現很簡單，就不做解釋了，自己看代碼；
這裡主要介紹第二個執行個體的實現：
在我們看到一個需求，或者別人的特效時，不急著去看別人的代碼，先想想，要是你，該怎麼實現？先把思路整理出來
該特效的實現原理：
1. 一個span內嵌套一個span；
•外面的span：只顯示寬、高、邊框，背景無
•裡面的span：高度和外面一樣，寬度為預設的50%，先設定好背景顏色為線性漸層
2. 按鈕的onclick事件比較簡單，點一下，就改變裡面的span的寬度和顯示數字
3. 當按鈕的onmousedown時，啟動計時器，等500ms後執行函數change函數，而change函數是一個用setTimeout回調自身的函數，他會沒16.7ms回調一次，達到動畫效果
痛點解析：
1. 這一句 var a = parseFloat(window.getComputedStyle(outer2,null).width)/100;
用來獲得初始值，如果你用outer2.style.width
是得不到值得，當然你也可以將a設個固定值，比如這裡可以設為
var a = 1.3，
注意IE9以下不支援getComputedStyle方法，
IE的Element對象有currentStyle屬性；
2. 這一句
btn1.onmouseup = function(){clearTimeout(id1);
clearTimeout(id)};
很關鍵，沒了它，在onclick觸發之前，會先觸發onmosedown，在500ms後，開始執行，之後一直執行外層的計時器；
3. 其它的都不是痛點；
這個執行個體其實擴充到其它很多應用，比如可以把中間的顯示部分替換為文章、圖片等等，再把按鈕換成自訂的，效果將會很酷的！
如果您覺得我有寫的不好的地方，歡迎指出！
以上這篇JavaScript實戰(原生range和自訂特效)簡單一實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
