js笔记（9）之定时器数字时钟延时提示框
2024-04-22 18:18:14
定时器
function show(){alert('a');
}
setInterval(show,1000); 函数，毫秒（间隔型、无限次执行）
setTimeout(show,1000); (延时型、只执行一次)clearInterval
clearTimeout------------------------------------------------------------
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>定时器的开启和关闭</title>
<script type="text/javascript">window.onload = function(){var oBtn1 = document.getElementById('btn1');var oBtn2 = document.getElementById('btn2');var timer = null;oBtn1.onclick = function(){timer = setInterval(function(){alert('a');},1000);}oBtn2.onclick = function(){clearInterval(timer);}}
</script>
</head>
<body>
<input id="btn1" type="button" value="开启" />
<input id="btn2" type="button" value="关闭" />
</body>
</html>
----------------------------------------------------------------------
获取当前时间var oDate = new Date();
alert(getHours());
getMinutes();
getSeconds();<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>数码时钟</title>
<style type="text/css"></style>
<script type="text/javascript">function toDou(n){if(n < 10)return '0' + n;else return '' + n;}window.onload = function(){var aImg = document.getElementsByTagName('img');function tick(){var oDate = new Date();var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) +toDou(oDate.getSeconds());for(var i = 0;i < aImg.length;i++){aImg[i].src = 'img/'+str.charAt(i)+'.jpg';}}setInterval(tick,1000);tick();}
</script>
</head>
<body style="background: #262626; color: white; font-size: 50px" >
<img src="img/0.jpg">
<img src="img/0.jpg">
:
<img src="img/0.jpg">
<img src="img/0.jpg">
:
<img src="img/0.jpg">
<img src="img/0.jpg">
</body>
</html>
-------------------------------------------------------------------------------获取年月日var oDate = new Date();
oDate.getFullYear();//年
oDate.getMonth()+1;//月
oDate.getDate();//哪一天
oDate.getDay();//当前星期几
---------------------------------------------------------------------------------
延时提示框<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>延时提示框</title>
<style type="text/css">div{float: left;margin: 10px;}#div1{width: 50px;height: 50px;background: red;}#div2{width: 250px;height: 180px;background: #CCC;display: none;}
</style>
<script type="text/javascript">window.onload = function(){var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var timer = null;oDiv1.onmouseover = function(){clearTimeout(timer);oDiv2.style.display = 'block';}oDiv1.onmouseout = function(){timer = setTimeout(function(){oDiv2.style.display = 'none';},500);}oDiv2.onmouseover = function(){clearTimeout(timer);}oDiv2.onmouseout = function(){timer = setTimeout(function(){oDiv2.style.display = 'none';},500);}}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
---------------------------------------------------
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>延时提示框之函数合并</title>
<style type="text/css">div{float: left;margin: 10px;}#div1{width: 50px;height: 50px;background: red;}#div2{width: 250px;height: 180px;background: #CCC;display: none;}
</style>
<script type="text/javascript">window.onload = function(){var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var timer = null;oDiv2.onmouseover = oDiv1.onmouseover = function(){clearTimeout(timer);oDiv2.style.display = 'block';}oDiv2.onmouseout = oDiv1.onmouseout = function(){timer = setTimeout(function(){oDiv2.style.display = 'none';},500);}}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>js笔记（9）之定时器数字时钟延时提示框相关推荐
- js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 代码如下: javascript实现的倒计时时钟 body,div{margin:0;padding:0;} ...
- html记住密码勾选框,JS+CSS实现的一个记住密码的提示框
JS+CSS实现的一个记住密码的提示框_网页代码站(www.webdm.cn) body,input,p{margin:0;padding:0;} body{font:12px/1.5 Tahoma; ...
- HTML+CSS+JS实现 ❤️ 科技感的数字时钟特效❤️
代码目录: 主要代码实现: css样式 : @charset "utf-8"; @import url("https://fonts.googleapis.com/css ...
- QQ头像的延时提示框
我们经常登QQ,也都经历过这种情况,鼠标放在对方的头像上就可以显示出其基本信息,利用延时器可以极好的避免了鼠标移出头像时,名片就立马消失的效果.看似很简单的操作用JavaScript写还是有点小逻辑在 ...
- js如何关闭当前页，而不弹出提示框
//关闭当前页面,并且打开新页面,(不提示) function closeWinAndOpen(url) { //利用随机数处理WinName var sWinName = "LR" ...
- JS入门到入土之数字运算符扩展
系列文章目录 JS入门到入土之数字运算符扩展 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 系列文章目录 JS入门到入土之数字运算符扩展 前言 概述 加法运算符 基本规则 对 ...
- php 删除 确认,js确认删除方法 js删除确认提示框
摘要 腾兴网为您分享:js确认删除方法 js删除确认提示框,篆刻字典,智慧农业,星球联盟,小番茄等软件知识,以及金山网盾3.6,手机tgp,省钱王,qq隐身,战锤全面战争,qq群签到,格力空调新派工系 ...
- 滴答定时器的计数模式_【高手私藏】STM32学习笔记：SysTick滴答时钟
今天我们来说说SysTick定时器.SysTick定时器在从参考手册中根本没有介绍.我费了九牛二虎之力才在一个犄角格拉里找到SysTick定时器的英文版的说明.在Cotex-M3有介绍,为什么要找ST ...
- 单片机定时器实现的数字时钟
利用51单片机的定时器,设计一个数字时钟,具有时间.年月日和星期显示功能,并且可以通过按键设置调整年时间年月日和星期的功能. 1.系统功能模块图 系统主要有LED灯显示模块.电源模块.单片机最小系统. ...
最新文章
- 谣言止于智者：基于深度强化学习的谣言早期检测模型
- 触摸板库tslib的编译和配置
- 软件工程---在此基础上，进行软件的改进
- java 标准输入流 关闭 打开_java输出流关流疑问，以下这个程序的in和out是否要关闭？...
- android 活动之间传递参数,Android：使用适配器在活动之间传递参数
- Django-开胃菜
- 利用apache的ab命令做服务器压力测试
- 河南网通帐号在线转换工具
- ajax谷歌浏览器没缓存,从缓存AJAX请求会导致Chrome(Prevent Chrome from caching AJA
- 小米6通话音量补丁_手机通话声音小？只需打开这个开关，音量既大又清晰
- Basler相机参数设置
- 大数据系列之Java调用elasticsearch的增删查改聚合
- 地图制图基础（四）：制图意识
- 我的java语法基础篇刷题2
- 2014十大的安全工具（ToolsWatch.org投票选出）
- 用HBuilder插入图片、动态图、音乐、视频、上传文件
- 前端开发攻略，微信公众号前端开发教程
- CQ CSP-S2021游记
- android7.0模拟器pc版,安卓9.0模拟器电脑版
- 细说社交化经销商服务的十大典型应用场景