利用定时器实时显示<input type="range"/>的值（附：JavaScript 装逼指南）

最新推荐文章于 2025-07-01 23:34:32 发布

原创最新推荐文章于 2025-07-01 23:34:32 发布 · 置顶 · 8.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #range #装逼 #实时显示

web前端学习专栏收录该内容

301 篇文章

订阅专栏

本文将介绍如何使用JavaScript配合<input type='range'/>，实现实时显示滑动条值的效果，打造编程中的小惊喜，提升用户体验。同时，分享JavaScript装逼小技巧，助你在代码世界中独树一帜。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Document</title>
        <script type="text/javascript" src="jquery-2.2.4.min.js"></script>

        <style type="text/css">
            input[type="range"] {
                width: 80%;
                background-color: red;
                border-radius: 15px;
                -webkit-appearance: none;
                height: 1px;
                position: relative;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                background-color: green;
                border-radius: 50%;
                height: 30px;
                width: 30px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
                border: none;
                position: relative;
                z-index: 10;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $(".input_1").change(function() {
                    $("p.p1").text($(this).val());
                })

                setInterval(function() {
                    $("p.p2").text($(".input_2").val());
                }, 0.01)
            })
        </script>
    </head>

    <body>
        <p>添加change事件</p>
        <input type="range" class="input_1" step="0.01" min="0" max="5" value="0">
        <p class="p1">0</p>
        <p>添加定时器</p>
        <input type="range" class="input_2" step="0.01" min="0" max="5" value="0">
        <p class="p2">0</p>
    </body>

</html>

这里写图片描述

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Document</title>
        <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
        <style type="text/css">
            input[type="range"] {
                width: 80%;
                background-color: red;
                border-radius: 15px;
                -webkit-appearance: none;
                height: 1px;
                position: relative;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                background-color: green;
                border-radius: 50%;
                height: 30px;
                width: 30px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
                border: none;
                position: relative;
                z-index: 10;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $(".input_1").change(function() {
                    $("p.p1").text($(this).val());
                })

                setInterval(function() {
                    $("p.p2").text($(".input_2").val());
                    $(".input_2").val(+$(".input_2").val() + 0.1);
                }, 10);
                console.log(typeof $(".input_2").val());
            })
        </script>
    </head>

    <body>
        <p>添加change事件</p>
        <input type="range" class="input_1" step="0.01" min="0" max="5" value="0">
        <p class="p1">0</p>
        <p>添加定时器</p>
        <input type="range" class="input_2" step="0.01" min="0" max="5" value="0">
        <p class="p2">0</p>
    </body>

</html>

JavaScript 装逼指南

如何写JavaScript才能逼格更高呢？怎样才能组织JavaScript才能让别人一眼看出你不简单呢？是否很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢？下面列出一些在JavaScript时的装逼技巧。

1. 匿名函数的N种写法

你知道“茴”的四种写法吗？ε=(･д･｀*)ﾊｧ… 扯淡，但你或许不知道匿名函数的好几种写法。一般情况下写匿名函数是这样的：

(function(){})();
但下面几种写法也是可以的：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());
其实细看可以看出规律，因为 +-!~ 这些具有极高的优先级，所以右边的函数声明加上括号的部分（实际上就是函数执行的写法）就直接执行了。当然，这样的写法，没有什么区别，纯粹看装逼程度。

2. 另外一种undefined

从来不需要声明一个变量的值是undefined，因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写，会被鄙视的：

var data = undefined;
但是如果你就是强迫症发作，一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做：

 var data = void 0; // undefined
void在JavaScript中是一个操作符，对传入的操作不执行并且返回undefined。void后面可以跟 () 来用，例如 void(0) ，看起来是不是很熟悉？没错，在HTML里阻止带href的默认点击操作时，都喜欢把href写成 javascript:void(0) ，实际上也是依靠void操作不执行的意思。

当然，除了出于装逼的原因外，实际用途上不太赞成使用void，因为void的出现是为了兼容早起ECMAScript标准中没有undefined属性。 void 0 的写法让代码晦涩难懂。

3. 抛弃你的if和else

当JS代码里有大量的条件逻辑判断时，那代码看起来多可怕：

if () {
  // ...
} else if () {
  // ...
} else if () {
  // ...
} else {
  // ...
}
不用我说你都猜到用什么语法来简化if-else了。没错，用 || 和 && ，很简单的原理就不用说啦。值得一提的是，有时候用 !! 操作符也能简化if-else模式。例如这样：

// 普通的if-else模式
var isValid = false;
if (value && value !== 'error') {
    isValid = true;
}
// 使用!!符号
var isValid = !!(value && value !== 'error');
“!”是取反操作，两个“!”自然是负负得正了。

4. 不加分号

关于JavaScript要不要加分号的争论已经吵了好几年。Google的JavaScript语法指南告诉我们要加分号，很多JavaScript语法书籍也告诉我们加上分号更安全。然而，分号加不加，全靠个人对代码的写法，你确信写得足够安全的话，不加分号显得更加高大上。

5. 赶上ES6的早班车

ES6即将在年底正式发布，赶时髦的开发者们，赶快在自己的代码里用起来。用上module声明，写写class，捣鼓一下Map，这些都会让你的代码逼格更高。神马？你都不会用？那也好歹在代码头部加上一个ES5的 "use strict"; 呀。

6. 添加AMD模块支持

给你写的代码声明一下AMD模块规范，这样别人就可以直接通过AMD的规范来加载你的模块了，如果别人没有通过规范来加载你的模块，你也可以优雅地返回一个常规的全局对象。来看看jQueryUI的写法：

(function( factory ) {
  if ( typeof define === "function" && define.amd ) {
    // AMD. Register as an anonymous module.
    define( [ "jquery" ], factory );
  } else {
    // Browser globals
    factory( jQuery );
  }
}(function( $ ) {
  // 这里放模块代码
  return $.widget;
}));
就用它来包裹你的实际代码吧，保证别人一看代码就知道你是个专业的开发者。

7. Function构造函数

很多JavaScript教程都告诉我们，不要直接用内置对象的构造函数来创建基本变量，例如 var arr = new Array(2); 的写法就应该用 var arr = [1, 2]; 的写法来取代。但是，Function构造函数（注意是大写的Function）有点特别。Function构造函数接受的参数中，第一个是要传入的参数名，第二个是函数内的代码（用字符串来表示）。

var f = new Function('a', 'alert(a)');
f('test'); // 将会弹出窗口显示test
或许大家疑惑了，你这样绕着写，跟 function f(a) {alert(a);} 比有什么好处呢？ 
事实上在某种情况下是有好处的，比如不能用eval的时候，你需要传入字符串内容来创建一个函数的时候。在一些JavaScript模板语言的解析，和字符串转换json对象的时候比较实用。

8. 用原生Dom接口不用jQuery

一个傲娇的前端工程师是不需要jQuery的，前提是你经得起折腾。实际上，几乎所有的jQuery方法都可以用同样的Dom原生接口来实现，因为这货本来就是用原生接口实现的嘛，哈哈。怎样做到不用jQuery（也叫jQuery-free）呢？阮老师的博文 《如何做到 jQuery-free？》 给我们很好的讲解了做法。依赖于querySelector和querySelectorAll这两个现代浏览器的接口，可以实现跟jQuery同样方便和同样效率的Dom查找，而且其他的类似Ajax和CSS的接口同样也可以把原生方法做一些兼容方面的包装即可做到jQuery-free。

总结

上述所有的JavaScript装逼写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法；而有些写法则容易造成代码晦涩难懂或者效率偏低，例如上面说的 void 0 的写法，实际上不可取。JavaScript语法上灵活，让大家对同一个功能有很多种不同的写法，写法上的优化是对程序结构和代码维护有很大帮助的。所以，装逼得装得好看。

Boolean

这个技巧用的很多，也非常的简单

!!'foo'
通过两个取反，可以强制转换为Boolean类型。较为常用。

Number

这个也特别简单，String转化为Number

+'45'
+new Date
会自动转化为number类型的。较为常用。

IIFE

这个其实非常有实用价值，不算是装逼。只是其他语言里没有这么玩的，给不太了解js的同学看那可牛逼大了。

(function(arg) {
    // do something
})(arg)
实用价值在于可以防止全局污染。不过现在随着ES2015的普及已经没什么必要用这个了，我相信五年之后，这种写法就会逐渐没落。

自己干五年，在实习生面前装逼用也是蛮不错的嘛~

Closure

闭包嘛，js 特别好玩的一个地方。上面的立即执行函数就是对闭包的一种运用。

不了解的回去翻翻书，知乎上也有很多讨论，可以去看看。

闭包用起来对初学者来说简直就是大牛的标志(其实并不是)。

var counter = function() {
    var count = 0
    return function() {
        return count++
    }
}
上面用到了闭包，看起来还挺装逼的吧。不过好像没什么实用价值。

那么这样呢？

var isType = function(type) {
    return function(obj) {
        return toString.call(obj) == '[Object ' + type + ']';
    }
}
通过高阶函数很轻松的实现判定类别。(别忘了有判定Array的Array.isArray())

当然，很明显，这只是基础，并不能更装逼一点。来看下一节

Event

事件响应前端肯定都写烂了，一般来说如何写一个计数器呢？

var times = 0
var foo = document.querySelector('.foo')
foo.addEventListener('click', function() {
    times++
    console.log(times)
}, false)
好像是没什么问题哦，但是！变量times为什么放在外面，就用了一次放在外面，命名冲突了怎么办，或者万一在外面修改了怎么办。

这个时候这样一个事件监听代码就比较牛逼了

foo.addEventListener('click', (function() {
    var times = 0
    return function() {
        times++
        console.log(times)
    }
})(), false)
怎么样，是不是立刻感觉不一样了。瞬间逼格高了起来！

通过创建一个闭包，把times封装到里面，然后返回函数。这个用法不太常见。

parseInt

高能预警
从这里开始，下面的代码谨慎写到公司代码里！
parseInt这个函数太普通了，怎么能装逼。答案是~~

现在摁下F12，在console里复制粘贴这样的代码：

~~3.14159
// => 3
~~5.678
// => 5
这个技巧十分装逼，原理是~是一个叫做按位非的操作，会返回数值的反码。是二进制操作。

原因在于JavaScript中的number都是double类型的，在位操作的时候要转化成int，两次~就还是原数。

Hex

十六进制操作。其实就是一个Array.prototype.toString(16)的用法

看到这个词脑袋里冒出的肯定是CSS的颜色。

做到随机的话可以这样

(~~(Math.random()*(1<<24))).toString(16)
底下的原文链接非常建议去读一下，后三个技巧都是在那里学到的。

«

左移操作。这个操作特别叼。一般得玩 C 玩得多的，这个操作会懂一些。一般半路出家的前端码农可能不太了解(说的是我 ☹)。

这个也是二进制操作。将数值二进制左移

解释上面的1<<24的操作。

其实是1左移24位。000000000000000000000001左移24位，变成了1000000000000000000000000

不信？

试着在console粘贴下面的代码

parseInt('1000000000000000000000000', 2) === (1 << 24)
其实还有一种更容易理解的方法来解释

Math.pow(2,24) === (1 << 24)
因为是二进制操作，所以速度是很快的。

BTW

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
翻译成正常语言就是这样的

Array.prototype.forEach.call(document.querySelectorAll('*'), 
dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`)
Others

其他的，像是一些await, Decorators什么的。用上TypeScript基本就懂的东西我就不介绍了。

祝愿大家越玩越牛逼

1.总是颠倒逻辑

让我们从一个小优化开始，目的是为了使得非常简单的操作看起来复杂些。

?
1
2
if (x && y) { … } // bad
if (!(!x || !y)) { … } // good
2.在你的变量名字里使用扩展的unicode字符

编译好的软件一旦发布成产品，它必须是一个黑盒。这对JavaScript来说是不可能的。如果有人想彻底搞懂你的JavaScript代码，他们仅仅需要打开浏览器控制台、加一些断点就能看到对象的状态。

对象属性的名称，改用非规则字符串，来阻碍他们的进展。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
 var foo = function (person) {
  // stuff happens

  // perhaps a breakpoint is added here

  // or they attempt to log the object
  console.log(person);
 }
 var person = {};
 person[‘\t’] = ‘Nicholas’;
 person[‘\b’] = ‘Male’;
 person[‘\r’] = ‘Programmer’;
 person[‘\f’] = ‘Lover’;
当你试图去查看变量时，会看到如下情景：

t1

当你试着在控制台输出log时，会看到：

tu2

用同样的技巧把Zalgo文本合并到你的代码

tu3

3.补习你的三角学

在我从大学退学以前，老师常常说数学和编程是多么地紧密相关。根据经验，我发现不是这回事儿。事实上，我开始觉得，老师是为了骗学生来上课。好吧，是时候好好利用学生欠下的严重债务了。

不要用

?
1
if (!val) { … }




而要用

?
1
Math.floor(.5 + ((Math.cos(val)*.5)))
仅当val是2pi的整数倍时，它才会返回true。你甚至不需担心val不是一个数字。真没有关系。实际上，也不再有关系了。

4.利用JavaScript的仁慈

有多少次你在一个if语句该用等号操作符的时候而意外地使用了赋值操作符？这是非常恼人的，因为它不会报错、仅仅把程序带到不可意料的境地。

?
1
2
3
4
5
6
7
8
function foo (x) {
  if (x=true) {
    // no matter what value is 
    // passed in for x, this
    // will always execute
  }
}
foo(false);
看你代码的人看到这里，会想当然地认为这是你代码的错误。但是，我们没有错误，因此这个人就会受到惩罚。“修复”它将带来不希望的后果。

5.不用十进制

用八进制初始化一个数字很容易被误认为是十进制；仅仅在第一个数字使用‘0’。

?
1
2
var i = 27 // 27
var j = 027 // 23
你的同事或许责怪你正犯下不可饶恕的错误，但是你要坚持八进制更快，因为所有的位本来就是以8为一组的。

6.空白不是毛病；除了它有用的情况

每个人都知道JavaScript里的空白和分号不过是多余的，是吗？错！不要这样想当然。

?
1
2
3
4
5
6
7
8
9
(function () { 
  var a=1,
      b=2,
      c=3
      d=4,
      e=5,
      f=6;
}());
console.log(d,e,f); // 4,5,6
上面的例子，我们“少”了一个逗号。如果代码都在一行，我们不会犯错。但是既然不在一行，编译器将在 c=3 之后附加一个分号。这导致d，e，f声明为全局变量。现在可以随时使用这些变量了，包括分离的文件。

再一次，如果有人注意到这种情况，并试着修改，这将潜在地破坏了所有不相关的代码部分，而不是规范代码，他们很可能只有回退修改了，足以证明你更聪明。

7.富有创新

编程就是创新，创新就是模仿别人。不要害怕偷代码和想法，或者责备其他人偷你的。比如，你知道jQuery是完全模仿Prototype的吗？是的。

Nicholas Ortenzio【注1】在练习倒背字母表，以防万一。