js中的setInterval
跟几个例子吧
计时器的例子：
/**
* Created by Administrator on 2016/8/5.
*/
(function () {
function show() {
var time = new Date();
document.body.innerHTML="当前时间为"+format(time.getHours())
+":"+format(time.getMinutes())+":"+format(time.getSeconds());
}
function format(num) {
if(num>=10){
return num;
}else {
return "0"+num;
}
}
setInterval(function () {
show();
},1000);
show();
})();
进度条的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con{
width: 100%;
height: 20px;
background-color: cadetblue;
}
.bar{
height: 20px;
background-color: coral;
position: absolute;
}
.hu{
width: 100%;
text-align: center;
line-height: 20px;
position: absolute;
}
</style>
</head>
<body>
<div class="con">
<div class="bar"></div>
<div class="hu">0%</div>
</div>
<script src="main01.js"></script>
</body>
</html>
html
/**
* Created by Administrator on 2016/8/5.
*/
(function () {
var width=1;
var div=document.querySelector(".bar");
var divhu=document.querySelector(".hu");
function syBar() {
var va=width+"%";
divhu.innerHTML=va;
div.style.width=va;
}
var time=setInterval(function () {
width++;
syBar();
if(width>=100){
clearInterval(time);
}
},100);
syBar();
})();
javascript
关于进度条说一点，注意加上单位（%或px），如
var va=width+"%";
divhu.innerHTML=va;
div.style.width=va;
这三行。
js中的setInterval的更多相关文章
- js中setTimeout/setInterval定时器用法示例
js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...
- js中设置setInterval的注意点
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- JS中的setInterval 函数体带参数f方法
1.setInterval(function code,delaytime); 在设置自动调用执行function code时,我们可以采用下面三种方式来解决. 一.采用字符串形式:(参数不能被周期性 ...
- JS里设定延时:js中SetInterval与setTimeout用法
js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...
- JS中setInterval、setTimeout不能传递带参数的函数的解决方案
在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,接下来为大家介绍具体的解决方法 在JS中无论是setTimeout还是s ...
- js中的setTimeout和setInterval
在html页面中要使用自动刷新功能时,可以是使用js中setTimeout和setInterval: 一.使用方法 setTimeout的使用setTimeout('要调用的Js方法', 调用的延迟时 ...
- 【转】JS中setTimeout和setInterval的最大延时值详解
前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...
- Node.js中setTimeout和setInterval的使用
Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInter ...
- JS中setInterval、setTimeout不能传递带参数的函数的解决办法
在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决. 一.采用字符串形式:——(缺陷)参数不能被周期性改 ...
随机推荐
- springboot + swagger2 学习笔记
引入步骤 1.添加依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>springf ...
- windows下安装PyQt4
第一步:确认自己电脑上的Python版本.然后下载对应的.whl文件下载 第二步:https://www.lfd.uci.edu/~gohlke/pythonlibs/#pyqt4上下载对应版本版本的 ...
- android启动页延时跳转
package com.goodness.goodness; import android.content.Context; import android.content.Intent; import ...
- JNDI知道这么多就够了！
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sunshoupo211/article/details/37924017 JNDI 全称:Java ...
- LATEX ——WinEdt 破解
WinEdt 是目前我发现最好的LaTeX编辑器,但是在国内支付不便,且学生许可需$40,只能出此下策,望有余力者尽量购买正版. WinEdt 的旧版本的破解方法众所周知,只需定时删除HKCU\Sof ...
- springcloud zuul 使用zuulfilter 修改请求路径和响应头
最近做项目有一个需求:一个网盘系统,文件存放在分布式文件系统中,之前的文件下载统一走的文件下载服务,现在需要在单文件下载的时候不需要走文件下载服务,而是直接访问文件系统上的路径,响应的时候修改响应头, ...
- linux shell 字符串操作详解（获取长度、查找，替换）
在做shell批处理程序时候,常常会涉及到字符串相关操作.有许多命令语句,如:awk,sed都能够做字符串各种操作. 事实上shell内置一系列操作符号,能够达到相似效果,大家知道,使用内部操作符会省 ...
- [转]Homebrew 卸载时出现：Failed to locate Homebrew! 错误
今天在 MacBook 上安装 Homebrew,结果中间断了网,想重新卸载重装,结果一直卸载失败.问题现象如下: 问题现象 卸载时错误如下: ruby -e "$(curl -fsSL h ...
- UI组件之Label
Use Core Data 接口,链接数据库 Portrait 肖像模式 LandScape(Left, Right) 风景模式 1.程序启动后,从main接口进入, main函数会调用UIAppli ...
- iOS：学习runtime的理解和心得 （转）
Runtime是想要做好iOS开发,或者说是真正的深刻的掌握OC这门语言所必需理解的东西.最近在学习Runtime,有自己的一些心得,整理如下, 一为 查阅方便 二为 或许能给他人一些启发, 三为 希 ...