JS定时器相关用法
一、定时器在javascript中的作用
1、制作动画
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>用定时器制作动画</title>
- <style>
- .box{
- width:100px;
- height:100px;
- background: #ffb8f9;
- position: fixed;
- left:20px;
- top:20px;
- }
- </style>
- <script>
- window.onload = function(){
- var left=20;
- var oBox = document.getElementById('box');
- var timer = setInterval(function(){
- if(left>700){
- clearInterval(timer);
- }
- left++;
- oBox.style.left = left+'px';
- },30);
- }
- </script>
- </head>
- <body>
- <div class="box" id="box"></div>
- </body>
- </html>
2、异步操作
3、函数缓冲与节流
二、定时器的类型与语法
1、setTimeout只执行一次的定时器,指定的毫秒数后执行指定的代码
语法:setTimeout(函数名code,延迟时间time);
参数说明:code:指定毫秒数后要执行的函数或js代码
time:指定毫秒数
实例:3秒后页面跳转到百度首页
setTimeout(function(){
location.href = "https://www.baidu.com";
},3000);
实例:弹框,效果图如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>定时器弹框</title>
- <link rel="stylesheet" href="../css/reset.css">
- <style>
- .pop_con{
- position: fixed;
- top:0;
- left:0;
- bottom:0;
- right:0;
- background: rgba(0,0,0,0.3);
- z-index: 999;
- display: none;
- }
- .pop{
- width:380px;
- height:180px;
- border:1px solid #ccc;
- position:fixed;
- left:50%;
- top:50%;
- margin-top:-150px;
- margin-left:-250px;
- padding:10px;
- border-radius: 15px;
- box-shadow: 1px 1px 20px 1px #333;
- background:#fff;
- z-index: 9999;
- overflow: auto;
- animation: popTip 0.3s;
- }
- .pop_title{
- display: flex;
- justify-content: space-between;
- }
- .pop_title a{
- width:30px;
- height:30px;
- background:#E26359;
- border-radius: 15px;
- color:#fff;
- text-align: center;
- line-height: 30px;
- transition: all 1s ease;
- }
- .pop_title a:hover{
- transform:rotate(360deg);
- cursor: pointer;
- }
- .pop_message{
- height:100px;
- text-align: center;
- line-height: 100px;
- }
- .pop_confirm{
- text-align: center;
- }
- .pop_confirm button{
- width:100px;
- border:0;
- background: #E26359;
- color:#fff;
- padding:10px 0;
- border-radius: 15px;
- cursor: pointer;
- outline: none;
- }
- @keyframes popTip {
- 0%{
- width:100px;
- height:20px;
- }
- 100%{
- width:380px;
- height:180px;
- }
- }
- </style>
- <script>
- window.onload = function(){
- var oPop = document.getElementById("pop_con");
- var oMessage = document.getElementById("message");
- var oConfirm = document.getElementById("confirm");
- var oPopout = document.getElementById("popOut");
- function myPop(){
- oPop.style.display = "block";
- oMessage.innerHTML = "请输入数字";
- oConfirm.onclick = function(){
- oPop.style.display = "none";
- };
- oPopout.onclick = function(){
- oPop.style.display = "none";
- };
- }
- setTimeout(myPop,3000);
- }
- </script>
- </head>
- <body>
- <h3>弹框信息</h3>
- <div class="pop_con" id="pop_con">
- <div class="pop" id="pop">
- <div class="pop_title">
- <p>提示信息</p>
- <a id="popOut">X</a>
- </div>
- <div class="pop_message">
- <p class="message" id="message">输入框不能为空</p>
- </div>
- <div class="pop_confirm">
- <button id="confirm">朕知道了</button>
- </div>
- </div>
- </div>
- </body>
- </html>
2、clearTimeout关闭只执行一次的定时器
要使用 clearTimeout() 方法, 在创建超时方法时必须使用全局变量:
3、setInterval反复执行的定时器(每隔指定的毫秒数不停地执行指定的代码)
语法:setInterval(code,time);
参数说明:
code为每隔指定的毫秒数要执行的函数或js代码
time是指定的毫秒数
实例:倒计时,效果图如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>定时器倒计时</title>
- <script>
- window.onload = function(){
- var oBox = document.getElementById('box');
- function timeleft(){
- var now = new Date();
- //实际开发中,now和future都要从服务器获取,否则的话用户修改系统时间会出现bug
- var future = new Date(2017,6,17,14,0,0);
- //把毫秒/1000转换为秒
- var lefts = parseInt((future-now)/1000);
- var days = parseInt(lefts/86400);
- var hour =parseInt((lefts%86400)/3600);
- var min = parseInt(lefts%86400%3600/60);
- var sec = lefts%60>9?lefts%60:"0"+lefts%60;
- str = '距离2017年7月17日下午2点还剩下'+days+'天'+hour+'时'+min+'分'+sec+'秒';
- if(lefts<0){
- window.location.href="http://www.baidu.com";
- }
- oBox.innerHTML = str;
- }
- timeleft();
- setInterval(timeleft,1000);
- }
- </script>
- </head>
- <body>
- <div class="box" id="box"></div>
- </body>
- </html>
倒计时代码
实例:动态时钟,效果图如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>定时器时钟</title>
- <script>
- window.onload = function(){
- var oBox = document.getElementById("box");
- function timego(){
- var today = new Date();
- var year = today.getFullYear();
- var month = today.getMonth()+1;
- var day = today.getDate();
- var week = today.getDay();
- var hour = today.getHours();
- var minutes = today.getMinutes()>9?today.getMinutes():"0"+today.getMinutes();
- var seconds = today.getSeconds()>9?today.getSeconds():"0"+today.getSeconds();
- //var HMS = today.toLocaleTimeString();返回结果为:上午11:50:08
- str = "当前时间是:"+year+"年"+month+"月"+day+"日"+" "+toweek(week)+" "+hour+":"+minutes+":"+seconds;
- oBox.innerHTML = str;
- }
- timego();
- setInterval(timego,1000);
- function toweek(n){
- switch(n){
- case 0:
- return "星期天";
- break;
- case 1:
- return "星期一";
- break;
- case 2:
- return "星期二";
- break;
- case 3:
- return "星期三";
- break;
- case 4:
- return "星期四";
- break;
- case 5:
- return "星期五";
- break;
- case 6:
- return "星期六";
- break;
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="box"></div>
- </body>
- </html>
4、clearInterval关闭反复执行的定时器,停止 setInterval() 方法执行的函数代码
要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量:
三、setInterval()和setTimeout的区别
前者会不停的循环执行,而后者只会执行一次
四、日期时间写法
JS定时器相关用法的更多相关文章
- JS定时器的用法及示例
JS定时器的用法及示例 目录 js 定时器的四个方法 示例一 示例二 示例三 js 定时器的四个方法 setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函 ...
- Js相关用法个人总结
Js相关用法个人总结 js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- JS的简单用法
JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...
- JS定时器和单线程异步特性
首先要说的是,定时器相关的方法都是属于BOM方法,而定时器呢,它是用于在设定的时间执行一段代码,或者在给定的时间间隔内重复该代码.具体函数: setTimeout(callback, delay);/ ...
- javascript中window与document对象、setInterval与setTimeout定时器的用法与区别
一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...
- JS 定时器的4种写法及介绍
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时 ...
- JS定时器不可靠的原因及解决方案
前言 在工作中应用定时器的场景非常多,但你会发现有时候定时器好像并没有按照我们的预期去执行,比如我们常遇到的setTimeout(()=>{},0)它有时候并不是按我们预期的立马就执行.想要知道 ...
- slf4j log4j logback关系详解和相关用法
slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着"拿来主义"的态度,复制粘贴下配 ...
随机推荐
- [转] Hadoop管理员的十个最佳实践
前言 接触Hadoop有两年的时间了,期间遇到很多的问题,既有经典的NameNode和JobTracker内存溢出故障,也有HDFS存储小文件问题,既有任务调度问题,也有MapReduce性能问题.遇 ...
- 【JavaScript 从零开始】表达式和运算符(1)
原始表达式 最简单的表达式是"原始表达式"(primary expression).JavaScript中的原始表达式包含常量或直接量.关键字和变量. // 常量或直接量 1.23 ...
- 防止TableView 上的tap手势隔断 cell的选择
遵循UIGestureRecognizerDelegate协议: 1.0添加手势 - (void)addTapGest { UITapGestureRecognizer *tap = [[U ...
- VisualVM监控远程阿里云主机
一.前言 使用VisualVM监控远程主机,主要是要在远程主机上部署JMX服务和jstat服务,jstat服务的部署花了我半天的时间,而且,网上的资基本都是缺胳膊少腿的,没有一篇是一个整体(行得通的) ...
- 概述Java集合框架
JAVA集合框架主要分为三个部分:接口,实现和算法.接口是指以Collection和Map为起始的一系列公用接口,其中还有Vector接口,也就是迭代器,Collection接口下面又有List 和S ...
- java实现返回一个字符串所有排列
今天偶然看到了一个笔试题,觉得挺有意思,分享一下解题思路 public void permute(String string); public void permute(char[] chars , ...
- 通过UA判断,对滚动条样式进行不同的操作
浏览器滚动条的默认样式比较丑,有些情况下,又不能直接overflow:hidden掉. 本文阐述如何通过 document.styleSheets[0].insertRule 简单的实现pc端和移动端 ...
- 使用镶嵌数据集 MosaicDataSet管理不同分辨率影像数据
镶嵌数据集 MosaicDataSet是Esri推出的一种用于管理海量影像数据的数据模型,它是Geodatabase数据模型的一个子集定义. 该数据模型强大之处在于它能统一管理不同采集时间.不同采集来 ...
- csv注入漏洞原理&&实战
前言 为了找工作,巩固巩固知识.本文会介绍 csv 注入漏洞的原理,最后给出一个示例. 正文 在 csv 文件 和 xlsx 文件中的每一项的值如果是 =, @, +, - 就会被 excel 识 ...
- Jmeter 测试 JMS (Java Message Service)/ActiveMQ 性能
前言 JMS介绍:JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...