<!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. UNREFERENCED_PARAMETER

    作用:告诉编译器,已经使用了该变量,不必检测警告! 在VC编译器下,如果您用最高级别进行编译,编译器就会很苛刻地指出您的非常细小的警告.当你生命了一个变量,而没有使用时,编译器就会报警告:" ...

  2. Spring-Boot:Spring Cloud构建微服务架构

    概述: 从上一篇博客<Spring-boot:5分钟整合Dubbo构建分布式服务> 过度到Spring Cloud,我们将开始学习如何使用Spring Cloud 来搭建微服务.继续采用上 ...

  3. unset与unlink

    unset() -- 释放给定的变量 详见->http://www.kuqin.com/php5_doc/function.unset.html unlink() --删除文件    常用于用户 ...

  4. python之路第五篇之模块和加密算法（进阶篇：续）

    模块 Python中,如果要引用一些内置的函数,该怎么处理呢?在Python中有一个概念叫做模块(module) 简单地说,模块就是一个保存了Python代码的文件. 模块分类: 1)内置模块 2)自 ...

  5. centos7下安装tesseract-ocr进行验证码识别

    摘要: centos7安装依赖库 tesseract配置 代码例子 centos7安装依赖库 安装centos系统依赖 yum install -y automake autoconf libtool ...

  6. vue2购物车ch1-（安装依赖、简单配置、 axios获取api的模拟数据）

    0--项目说明 说明此项目源自某课网购物车教程,但是在开发过程中,发现在开发过程中用的还是 vue-resource(宣布不更新的类$.ajx()插件),为了以后的发展使用axios.js,详情参考 ...

  7. HDU 1219 AC Me

    strlen能不用就不用 #include<cstdio> #include<cstdlib> #include<iostream> #include<alg ...

  8. word遇到错误 使其无法正常工作 因此需要关闭word 是否希望我们立刻修复

    方法1: 网上找的方案: win10下按下快捷键win+R, 然后在里面输入 %appdata%\microsoft\templates ,确定,此时就会直接进入Word安装路径,在里面找到" ...

  9. 使用Canvas制作时钟动画

    复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...

  10. 基于Redis位图实现系统用户登录统计

    项目需求,试着写了一个简单登录统计,基本功能都实现了,日志数据量小.具体性能没有进行测试~ 记录下开发过程与代码,留着以后改进! 1. 需求 1. 实现记录用户哪天进行了登录,每天只记录是否登录过,重 ...