<!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. Cygwin（类UNIX模拟环境）&CURL（强大的http命令行工具）

    前言: 需要我用curl试下能否发送post请求调起公司的仿真系统(目前) 跟着大佬的脚步,亲测一把~ 感谢大佬的提供的博客和指导 @咩神 个人博客园及来源地址 Cygwin(类UNIX模拟环境) 一 ...

  2. jsonp实现原理

    jquery 封装在 ajax方法 里面的jsonp jsonp跨域的原理       1:使用script 标签发送请求,这个标签支持跨域访问       2:在script 标签里面给服务器端传递 ...

  3. Linux下MySql数据库常用操作

    1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...

  4. Javascript 实现锚点(Anchor)间平滑跳转

    (function($){ $.fn.scroller = function(options){ var defaultVal = { duration: }; var obj = $.extend( ...

  5. SQL SERVER-数据库的远程访问解决办法

    除了下面的这个RemoteDacEnabled更改为true之后,还要把防火墙关闭,才能通过IP地址访问数据库 来自为知笔记(Wiz)

  6. 文件类似性推断 -- SimHash

    近期调研了一下simhash算法,它主要用在谷歌网页去重中.网上有非常多原理性的介绍. 既然能够用来推断文件的相似性,就想知道效果怎么样.simhash的准确度是否依赖于分词算法?是否和simhash ...

  7. CSS3可伸缩框属性，可用于等分显示子元素或按比例显示子元素的大小

    使用方法跟Android的android:layout_weight属性类似.可类比Android中的使用方法.这样比較好记,因为眼下全部浏览器都不支持大部分的属性,所以全部的属性都须要加上Firef ...

  8. JavaWeb错误处理集锦

    一:起因 (1)自己接下来想走算法的路子,打算把十大算法和数学模型学习一下,算是给自己之前 JavaWeb 的一个总结: (2)记得Java算是第一个比較上手的语言了,更是用JavaWeb走过了非常长 ...

  9. Elasticsearch之四种查询类型和搜索原理（博主推荐）

    Elasticsearch Client发送搜索请求,某个索引库,一般默认是5个分片(shard). 它返回的时候,由各个分片汇总结果回来. 官网API https://www.elastic.co/ ...

  10. 你不知道的JavaScript（二）数组

    作为一种线性数据结构,几乎每一种编程语言都支持数组类型.和c++.java这些强类型的语言相比,JavaScript数组有些不同,它可以存放任意类型的值.上节中有提到过JS中任意类型的值都可以赋值给任 ...