利用定时器实时显示<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) { ...
随机推荐
- OD使用教程9
先运行程序打开about,发现这是一个未注册的软件需要注册后才能使用里面的工具,所以随便注册一下,跳出一个提示说注册的是非法的邮箱,所以就可以以此做为突破口来破解这个程序 将提示的语句作为关键字去找出 ...
- hdoj 1272 小希的迷宫
上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道连通了 ...
- CentOS 7下MySQL安装配置
安装: #centos 7 yum install -y mariadb mariadb-server mariadb-devel #debian 8 apt-get install nginx ma ...
- Android Studio--Gradle基础(转)
原文链接:http://stormzhang.com/devtools/2014/12/18/android-studio-tutorial4/ 其实很早之前也写了一篇Gradle的基础博客,但是时间 ...
- 经验总结之Android framework开发
本人在某做手机ROM的厂商工作近两年,虽然工作年限不长,但是对此类“工种”已有比较初步的认识,写下来供大家参考借鉴. framework的工作相对于其他比较成熟的软件开发类似,分为维护和需求开发. 需 ...
- easyui datagrid中关联combox
datagrid中列上关联combobox{ field: 'SysCode', title: '系统代码', width: 150, align: 'left', editor: { type: ' ...
- gulp 初级教程 会着让道
1.全局安装一遍: $ npm install gulp -g 2.cd 到项目的根目录 (如果跟程序配合,程序先建好程序的话,你可找到放js和css还有images的文件夹.)我当时就在这挡住了,不 ...
- JDK6环境下升级项目到springframework4.x和tomcat7.x
springframework 3.x升级到 4.x 1 xsi:schemaLocation 对应的3.x->4.x 2 pom springframework <propertie ...
- 1.iOS直播ijkplayer（第一周）
准备工作: 1.使用的B站的开源框架ijkplayer ,下载地址: https://github.com/Bilibili/ijkplayer ijkplayer 是一个基于 ffplay 的轻量级 ...
- MSVCRTD.lib(mfc.obj) : error LNK2019: 无法解析的外部符号 _WinMain@16，该符号在函数 ___tmainC (转)
一.问题描述 我所使用的编程环境:VS2010 出现的问题如下: MSVCRTD.lib(mfc.obj) : error LNK2019: 无法解析的外部符号_WinMain@16,该符号在函数 _ ...