<!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. Server.mappath用法

    1.Server.MapPath ("/") 应用程序根目录所在的位置 如 C:\qq\qqroot\ 2.Server.MapPath ("./") 表示所在 ...

  2. JS中this关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...

  3. 安卓奇葩问题之：返回按键监听，使Dialog不消失

    本文出处:http://bbs.9ria.com/thread-204406-1-1.html 在做自动更新的时候,弹出Dialog提示,要求是只能点击更新或者取消更新时Dialog才会消失.但是在这 ...

  4. 《转》python线程池

    线程池的概念是什么? 在IBM文档库中这样的一段描写:“在面向对象编程中,创建和销毁对象是很费时间的,因为创建一个对象要获取内存资源或者其它更多资源.在Java中更是 如此,虚拟机将试图跟踪每一个对象 ...

  5. 【DP】组合数字

    Password Attacker 题意就是给 M 个关键字,组合成 N 字符长度的结果,每一个关键字都必须在 N 位的字符中出现,有多少种可能结果. 范围 1 ≤ M ≤ N ≤ 100. 举例假设 ...

  6. 最小和(min)

    题目描述: N 个数排成一排,你可以任意选择连续的若干个数,算出它们的和.问该如何选择才能 使得和的绝对值最小. 如:N=8 时,8个数如下: 1    2    3     4    5    6 ...

  7. Request三种获取数据的方式

    今天在做ajax请求后台代码时,发现ajax的方法都对,但就是请求不了后台代码,后来在同事帮助下才发现前台定义了两个相同参数导致请求出错. 下面记录一下request三种获取数据的方式: 1. Req ...

  8. Mac下git命令自动补全

    当我第一次在mac上安装git,[tab]补全装成功了,但是我没有记录,当我过一段时间在重装的时候,我已经忘记了,又是各种查资料,再次做一下简单的记录. 首先,我因为还是mac小白,所以使用Homeb ...

  9. JSON 基础解释.

    JSON.(JavaScript Object Notation) JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本 ...

  10. 使用Statement操作数据库

    i import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql ...