html5 效果 按下鼠标数值自动增长
2024-09-01 18:19:41
<!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>
效果图:
最新文章
- Android-横竖屏切换问题(转)
- centos6.5下使用yum完美搭建LNMP环境(php5.6) 无脑安装
- Fancybox丰富的弹出层效果
- Install marvel and head plugin for ealsticsearch
- OpenGL大作业
- secureCRT中文字符乱码
- SimpleDateFormat 的性能和线程安全性
- php(LAMP)开发环境配置相关问题及解决办法
- PHP中将ip地址转成十进制数的两种实用方法
- 写入soap消息以及与soap消息通信
- 【java线程系列】java线程系列之java线程池详解
- [转]玩转Angular2(4)--制作左侧自动定位菜单
- HTTP 06 用户认证
- Django进阶Model篇—数据库操作(ORM)
- 同一页面的两个Iframe获取数据
- JavaScript原生实现《贪吃蛇》
- HDUOJ-----1166敌兵布阵
- json格式对象大括号中不能把键改为变量问题
- linux环境下搭建osm_web服务器四(对万国语的地名进行翻译和检索):
- BZOJ4259:残缺的字符串——题解