<!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. HDU 4323 Contest 3

    编辑距离,经典的了.动态规划枚举即过. #include <iostream> #include <cstdio> #include <string.h> #inc ...

  2. sql两个字段相加减，第三个字段没有值的原因.

    错误的写法:(in_story_num-out_story_num) as story_num 正确的写法:(nvl(in_story_num,0)-nvl(out_story_num,0)) as ...

  3. [SICP] 求值规则

    在Java语言学习中,通常不太关注求值规则. (2+4*6)*(3+5+7)这样的组合式的求值规则.通常归结为优先级问题: if.for等的求值规则通常归结为语义. 函数式编程语言的Scheme,将这 ...

  4. iOS （封装）一句话调用系统的alertView和alertController

    前言: 本文仅作参考存留,请用新版封装:iOS 更加优雅便捷的UIAlertView/UIAlertController封装使用 UIAlertController是iOS8.0之后出来的新方法,其将 ...

  5. 不仅仅是Google，您必须知道的全球十大地图API

    不仅仅是Google,您必须知道的全球十大地图API 一.总结 一句话总结:除了google,也有其它很多很好的地图,必应地图(Bing Maps),OpenLayers 二.不仅仅是Google,您 ...

  6. Linux xhost命令详解

    xhost 命令用途 控制什么人可以访问当前主机上的增强 X-Windows. 语法 xhost [ + | - ] [ Name ] "+"表示增加,"-"表 ...

  7. Linux就该这么学 20181004(第六章磁盘管理)

    参考链接https://www.linuxprobe.com/ /boot 开机锁需要文件-内核.开机菜单以及所需配置文件 /dev 以文件形式存放的任何设备与接口 /etc 配置文件 /home 用 ...

  8. Go语言结构体转json的坑

    Go语言结构体转json的坑 标签(空格分隔): go json.Marshal() JSON输出的时候必须注意,只有导出的字段(首字母是大写)才会被输出,如果修改字段名,那么就会发现什么都不会输出, ...

  9. DataView和DefaultView的理解

    DefaultView 的作用(对DataSet查询出的来数据进行排序)(这个老哥的太长了) DefaultView:默认视图.datatable.DefaultView获取整个表的视图(就像sql查 ...

  10. Caffe学习--Layer分析

    Caffe_Layer 1.基本数据结构 //Layer层主要的的参数 LayerParamter layer_param_; // protobuf内的layer参数 vector<share ...