利用定时器实时显示<input type="range"/>的值
<!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"/>的值的更多相关文章
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- CSS修改input[type=range]滑块样式
input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...
- H5滑条(input type=range)
input[type=range] { -webkit-appearance: none; width: 230px; border-radius: 10px; /*这个属性设置使填充进度条时的图形为 ...
- 美化input type=range标签滑动样式（带渐变效果）
input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class=& ...
- HTML5新特性——自定义滑动条（input[type="range"]）
HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
- 改变input[type=range]的样式 动态滑动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- input type=range 进度条的自定义样式
/* 自定义进度条样式 */ .v_my input[type=range] { -webkit-appearance: none;/*清除系统默认样式*/ width: .8rem; backgro ...
- js+css3+HTML5拖动滑块(type="range")改变值
最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...
- input type=checkbox的值后台怎么接受
input type=checkbox的值是on或off 实体类中这样写即可 public void setChapterVisibility(Object chapterVisibility) { ...
随机推荐
- html5 canvas用动画的形式装载图像
本示例使用HTML5 canvas,简单的编写了装载图片效果, 请使用支持HTML5的浏览器预览效果: 下图为以逐渐横向栅格的效果图 html部分: <!DOCTYPE html> < ...
- svn服务器搭建与使用
- 使用CSS设置行间距，字间距.
字间距1.text-indent设置抬头距离css缩进即对,对应div设置css样式text-indent : 20px; 缩进了20px 2.letter-spacing来设置字与字间距_字符间距离 ...
- springboot使用之一：连接生产数据库，添加连接池
项目中,难免遇到连接数据库的情形,目前来说springboot连接mybatis有两种,我这边使用的是mybatis官方提供XML方式的整合. 后面,对项目进行完善,引入了连接池,PageHelper ...
- 高等微积分及其应用 nicholas.pdf——下载地址
http://pan.baidu.com/share/link?shareid=426414429&uk=3977204074 这本书在网络上很少有了,本人是在群里下过来整理成一个文档了,由n ...
- Python排列组合问题
1.字符串的全排列 问题描述:打印出原字符串中所有字符的所有排列.——将输入字符串中的每个字符作为一个不同的字符看待,即使它们是重复的,如'aaa'应打印6次. Python可以用生成器解决: def ...
- protobuf坑1
或者说特性吧,没仔细看protobuf代码,也许我还理解不够. 按照陈硕大牛的这篇帖子的介绍,“它包含了程序编译的时候所链接的全部 protobuf Message types” 实际开发过程中发现必 ...
- 用Yaml文件进行元素管理【转】
原文:http://www.cnblogs.com/milanmi/p/4636503.html 如界面有一个按钮,id号是test.如果进行对象化的话,就是test.click就可以了.不用每次都要 ...
- Drupal资源
以下是一些Drupal的常用资源. www.drupal.org:Drupal官网,拥有最全 www.acquia.com:Drupal奠基人Dries主导的专业网站,有著名的Aquia平台,功能类似 ...
- CCNA第三章子网划分,变长子网掩码(VLSM)和TCP/IP排错考试要点学习笔记
1. 子网划分的好处 缩减网络流量; 优化网络性能; 简化管理; 可以更为灵活地形成大覆盖范围的网络. 2. 如何创建子网的步骤 首先,确认所需要的网络ID数; 其次,确认每个子网中所 ...