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,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决. 一.采用字符串形式:——(缺陷)参数不能被周期性改 ...
随机推荐
- JavaScript-Confirm用法
function checkMobileBind() { if(confirm('您尚未绑定手机,是否前往绑定?')) { window.location='http://m ...
- Django 之 admin组件使用&源码解析
admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.可以在项目的 settings.py 中的 INSTALLED ...
- 第一个Spring Boot程序启动报错了
创建完成第一个Spring Boot项目后,准备运行,尝一下胜利的果实. 启动日志如下 . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ...
- maven编译问题-maven项目运行时找不到文件，解决方案之一
问题描述:以上信息是tomcat在启动项目的时候报的错误信息,发现没有找到配置文件,实际上配置文件在项目中是存在的,但是,在编译过程中,配置文件没有能加载到编译后的项目中.就造成了,找不到这些怕配置文 ...
- cocos2d-x 源代码分析 ： control 源代码分析 （ 控制类组件 controlButton）
源代码版本号来自3.1rc 转载请注明 cocos2d-x源代码分析总文件夹 http://blog.csdn.net/u011225840/article/details/31743129 1.继承 ...
- [原创]java WEB学习笔记31：会话与状态管理 session机制 概述(定义，session机制，session的声明周期，保存session的方式，Session的创建与删除)
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- python中reduce()函数
reduce()函数也是Python内置的一个高阶函数.reduce()函数接收的参数和 map()类似,一个函数 f,一个list,但行为和 map()不同,reduce()传入的函数 f 必须接收 ...
- 【Flask模板】include标签
# include标签:1. 这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置.2. `include`标签,如果想要使用父模版中的变量,直接用就可以了,不需要使用`with context ...
- 让IE6支持max_height、max_width等等
推荐使用min-height:500px;_height:500px;来解决IE6不能max和min属性的问题.
- 7zip压缩程序的使用
1.压缩: zip格式: 7zip.exe a -tzip C:\压缩解压测试\TEST.zip C:\压缩解压测试\TEST\* 7z格式: 7zip.exe a -t7z C:\压缩解压测试\TE ...