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

最新推荐文章于 2024-01-04 17:53:00 发布

置顶

最骚的就是你

最新推荐文章于 2024-01-04 17:53:00 发布

阅读量8.2k

点赞数 4

分类专栏： web前端学习文章标签： javascript range 装逼实时显示

本文链接：https://blog.csdn.net/libin_1/article/details/51603808

版权

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

摘要由CSDN通过智能技术生成

这里写图片描述

<!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>