当前位置: 首页 > 编程笔记 >

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

夏侯宏旷
2023-03-14
本文向大家介绍JavaScript实战(原生range和自定义特效)简单实例,包括了JavaScript实战(原生range和自定义特效)简单实例的使用技巧和注意事项,需要的朋友参考一下

今天我又码了两个特效:一个是用原生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实战之菜单特效的使用技巧和注意事项,需要的朋友参考一下 本文将持续添加我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写!  这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式、简化事件函数、减少HTML层级,删了至少20行以上的冗余代

  • 本文向大家介绍原生js简单实现放大镜特效,包括了原生js简单实现放大镜特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现放大镜特效展示的具体代码,供大家参考,具体内容如下 普及知识:放大镜特效涉及到的几个值 offsetWidth    获取元素的宽度 offsetHeight  获取元素的高度 offsetLeft父元素没有定位时,获取元素距离页面的左边距,父元素有定位时

  • 本文向大家介绍JS简单实现自定义右键菜单实例,包括了JS简单实现自定义右键菜单实例的使用技巧和注意事项,需要的朋友参考一下 RT,一个简单的例子,仅仅讲述原理   假设我要把上面这个div设置为右键菜单,先随意美化一下。 原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY, 我们可以利用这两个属性,来控制d

  • 本文向大家介绍原生JS实现简单放大镜效果,包括了原生JS实现简单放大镜效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了原生JS实现放大镜效果的具体代码,供大家参考,具体内容如下 效果图:(演示) 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍原生JS实现简单的无缝自动轮播效果,包括了原生JS实现简单的无缝自动轮播效果的使用技巧和注意事项,需要的朋友参考一下 最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大。 万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的。现在记

  • 本文向大家介绍Android自定义控件简单实现侧滑菜单效果,包括了Android自定义控件简单实现侧滑菜单效果的使用技巧和注意事项,需要的朋友参考一下 侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现;多少都有点复杂,完成以后还需要对滑动冲突