<!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. 【codeforces 810C】Do you want a date?

    [题目链接]:http://codeforces.com/contest/810/problem/C [题意] 给你一个集合,它包含a[1],a[2]..a[n]这n个整数 让你求出这个集合的所有子集 ...

  2. 监控aps.net计数器

  3. Mysql如何避免全表扫描的方法

    在以下几种条件下,MySQL就会做全表扫描: 1>数据表是在太小了,做一次全表扫描比做索引键的查找来得快多了.当表的记录总数小于10且记录长度比较短时通常这么做. 2>没有合适用于 ON ...

  4. 洛谷 P3133 [USACO16JAN]无线电联系Radio Contact

    P3133 [USACO16JAN]无线电联系Radio Contact 题目描述 Farmer John has lost his favorite cow bell, and Bessie the ...

  5. Hibernate中session回话的get方法和load方法的区别

    1.报错方式不同: 前提:获取的数据不存在 get方法会报异常:空指针异常 load方法会报异常:对象为找到异常,给定值没有行存在. 2.load方法 这种方式总是会返回一个代理而不是真正得去查询数据 ...

  6. Unity学习笔记 之 发射小球碰撞物体的代码记录

    绑定在摄像机上的脚本 using UnityEngine; using System.Collections; public class abc : MonoBehaviour { //设置移动速度 ...

  7. 打印全排列和stl::next_permutation

    打印全排列是个有点挑战的编程问题.STL提供了stl::next_permutation完美的攻克了这个问题. 可是,假设不看stl::next_permutation,尝试自己解决,怎么做? 非常自 ...

  8. Android开发之使用Web Service进行网络编程

    使用Web Service进行网络编程 Android应用通常都是执行在手机平台上.手机系统的硬件资源是有限的,无论是存储能力还是计算能力都有限.在Android系统上开发.执行一些单用户.小型应用是 ...

  9. 前端防止button被多次点击

    前端的部分逻辑有时候控制前端的显示.比方记录收藏数目等等.有时候多次反复点击会造成前端显示的bug.所以须要有部分逻辑推断去筛除掉反复多次的点击. 实现部分代码例如以下,主要是通过setTimeout ...

  10. Educational Codeforces Round 6 B. Grandfather Dovlet’s calculator 暴力

    B. Grandfather Dovlet’s calculator   Once Max found an electronic calculator from his grandfather Do ...