input range 模拟滑块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> HTML5 input元素type=range </title>
<style>
#range{
color:#f69;
}
input[type="range"] {
-webkit-appearance: none;
-webkit-box-shadow: 0 1px 0 0px #424242,
0 1px 0 #060607 inset,
0px 2px 10px 0px black inset,
1px 0px 2px rgba(0, 0, 0, 0.4) inset,
0 0px 1px rgba(0, 0, 0, 0.6) inset;
margin-top: 2px;
background-color: #f69;
border-radius: 15px;
width: 400px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: default;
top: 1px;
cursor: default;
top: 1px;
height: 15px;
width: 100px;
background: none repeat scroll 0 0 #777;
border-radius: 15px;
-webkit-box-shadow: 0 -1px 1px black inset; }
</style>
</head>
<body>
<input id="range" type="range" min="0" max="100" value="0" >
<script type='text/javascript'>
~function(){
var slider = document.getElementById('range')
function gooo(){
alert('gooo')
}
if ('range' == slider.type){
var ov = slider.value
slider.onchange = function(){
var v = this.value|0
if (v < ov) return this.value = ov
var v = this.value|0
if (v < ov) return this.value = ov
ov = v
if (v > 50) {
this.value = ov = 100
gooo()
}
}
}else{
slider.onclick = gooo }
}()
</script>
</body>
</html>
input range 模拟滑块的更多相关文章
- input range样式更改,模拟滑块
input range 样式更改,js模拟滑块实时更新数据. 效果图: html 代码: <div> <span class="slider"></s ...
- 我的Android进阶之旅------>Android中通过adb shell input来模拟滑动、按键、点击事件
今天在维护公司的一个小项目的时候,发现按公司手机的某个物理按键,激活相应的Service后,会在屏幕上模拟的点击了屏幕的某个坐标点.好家伙,原来是之前该项目的版本是按这个物理按键后,会弹出一个对话框, ...
- 使用input range滑块，控制元素transform rotate旋转样式
<!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...
- input file 模拟预览图片。
首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...
- input range样式优化
首先HTML代码: <input id="snrPollInterval" type="range" min="1" max=&quo ...
- input range音乐进度条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- android后台input命令模拟按键【转】
本文转载自:http://www.cnblogs.com/sh1o2os/archive/2013/02/05/2893201.html 有时做开发时,我们使用的触摸屏没有虚拟按键(HOME.BACK ...
- HTML5：使用Canvas和Input range控件放大缩小图片,剪裁，并上传图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- input file 模拟
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- ArcGIS 安装
百度网盘下载链接 密码:tvm6 打开解压的文件后,第一步为安装licence manager(安装监听) 打开\ArcGIS10.4\LicenseManager中的Setup.exe 傻瓜式安装 ...
- 海尔公布首套智能套装SmartCare，主打智能、简单
2014CIE智能硬件首发会于11月6-8日在上海国际展览中心举行.吸引了海尔.英特尔.百度等知名企业的积极參与. 作为国内智能家居领域的先驱者,海尔在本次大会上首发了轻量智能套装SmartC ...
- Raspberry PI 系列 —— 裸机点亮LED灯
Raspberry PI 系列 -- 裸机点亮LED灯 背景 近期刚买了Raspberry PI B+,配置执行了官方提供的Raspbian系统,折腾了一周Linux系统,感觉没啥意思,于是就试着想了 ...
- 数据仓库工具：Hive
转载请标明出处: http://blog.csdn.net/zwto1/article/details/46430823: 本文出自:[明月的博客] 为什么要选择Hive 基于Hadoop的大数据的计 ...
- caffe环境配置
参考:http://blog.csdn.net/enjoyyl/article/details/47397505 http://blog.csdn.net/baobei0112/article/det ...
- nyoj--814--又见拦截导弹(动态规划+贪心)
又见拦截导弹 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 大家对拦截导弹那个题目应该比较熟悉了,我再叙述一下题意:某国为了防御敌国的导弹袭击,新研制出来一种导弹拦截系 ...
- Web前端错题模糊题记录
title: Web前端错题模糊题记录 toc: true date: 2018-09-20 10:04:36 categories: Web tags: HTML CSS JavaScript HT ...
- 如何实现内核旁路（Kernel bypass）？
转到 :http://blog.jobbole.com/94976/ 在前两篇文章中,我们讨论了<如何生成每秒百万级别的HTTP 请求?> 以及 如何减少往返时间 .我们在 Linux 上 ...
- Gradle学习总结
Gradle学习系列 (1). Gradle快速入门 (2). 创建Task的多种方法 (3). 读懂Gradle语法 (4). 增量式构建 (5). 自定义Property (6). 使用java ...
- ajax的异步请求小结
如何判断是使用json还是jsp的数据传输: json字符串可以使用js,jquery,ajax,java这几种技术,页面为jsp页面,json数据为java后台传递来. 1.同步请求可以从因特网请求 ...