<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body onload="getwin()">
<p id="ptime">现在时间</p>
<p id="ptime1">距离2018年时间</p>
<button id="btn" onclick="stopTime()">停止时间按钮</button>
<button id="btn1" onclick="stopwin()">停止弹出框按钮</button>
<script>
    var mytime = setInterval(function(){getTime();},1000);//间隔一秒执行一次该方法
    function getTime() {
        var nowtime = new Date();//获取当前时间
        var time = nowtime.toLocaleTimeString();//转换日期十分秒
        var endTime=new Date("2018/1/1,0:00:00") //设定倒计时结束时间
        var timeXX=(endTime.getTime()-nowtime.getTime())/(1000);//距离2018年的秒数

        var date=parseInt(timeXX/(24*60*60)); //换算成天
        var xs=parseInt(timeXX/(60*60)%24); //得到小时
        var fz=parseInt(timeXX/60%60); //得到分钟
        var ms=parseInt(timeXX%60); //得到秒数

        var year=nowtime.getFullYear(); //获取现在的年
        var month=nowtime.getMonth()+1; //获取现在的月 必须+1
        var data=nowtime.getDate(); //获取现在的日
        var h=nowtime.getHours();//获取现在的小时
        var m=nowtime.getMinutes();//获取现在的分钟
        var s=nowtime.getSeconds();//获取现在的秒数
        h=checkTime(h);
        m=checkTime(m);
        s=checkTime(s);
        var d=nowtime.getDay(); //获取星期（因星期打印出事0~6，所以用数组形式转化成对应的星期）
        var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        document.getElementById("ptime").innerHTML=year+"年"+month+"月"+data+"日"+"&nbsp;"+weekday[d]+"&nbsp;"+h+":"+m+":"+s;
        //打印出当前年月日
        document.getElementById('ptime1').innerHTML='离2018年:'+date+'天'+xs+'小时'+fz+'分钟'+ms+'秒';
    }

function getwin() {
    alert("我是3秒一个的弹出框");
    win = setTimeout(function(){getwin();},3000);//延迟3秒出现一个提示框
}
function stopTime() {
    clearInterval(mytime);
}
function stopwin() {
    clearTimeout(win);
}
function checkTime(i){
        //设置小于10的时间数字格式，例如5秒显示成05秒
        if(i<10){
            return '0'+i;
        }else{
            return i;
        }
}
</script>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body onload="getwin()">
<p id="ptime"></p>
<button id="btn" onclick="stopTime()">停止时间按钮</button>
<button id="btn1" onclick="stopwin()">停止弹出框按钮</button>
<script>
    var mytime = setInterval(function () {getTime();},1000);//间隔一秒执行一次该方法
    function getTime() {
        var d = new Date();//获取当前事件
        var t = d.toLocaleTimeString();//转换日期十分秒
        var f = document.getElementById("ptime");
        f.innerHTML = t;
    }
function getwin() {
    alert("我是3秒一个的弹出框");
    win = setTimeout(function(){getwin();},3000);//延迟3秒出现一个提示框
}
function stopTime() {
    clearInterval(mytime);
}
function stopwin() {
    clearTimeout(win);
}

</script>

</body>
</html>

JAVAscript学习笔记 js计时器与倒计时 第六节 （原创） 参考js使用表的更多相关文章

  1. HTML学习笔记 CSS背景样式案例 第六节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Java程序猿JavaScript学习笔记（14——扩大jQuery UI）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  3. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  4. JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  5. JavaScript:学习笔记(2)——基本概念与数据类型

    JavaScript:学习笔记(2)——基本概念与数据类型 语法 1．区分大小写．Test 和 test 是完全不同的两个变量. 2．语句最好以分号结束,也就是说不以分号结束也可以． 变量 1.JS的 ...

  6. Javascript学习笔记二——操作DOM

    Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二．querySelector( ...

  7. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  8. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

随机推荐

  1. 从Thread.start()方法看Thread源码，多次start一个线程会怎么样

    这篇文章作为Thread类源码剖析的补充,从一个侧面来看Thread源码.也解答了面试高频问题:"多次start一个线程会怎么样?" 答案是:java.lang.IllegalTh ...

  2. TTabControl

    1．TTabControl 组件的典型用法TTabControl 组件使用起来,根本不会使程序简单化,所以不提倡使用此组件,可以用TPageControl组件代替.与多页组件不同的是,虽然Tab 组件 ...

  3. hdu3756三分基础题

    Dome of Circus Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. MySQL之增删改查

    前言:以下是MySQL最基本的增删改查语句,很多IT工作者都必须要会的命令,也是IT行业面试最常考的知识点,由于是入门级基础命令,所有所有操作都建立在单表上,未涉及多表操作. 前提:在进行" ...

  5. Struts201---环境搭配

    开发工具:Eclipse   Struts版本:2.3.24 最近在学SSH框架,SSH是 struts+spring+hibernate的一个集成框架,是目前比较流行的一种Web应用程序开源框架.集 ...

  6. ZOJ2006 一道很尴尬的string操作题

    ZOJ2006(最小表示法) 题目大意:输出第一个字符串的最小字典序字串的下标! 然后我居然想试一试string的erase的能力,暴力一下,然后20msAC了,尴尬的数据.......... #in ...

  7. GPUImage库的使用

    GPUImage开源项目地址:https://github.com/BradLarson/GPUImage GPUImage使用说明:https://github.com/BradLarson/GPU ...

  8. php header的使用，PHP常见header状态总结

    <?php//200 正常状态header('HTTP/1.1 200 OK');// 301 永久重定向,记得在后面要加重定向地址 Location:$urlheader('HTTP/1.1 ...

  9. LDAP服务部署

    1.安装基本环境 # yum -y install openldap openldap-devel openldap-servers openldap-clients 2.配置LDAP服务端 (1)拷 ...

  10. Linux入门(16)——Ubuntu16.04下配置sublime text 3使用markdown

    sublime text 3安装两个插件: MarkDown Editing OmniMarkupPreviewer 有的人使用 MarkDown Editing markdownpreviewer ...