<!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 模拟滑块的更多相关文章

  1. input range样式更改,模拟滑块

    input range 样式更改,js模拟滑块实时更新数据. 效果图: html 代码: <div> <span class="slider"></s ...

  2. 我的Android进阶之旅------>Android中通过adb shell input来模拟滑动、按键、点击事件

    今天在维护公司的一个小项目的时候,发现按公司手机的某个物理按键,激活相应的Service后,会在屏幕上模拟的点击了屏幕的某个坐标点.好家伙,原来是之前该项目的版本是按这个物理按键后,会弹出一个对话框, ...

  3. 使用input range滑块，控制元素transform rotate旋转样式

    <!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...

  4. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  5. input range样式优化

    首先HTML代码: <input id="snrPollInterval" type="range" min="1" max=&quo ...

  6. input range音乐进度条

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. android后台input命令模拟按键【转】

    本文转载自:http://www.cnblogs.com/sh1o2os/archive/2013/02/05/2893201.html 有时做开发时,我们使用的触摸屏没有虚拟按键(HOME.BACK ...

  8. HTML5：使用Canvas和Input range控件放大缩小图片,剪裁，并上传图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. input file 模拟

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. n&(n-1)位运算的妙用

    一.n-1发生了什么 ①.二进制数n,n-1后,如果最后一位是0,将向前一位借2,2-1=1.最后一位为1.如果前一位为0,将继续向前一位借2,加上本身少掉的1.则变为1.一直遇到1.减为0. 所以 ...

  2. Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型

    转自原文 Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型 播放mp4格式的时候提示 Html 播放 mp4格式视频提示 没有发现支持的视频格式和mime类型 原因是在IIS中 ...

  3. mybatis批量插入oracle大量数据记录性能问题解决

    环境: mybatis  + oracle11g r2 1.使用"直接路径插入"(以下sql语句中的"/*+append_values */"),而且使用key ...

  4. HDU1061_Rightmost Digit【高速幂取余】

    Rightmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. GIS+=地理信息+容器技术（2）——Dockers技术介绍

    -------------------------------------------------------------------------------------- Blog:    http ...

  6. spring web mvc第一天

    spring  web mvc 感觉就是高大上啊!啥都是配置文件就能够了.所以第一步就是弄清楚配置文件使用和总体框架的流程! Spring web mvc最重要的当然是Controller,也就是首先 ...

  7. node18---Mongoose

    二.索引index 数据库中,根据一个字段的值,来寻找一个文档,是很常见的操作.比如根据学号来找一个学生. 这个学号,是唯一的,只要有学号,就能唯一确认一个学生的文档.学号这个属性,就非常适合建立索引 ...

  8. nyoj--514--1的个数（贪心）

     1的个数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 给你两个数a和b,你的任务是计算出1在a和b之间出现的次数,比如说,如果a=1024,b=1032,那么a ...

  9. Java8 方法引用与构造器引用，数组引用

    package java_8; import org.junit.Test; import java.io.PrintStream; import java.util.Comparator; impo ...

  10. BZOJ 1898 构造矩阵+矩阵快速幂

    思路: T的最小公倍数是12 那么12以内暴力 整除12 的部分用矩阵快速幂 //By SiriusRen #include <cstdio> #include <cstring&g ...