相思资源网 Design By www.200059.com
今天我又码了两个特效：一个是用原生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；
"color: #ff0000">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和自定义特效)简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
标签：
javascript,range
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无JavaScript实战(原生range和自定义特效)简单实例的评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。