JavaScript实战(原生range和自定义特效)简单实例


Posted in Javascript onAugust 21, 2016

今天我又码了两个特效:一个是用原生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和自定义特效)简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
JavaScript 应用类库代码
Jun 02 Javascript
js DOM的学习笔记
Dec 22 Javascript
JQuery性能优化的几点建议
May 14 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 #Javascript
JSONP和批量操作功能的实现方法
Aug 21 #Javascript
全面解析标签页的切换方式
Aug 21 #Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 #Javascript
JS实现图片局部放大或缩小的方法
Aug 20 #Javascript
JS获取及验证开始结束日期的方法
Aug 20 #Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 #Javascript
You might like
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
php经典趣味算法实例代码
2020/01/21 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
党委书记岗位职责
2013/11/24 职场文书
大学运动会通讯稿
2014/01/28 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
音乐教师个人总结
2015/02/06 职场文书
2019求职信大礼包
2019/05/15 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
CSS基础详解
2021/10/16 HTML / CSS
Python绘制散乱的点构成的图的方法
2022/04/21 Python