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 ...
随机推荐
- hive用mysql作元数据代替默认derby的hive-site.xml配置
<property> <name>javax.jdo.option.ConnectionURL</name> <value>jdbc:mysql://s ...
- webpack基础知识点
webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler). 入口(Entry) webpack 将创建所有应用程序的依赖关系图表(dependency ...
- JS中的Set 与去重
-----------------------Set 与去重----------------------- ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值.Se ...
- Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
- nodeJS npm grunt grunt-cli
1.安装好nodeJS后 ,一般都会把npm也安装好的.nodeJs集成npm的,可通过在cmd 分别运行 node -v和 npm -v来查看他们的版本,假设显示可说明可继续以下的操作 2.想安装g ...
- TSNE——目前最好的降维方法
转自:http://blog.csdn.net/u012162613/article/details/45920827 1.流形学习的概念 流形学习方法(Manifold Learning),简称流形 ...
- angular4（1）angular脚手架
angular2之后有了类似于vue-cli的脚手架工具,很方便的帮助我们搭建项目: 1.安装angular命令行工具:npm install @angular/cli -g 2.检测angular- ...
- autocomplete="off" 不起作用解决方案
autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为"o ...
- Hadoop编译源码
Hadoop编译源码 克隆一个虚拟机 然后一步一步安装就行 安装所需:链接: https://pan.baidu.com/s/1jIZlQmi 密码: gggv 5.1 前期准备工作 1)CentOS ...
- HTML&CSS——网站注册页面
1.表单标签 所有需要提交到服务器端的表单项必须使用<form></form>括起来! form 标签属性: action,整个表单提交的位置(可以是一个页面,也可以是一个后 ...