<!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. Spring常用注解介绍【经典总结】

    Spring的一个核心功能是IOC,就是将Bean初始化加载到容器中,Bean是如何加载到容器的,可以使用Spring注解方式或者Spring XML配置方式. Spring注解方式减少了配置文件内容 ...

  2. 征服 Redis

    大约一年多前,公司同事开始使用Redis,不清楚是配置,还是版本的问题,当时的Redis经常在使用一段时间后,连接爆满且不释放.印象中,Redis 2.4.8以下的版本由于设计上的主从库同步问题,就会 ...

  3. 移动WEB 响应式设计 @media总结

    第一种: 在引用样式的时候添加 <link rel="stylesheet" media="mediatype and|not|only (media featur ...

  4. JS判断访问设备是移动设备还是pc

    <scripttype="text/javascript"> function browserRedirect() { var sUserAgent= navigato ...

  5. Python实战之文件操作的详细简单练习

    ['_CHUNK_SIZE', '__class__', '__del__', '__delattr__', '__dict__', '__dir__', '__doc__', '__enter__' ...

  6. git 忽略文件夹

    $ vim .gitignore 添加要忽略的文件或文件夹 esc + :wq 退出vim命令行

  7. mysq参数sql_safe_updates限制范围

    在mysql运维中出现过不少因为update/delete条件错误导致数据被误更新或者删除的case,为避免类似问题的发生,可以用sql_safe_updates参数来对update/delete做限 ...

  8. ZOJ2286 Sum of Divisors 筛选式打表

    我想我是和Segmentation Fault有仇,我一直以为是空间开大的问题,然后一直减少空间,还是SF,谁让n没有给范围了,qwq. 教训:以后注意输入范围和开的空间大小. #include< ...

  9. Jmeter测试HTTPS接口

    (以支付宝网站为例:https://memberprod.alipay.com/account/reg/index.htm) 浏览器:chrome 一.网页上导出证书 1.点击浏览器小锁--" ...

  10. 【特效】手机端仿美团下拉菜单带遮罩层html+css+jquery

    写了一个手机端的下拉菜单,类似美团,用相对单位rem写的. 效果截图: 代码很简单,原理有点类似嵌套的选项卡,其中的难点在于弹出下拉菜单后,出现黑色半透明遮罩层,而且下层列表页面禁止滚动了.关键就是给 ...