跟几个例子吧

计时器的例子：

/**

 * 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的更多相关文章

  1. js中setTimeout/setInterval定时器用法示例

    js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...

  2. js中设置setInterval的注意点

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. JS中的setInterval 函数体带参数f方法

    1.setInterval(function code,delaytime); 在设置自动调用执行function code时,我们可以采用下面三种方式来解决. 一.采用字符串形式:(参数不能被周期性 ...

  4. JS里设定延时:js中SetInterval与setTimeout用法

     js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...

  5. JS中setInterval、setTimeout不能传递带参数的函数的解决方案

    在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,接下来为大家介绍具体的解决方法 在JS中无论是setTimeout还是s ...

  6. js中的setTimeout和setInterval

    在html页面中要使用自动刷新功能时,可以是使用js中setTimeout和setInterval: 一.使用方法 setTimeout的使用setTimeout('要调用的Js方法', 调用的延迟时 ...

  7. 【转】JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTi ...

  8. Node.js中setTimeout和setInterval的使用

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInter ...

  9. JS中setInterval、setTimeout不能传递带参数的函数的解决办法

    在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决. 一.采用字符串形式:——(缺陷)参数不能被周期性改 ...

随机推荐

  1. Android 主线程和子线程通信问题

        Android 如今不支持View在子线程中创建及调用其方法.假设要实现子线程内容更新之后.将结果及时反馈到主线程中,该怎样出来呢?     能够在主线程中创建Handler来实现. 这样子线 ...

  2. 如何在JSTL中获取数组或者list对象的索引值（index）

    <c:forEach items="${productList}" var="products" varStatus="status" ...

  3. 论文解析 "A Non-Local Cost Aggregation Method for Stereo Matching"

    传统的使用窗口的方法缺陷主要在 1.窗口外的像素不能参与匹配判断. 2.在低纹理区域很容易产生错误匹配 论文的主要贡献在代价聚类上(左右图像带匹配点/区域的匹配代价计算),目标是图像内所有点都对该点传 ...

  4. Linux mint

    最近一直在配置vim, 今天终于配的差不多了,拿出来晒晒,^_^ . 附上一段Linux Mint 的简介(来自Wiki). Linux Mint是一种基于Ubuntu开发出的Linux操作系统.由L ...

  5. python 3 mysql 索引原理与慢查询优化

    python 3 mysql 索引原理与慢查询优化 一 介绍 为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最 ...

  6. curl 监控web

    [root@rhel6 ~]# curl -I -s -w "%{http_code}\n" -o /dev/null http://127.0.0.1 [root@rhel6 ~ ...

  7. <linux报错解决>在Fedora21下安装vmware报错的解决办法

    关于VMWARE WORKSTATION在Fedora21下的安装问题 (1)在Fedora21下安装vmware如果在终端下启动,提示你找不到内核头文件Kernel Headers的话使用命令: s ...

  8. poj 3083 Children of the Candy Corn 【条件约束dfs搜索 + bfs搜索】【复习搜索题目一定要看这道题目】

    题目地址:http://poj.org/problem?id=3083 Sample Input 2 8 8 ######## #......# #.####.# #.####.# #.####.# ...

  9. Android 动态权限申请

    package com.dragon.android.permissionrequest; import android.Manifest; import android.content.Dialog ...

  10. BZOJ 1059 [ZJOI2007]矩阵游戏：二分图匹配

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1059 题意: 给你一个n*n的01矩阵. 你可以任意次地交换某两行或某两列. 问你是否可以 ...