<!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. 51nod 1103 N的倍数 思路：抽屉原理+前缀和

    题目: 这是一道很神奇的题目,做法非常巧妙.巧妙在题目要求n个数字,而且正好要求和为n的倍数. 思路:用sum[i]表示前i个数字的和%n.得到sum[ 1-N ]共N个数字. N个数字对N取模,每个 ...

  2. HTTP库Axios

    前面的话 本文将详细介绍HTTP库Axios 概述 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 [安装] 在Vue中使用,最好安装两个模块axios ...

  3. 【NOIP2016提高组day2】蚯蚓

    那么我们开三个不上升队列, 第一个记录原来的蚯蚓, 第二个记录乘以p的蚯蚓 第三个记录乘以(1-p)的蚯蚓, 在记录每条就要入队列的时间,就可以求出增加的长度 每次比较三个队列的队首,取最大的值x的切 ...

  4. Intellij idea史上最简单的教程之Linux下安装与破解Intellij idea2017

    一.前言 这一节我们介绍在Linux下如何安装与破解Intellij idea2017.现在有很多公司开发环境都是Linux,所以掌握在Linux环境下使用Idea办公也是咱们必须得掌握的技能. 记住 ...

  5. Windows下Apache添加SSL模块

    参考资料:http://www.yuansir-web.com/2011/05/12/hello-world/测试环境:windows2003 32位 + Apache2.4 + PHP5.4 一.准 ...

  6. 深入浅出WPF——附加事件（Attached Event）

    3.3 事件也附加——深入浅出附加事件 WPF事件系统中还有一种事件被称为附加事件(Attached Event),简言之,它就是路由事件.“那为什么还要起个新名字呢?”你可能会问. “身无彩凤双飞翼 ...

  7. 大数据算法设计模式(2) - 左外链接(leftOuterJoin) spark实现

    左外链接(leftOuterJoin) spark实现 package com.kangaroo.studio.algorithms.join; import org.apache.spark.api ...

  8. 在 Tomcat 8 部署多端口项目

    一般的部署途径 Tomcat 的部署途径很多,一般有如下几种: 直接将 War 包拷贝到 webapps 目录中,然后启动 Tomcat. 登陆 Tomcat 管理控制台http://localhos ...

  9. 【解决方案】Django管理页面无法显示静态文件

    [问题描述]:Django管理界面无法获取页面的css样式文件.图片等静态文件.调试模式下看到静态url显示404. [问题原因]:跟踪源码可以发现,静态文件的url是由Django自带的app(dj ...

  10. ios 返回不会自动刷新页面问题

    在实际开发过程中,移动端的兼容性问题有很大的坑,安卓可以了ios不行,ios可以了安卓又失效了这样,其中ios的回退操作就是不会自动刷新页面,很烦! 常见的history.back() history ...