<!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. HDFS概述（5）————HDFS HA

    HA With QJM 目标 本指南概述了HDFS高可用性(HA)功能以及如何使用Quorum Journal Manager(QJM)功能配置和管理HA HDFS集群. 本文档假设读者对HDFS集群 ...

  2. hdu1698线段树的区间更新区间查询

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  3. “一切都是消息”--MSF（消息服务框架）之【请求-响应】模式

    在前一篇, “一切都是消息”--MSF(消息服务框架)入门简介, 我们介绍了MSF基于异步通信,支持请求-响应通信模式和发布-订阅通信模式,并且介绍了如何获取MSF.今天,我们来看看如何使用MSF来做 ...

  4. 手动添加 Git bash 到鼠标右键

    由于不知原因,右键没有了Git Bash Here,没有这个右键菜单导致获取Git仓库中的代码很不方便,所以决定通过注册表的方式将这个菜单加出来. 1.win + R,输入"regedit& ...

  5. CN_Week1_Receptive_Field

    0. The introduction: 1. An example: Models of "Receptive Fields". 2. An intuitive method o ...

  6. javascript特效300例----抄书喽

    -javascript300例- #body_div { background-color: #202425; color: white; margin: 0 auto; border: 5px gr ...

  7. ch2-mysql相关

    1 mySql数据库基本 1.1 创建表必须字段 id 1.2 nodeJS数据库连接 根目录下建立 mysql.js 文件代码 var mysql = require('mysql'); var c ...

  8. C# 多线程、异步线程、线程池相关知识

    /* 线程池ThreadPool类会在需要时增减池中线程的线程数,直到最大的线程数.池中的最大线程数是可配置的. 在双核CPU中,默认设置为1023个工作线程和1000个I/O线程.也可以指定在创建线 ...

  9. 【原创】自用css reset

    自己工作中常用的reset,和一些设置,实际用时会根据网站页面进行增删. /* Common style */html{ overflow-y:scroll; overflow-x:auto;}bod ...

  10. aspnet中通过多条件筛选来显示数据的实现

    UI图: 功能实现: 1.勾选住哪个选项之后,就加入了筛选.支持姓名的模糊查询. 2.对筛选出来的数据可以直接修改,并更新回数据库. 说明:显示的数据来自T_User表.数据显示控件使用的是 List ...