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

利用定时器实时显示<input type="range"/>的值的更多相关文章

  1. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  2. CSS修改input[type=range]滑块样式

    input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...

  3. H5滑条(input type=range)

    input[type=range] { -webkit-appearance: none; width: 230px; border-radius: 10px; /*这个属性设置使填充进度条时的图形为 ...

  4. 美化input type=range标签滑动样式（带渐变效果）

    input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class=& ...

  5. HTML5新特性——自定义滑动条（input[type="range"]）

    HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...

  6. 改变input[type=range]的样式 动态滑动

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  7. input type=range 进度条的自定义样式

    /* 自定义进度条样式 */ .v_my input[type=range] { -webkit-appearance: none;/*清除系统默认样式*/ width: .8rem; backgro ...

  8. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  9. input type=checkbox的值后台怎么接受

    input type=checkbox的值是on或off 实体类中这样写即可 public void setChapterVisibility(Object chapterVisibility) { ...

随机推荐

  1. Android视图状态及重绘流程分析，带你一步步深入了解View(三)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17045157 在前面一篇文章中,我带着大家一起从源码的层面上分析了视图的绘制流程, ...

  2. unity 实现物体破碎效果的一些方法

    游戏越来越接近现实的感觉,如果有一个真是的 虚拟现实设备,可能我们真的会感觉是在真实世界.场景的逼真是在渲染效果.角色AI.游戏逻辑.物理效果等等一起导致的结果.现在游戏越来越大,除了渲染,物理估计是 ...

  3. 浅析 IDE跟编译器

    之前听别人总说你用啥IDE,直接用编译器. 总的来说IDE包含编译器,而编译器仅仅是IDE的一部分, IDE包括编辑器与编译器. IDE: 可以在IDE上面编写代码,然后编译运行,有错误还能调试.比如 ...

  4. Qt Sqlite qwt 发布过程中碰到的问题runtime error

    qt版本:4.8.0 qwt版本:6.1.2 使用dll show检测缺少的dll,或者笨一点的方法,点击运行差什么找什么放进去: 左上显示exe调用哪些dll,右边是dll又再次调用啦哪些dll: ...

  5. 验证radio 是否被选中

    var radioType=document.getElementsByName("radioType");    var isCheckRadio=false;    for(v ...

  6. Sass的学习

    第一章:Sass简介 一. 什么是CSS预处理器 定义:CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用 ...

  7. 解决Chrome重启后插件被禁用的问题

      下载组策略模版,添加白名单 http://pan.baidu.com/s/1o88kcZo 打开组策略 win+r 打开运行,输入 gpedit.msc 添加模版 右键 ->管理模版 -&g ...

  8. AutoVue ISDK学习总结（一）

    这段时间,断断续续花了2,3周时间,研究AutoVue ISDK.貌似这个东西用的人很少,网上只搜到了一篇中文文档.自己英文水平差,Java水平也差,看Oracle官网文档,进展非常慢.到现在,终于对 ...

  9. Thread and ThreadPool

    C#中Thread与ThreadPool的比较 Thread类,一次使用一个线程,来创建和删除线程.这种方式建立和删除线程是很昂贵的(cpu密集型). Threadpool类 对于大多数的情况下是使用 ...

  10. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...