<!doctype html>

<html>

<head>

<style>

* {

    margin:0;

    padding:0;

}

div {

    margin:10px auto;

    width:300px;

    text-align:center;

}

meter {

    border:1px solid red;

    width:300px;

}

</style>

</head>

<body>

<div>

  <meter id="song" min="0" max="100" high="70" value="10"></meter>

  <button id="add">增加</button>

  <button id="minus">减少</button>

  <div id="num">10</div>

</div>

<script>

function $(id)

{

    return document.getElementById(id);

}

$('add').onclick = function(){

    var val = $('song').value;

    val ++;

    $('song').value = val;

    $('num').innerHTML = val;

}

var timer = null;

var start_timer = null;

$('add').onmousedown = function(){

    //延迟两秒

    start_timer = setTimeout(function(){

        timer = setInterval(function(){

            var val = $('song').value;

            val += 1;

            $('song').value = val;

            $('num').innerHTML = val;

        },150)

    },500)

}

$('add').onmouseup = function(){

    //清除启动器

    clearTimeout(start_timer);

    //清除间隔启动器

    clearInterval(timer);

}

</script>

</body>

</html>

效果图：

　　

html5 效果 按下鼠标数值自动增长的更多相关文章

  1. 《SQL Server企业级平台管理实践》读书笔记——SQL Server如何设置自动增长和自动收缩项

    SQL Server允许用户设置数据库初始值和最大值,可以通过自动增长或者自动收缩进行配置.通过这些配置,我们可以防止数据库空间问题而导致的应用程序修改失败或者SQL Server磁盘空间耗尽的事情发 ...

  2. SQL Server 自动增长过大

    一.背景 我们遇到的问题如下图所示:自动增长无端端就按照这样的比例进行增长: (Figure1:问题所在) 尝试使用SSMS修改自动增长值,就会出现下面的错误: (Figure2:错误信息) 遇到上面 ...

  3. SQL Server 2012 自动增长列，值跳跃问题

    介绍 从 SQL Server 2012 版本开始, 当SQL Server 实例重启之后,表格的自动增长列的值会发生跳跃,而具体的跳跃值的大小是根据增长列的数据类型而定的.如果数据类型是 整型(in ...

  4. 10个优秀的 HTML5 &amp; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

  5. Sql Server 主键由字母数字组成并按照数字自动增长

    在SQL SERVER 中如果我们想要使主键按照一定规则自动增长我们可以这样做: 这里我们新建一张研究表,里面有研究ID,研究人员姓名和研究医院. 我们使SicentificId 设为主键 并且从1开 ...

  6. SQL Server 2012 自动增长列，值跳跃问题(自增增加1000)

    介绍 从 SQL Server 2012 版本开始, 当SQL Server 实例重启之后,表格的自动增长列的值会发生跳跃,而具体的跳跃值的大小是根据增长列的数据类型而定的.如果数据类型是 整型(in ...

  7. 史上最简单的 MySQL 教程（十五）「列属性 之 自动增长」

    自动增长 自动增长:auto_increment,当对应的字段,不给值,或者是默认值,或者是null的时候,就会自动的被系统触发,系统会从当前字段中取已有的最大值再进行+1操作,得到新的字段值. 自增 ...

  8. 精选9个值得学习的 HTML5 效果【附源码】

    这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...

  9. 使用sql语句创建修改SQL Server标识列(即自动增长列)

    一.标识列的定义以及特点SQL Server中的标识列又称标识符列,习惯上又叫自增列.该种列具有以下三种特点:1.列的数据类型为不带小数的数值类型2.在进行插入(Insert)操作时,该列的值是由系统 ...

随机推荐

  1. delphi win64 DEBUG不能进预设断点的问题

    delphi win64 DEBUG不能进预设断点的问题  delphi win64,debug模式下运行,如果含有中文路径,不能进断点,音频跟踪.而同样的代码,DELPHI WIN32却没有这个问题 ...

  2. Available Date 相关

    Available Date 写错了怎么办?    http://www.cocoachina.com/bbs/read.php?tid=7224&page=1现在好像不需要改那个availa ...

  3. 将asi-http-request引入到ARC工程需要做的 转

    在发表前,容许我发两句牢骚,太折腾了.但结合网路上各种大侠的答案相助,最终我终于可以在ARC项目使用该库了. 1.需要下载asi-http-request这个包.https://github.com/ ...

  4. C#编程（四）

    原文地址:http://blog.csdn.net/shanyongxu/article/details/46400067 C#预定义数据类型 C#中的可用类型以及及其定义非常严格,C#中获得数据类型 ...

  5. KJHttp框架使用讲解

    摘要 本文原创,转载请注明地址:http://kymjs.com/code/2015/05/12/01写给那些在用.想用.还没有用过KJFrame的朋友. KJFrameForAndroid总共分为四 ...

  6. 算法：优先级队列（PriorityQueue）

    背景 此文给出基于已排序数组的实现,多数情况应该基于 Heap 进行实现,因为数组的插入效率为O(n),而 Heap 的插入效率为 Log(n). PriorityQueue 代码 using Sys ...

  7. Selenium2+python自动化51-unittest简介

    前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG,这个招聘的需求上也是经常见到的.python里面也有单元测试框架-unittest,相当于是一个python版的junit. ...

  8. Facebook数据库工具Flashcache初探

    Flashcache是Facebook技术团队的又一力作,最初是为加速MySQL设计的.Flashcache是在Linux层面的,所以任何受磁盘IO困绕的软件或应用都可以方便的使用之. 1. Why ...

  9. go语言 defer 高级

    go语言defer语句的用法 defer的语法 defer后面必须是函数调用语句,不能是其他语句,否则编译器会出错. package main import "log" func ...

  10. ubuntu12.04-server版 倒腾

    前面的话: 第一份工作,在阿里巴巴干了一年零四个月不到几天,来到百度上海.从运维岗转到开发岗.从前端业务线转到后段数据线,基本上算从头开始,给自己鼓个劲. 进到正题,公司发了笔记本,自己原来那个破笔记 ...