<!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. Win10专业版激活永久可查激活信息

    Win10专业版激活永久步骤 ------在安装Win10专业版后,使用激活工具将系统激活到180天 这里附带在下屡试不爽的激活工具--百度云盘-- 链接:http://pan.baidu.com/s ...

  2. js基础知识点总结

    如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避免全局变量和方法(命 ...

  3. C.C++把整个文件内容读进一个buffer中

    原创文章,未经本人允许禁止转载. //C方式, 调用的函数繁多 //fopen,fseek,ftell,fseek,malloc,fread,fclose,free. void foo() { FIL ...

  4. python面向对象中的__init__方法怎么理解？

    我们在学习python类的时候,总会碰见书上的类中有__init__()这样一个函数,很多同学百思不得其解,其实它就是python的构造方法. 构造方法类似于类似init()这种初始化方法,来初始化新 ...

  5. 数据契约（DataContract）

    原文地址:http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html 服务契约定义了远程访问对象和可供调用的方法,数据契约则是服务 ...

  6. PHP项目感悟 -- 从CI框架来看iOS的MVC

    其实这几天一直都想找时间把这个感悟整理出来,也是这一段一直思考的问题,因为这一段参加一个PHP后台项目的开发,框架使用的是CI,随着项目的进展,对于CI接触的也越多,但是由于理解的可能并不深刻,我也只 ...

  7. 【C-分支结构】

    一.关系运算符 双目运算符 自左向右结合 关系运算符的优先级低于算术运算符,高于赋值运算符 <(小于) <=(小于或等于) >(大于) >=(大于或等于) ==(等于) !=( ...

  8. WIN8应用隐私声明

    隐私权声明 本应用连接网络仅为控制硬件设备,不会收集你的个人信息,也不共享你个个人信息. 应用名称 雅典娜移动客户端 关于本应用 本应仅为控制设备应用,不关注任何配置相关信息,所有数据均来自服务器端. ...

  9. 【leetcode】Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  10. java HashMap那点事

    集合类的整体架构 比较重要的集合类图如下:   有序否 允许元素重复否 Collection 否 是 List 是 是 Set AbstractSet 否 否 HashSet TreeSet 是(用二 ...