倒计时 这个名词并不陌生，比如：天猫，京东等一些网上商城都会推出一些限时特价商品，今天我们就一起编写一个属于自己的倒计时；

　　　　

　　　　Ps: 首先做一件事情的时候，不应该盲目的去做，应该首当其冲的去想，脑子里面出现大概的思路。

一、首先我们应该在HTML放一个容器（这里面没有什么可解释的就是为了呈现倒计时）；

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>倒计时制作</title>

	<style>

		.otime span{display:inline-block;padding: 10px 20px;background-color: green;opacity: 0.5;margin-left: 10px;color:red;}

	</style>

</head>

<body>

	<div class="text">

       <p>距离元旦还剩余:<span id="time" class="otime"></span></p>

       <p>当前时间：<span id="time1" class="otime"></span></p>

    </div>

</body>

</html>

二、编写JS代码

//这个函数是为了适应格式 比如：01分01秒;

    function p (n){

        return n < 10 ? '0'+ n : n;

    }

    //倒计时函数

    function newTime (){

        //定义当前时间

        var startTime = new Date();

        //定义结束时间

        var endTime = new Date("2017/1/1 00:00:00");

        //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算；

        var countDown = (endTime.getTime() - startTime.getTime())/1000;

        //获取天数 1天 = 24小时  1小时= 60分 1分 = 60秒

        var oDay = parseInt(countDown/(24*60*60));

        //获取小时数

        //特别留意 %24 这是因为需要剔除掉整的天数;

        var oHours = parseInt(countDown/(60*60)%24);

        //获取分钟数

        //同理剔除掉分钟数

        var oMinutes = parseInt(countDown/60%60);

        //获取秒数

        //因为就是秒数  所以取得余数即可

        var oSeconds = parseInt(countDown%60);

        //下面就是插入到页面事先准备容器即可;

        var html =  "<span>" + p(oDay) + "天</span>"+ "<span>" + p(oHours) + "时</span>" + "<span>" + p(oMinutes) + "分</span>" +"<span>" + p(oSeconds) + "秒</span>";

        document.getElementById('time').innerHTML = html;

        //别忘记当时间为0的，要让其知道结束了;

        if(countDown < 0){

            document.getElementById('time').innerHTML = '元旦到了';

        }

    }
　　　

　这样就实现了一个计时器的效果，如果想要好看一点，只需要加点样式即可；

三、制作当前时间的秒表（也就是第二个容器需要做的）

1、直接编写JS代码　

 function oldTime (){

         var oDate = new Date();

         //获取年

         var oFullyear = oDate.getFullYear();

         //获取月份

         var oMonth = oDate.getMonth()+1;

         //获取日期

         var oDta= oDate.getDate();

         //获取星期

         var oDay = oDate.getDay();

         var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

         //获取小时

         var oHours = oDate.getHours();

         //获取分钟

         var oMinutes = oDate.getMinutes();

         //获取秒数

         var oSeconds = oDate.getSeconds();

         //插入到容器中

         var b = "<span>"+ oFullyear +"年</span>" + "<span>"+ oMonth +"月</span>" + "<span>"+ oDta+"日</span>" + "<span>"+ week[oDay] +"</span>" + "<span>"+ p(oHours) +"时</span>" + "<span>"+ p(oMinutes) +"分</span>" + "<span>"+ p(oSeconds) +"秒</span>";

         document.getElementById('time1').innerHTML = b;

     }

　---》如果学会了，不妨自己试一下，看看能不能做出更高级的计时哦;

利用js实现倒计时的更多相关文章

  1. js函数——倒计时模块+无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. js函数——倒计时模块和无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. 利用 JS 脚本实现网页全自动秒杀抢购

    利用 JS 脚本实现网页全自动秒杀抢购 倒计时页面: 倒计时未结束时,购买按钮还不能点击. 结束时,可以点击购买,点击后出现提示"付款成功" 展示效果 1.制作测试网页 首先我们来 ...

  4. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  5. 一个简单的js实现倒计时函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js时间倒计时

    看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个. 本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接 ...

  7. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  8. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  9. 利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作

    HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...

随机推荐

  1. （一）JavaScript之[数据类型]与[对象]

    1].数据类型字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空(Null).未定义 (Undefined). //极大或极小的数字可以 ...

  2. linux挂载和卸载NAS操作

    1.建立准备挂载NFS的目录,例如:cd /home/test,mkdir my_NFS_Catalog 2.挂接NFS至 /home/test/my_NFS_Catalog目录下(nas有两种格式: ...

  3. [原创][Windows] Win7安装visual c++ 2015 redistributable x64失败

    在win7中安装visual c++ 2015 redistributable x64 时会卡住,原因是visual c++ 2015 redistributable x64 需要KB2999226, ...

  4. 初学React：JSX语法

    这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍. 这是一个小系列.都是在同一个模板中搭建的,但是代码是不能正常执行的. >>第一个组件.js 'use strick ...

  5. CRM WebClient UI和Hybris里工作中心跳转的url生成逻辑

    CRM WebClient UI 把Work center的navigation target在client side不可见:在Chrome development tool里看不到,而是点击了Wor ...

  6. Mybatis-generator自动生成

    第一步:导入架包 <build> <plugins> <plugin> <groupId>org.mybatis.generator</group ...

  7. 解决 Jsp_Servlet 编码乱码问题

    Tomcat8.0以上浏览器请求的数据编码格式(包含): Get请求的时候Tomcat用UTF-8处理 post请求的时候Tomcat用ISO8859-1处理 Tomcat8.0以下浏览器请求的数据编 ...

  8. Eclipse使用的小技巧

    1.在右键new菜单栏中添加新建JSP文件 window->perspective->customize perspective->shortcuts->web->把JS ...

  9. linux命令详解-useradd，groupadd

    linux命令详解-useradd,groupadd 我们在linux命令行中输入useradd: Options:  -b, --base-dir BASE_DIR       base direc ...

  10. 牛客小白月赛2 H 武 【Dijkstra】

    链接:https://www.nowcoder.com/acm/contest/86/H来源:牛客网 题目描述 其次,Sεlιнα(Selina) 要进行体力比武竞赛. 在 Sεlιнα 所在的城市, ...