<!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. vue生命周期的基础部分

    Vue实例从创建到销毁的过程,就是生命周期. Vue的生命周期包括:开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 在Vue的整个生命周期中,提供了一系列的事件,可以 ...

  2. nodejs安装与概述

    第一部分:安装与测试 1 官方下载地址 https://nodejs.org/en/ 2 测试是否安装成功? window下打开CMD窗口   输入:node -v  => 显示安装的nodej ...

  3. lua创建文件

    详细描述:http://www.runoob.com/lua/lua-file-io.html Lua文件I/O 1. 简单模式 -- 以只读方式打开文件-- file = io.open (file ...

  4. javascript-js中技巧集合

    1.值的转换 在JavaScript中,一共有两种类型的值:原始值(primitives)和对象值(objects).原始值有:undefined, null, 布尔值(booleans), 数字(n ...

  5. 洛谷——T P2136 拉近距离

    https://www.luogu.org/problem/show?pid=2136 题目背景 我是源点,你是终点.我们之间有负权环. ——小明 题目描述 在小明和小红的生活中,有N个关键的节点.有 ...

  6. HDU 4309 Contest 1

    最大流建图.开始以为旧桥有1000座,没敢用枚举,后来看看题目发现了只是十二座.枚举桥的状态没问题. 对于隧道的容量W,可以虚拟出第三个结点表示,如u->v.增加一个点p,u->p(INF ...

  7. MarkDown、Vim双剑合璧

    作为一名软件攻城狮(是的,我从来都以攻城狮自居! 我坚信如今的每一天,都在朝攻城狮迈进.虽然被菜鸟的肉身皮囊裹着,我依然还是怀着攻城狮的内心! 我非常讨厌别人喊我程序猿.虽然这是不争的事实!).... ...

  8. BZOJ 2588 主席树

    思路: 主席树 做完BZOJ 3123 觉得这是道水啊-- 然后狂RE 狂MLE 要来数据 忘把deep[1]设成1了----------. 啊wocccccccccccccccc //By Siri ...

  9. MapReduce 程序：WordCount

  10. ES6 | class类的基本语法总结

    类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式.只要你的代码写在类或模块之中,就只有严格模式可用. 考虑到未来所有的代码,其实都是运行在模块之中,所以 ES6 实际上 ...