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

　　　　

　　　　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. Vue.js双向数据绑定模板渲染

    准备知识 1. 前端开发基础 html.css.js2. 前端模块化基础3. 对ES6有初步的了解 vuejs官网:cn.vuejs.org HTML: <!DOCTYPE html> & ...

  2. MyEclipse快捷键大全，很实用

    Eclipse本身很快的,但是加上了myeclipse后,就狂占内存,而且速度狂慢,那如何让Eclipse拖着myeclipse狂飚呢?这里提供一个: 技巧:取消自动validation  valid ...

  3. Android开发从系统图库中选择一张图片的方法

    刚开始学习OpenCv4Android编程,做了个小demo. 就是一个主界面上添加一个ImageView 两个Button控件. 一个Button用来从系统相册选择一张照片: 另一个Button是用 ...

  4. windows 2008 R2-Zabbix server 3.0监控主机的加入

    一.关闭windows防火墙或者开通10050和10051端口 (1).关闭防火墙 开始—控制面板—windows防火墙 按照要求关闭防火墙 (2).开通端口 1.开始—管理工具--高级安全windo ...

  5. C++学习之拷贝构造函数

    嘛是拷贝构造函数? 如果一个构造函数的第一个参数是’自身类‘ ‘类型’的引用,且任何额外参数都有默认值,则此构造函数是拷贝构造函数.如: [代码1] 1 2 3 4 5 6 class A{ publ ...

  6. Ruby SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B:

    最近使用ruby-china的源连接不上 使用gem update遇到这个问题, 原来是ruby没有包含SSL证书,所以Https的链接被服务器拒绝. 解决方法很简单,首先在这里下载证书(http:/ ...

  7. C# 驱动的mongodb的分页查询简单示例

    /// <summary> /// mongodb分页查询 /// </summary> /// <typeparam name="T">< ...

  8. Jenkins添加项目说明，增加项目描述

    背景:往往正常Jenkins上呈现的内容,太过简短,不易直观看了解项目是干嘛的,如下面的内容: 解决方案,使用插件,Extra Columns Plugin 安装成功后配置,需要结合自定义视图使用,新 ...

  9. DOM节点(二)：操作节点

    appendChild() 用于向childNodes列表的末尾添加一个节点. var returnedNode = someNode.appendChild(newNode); 如果传入的节点已经是 ...

  10. Zabbix 2.4安装部署

    目  录 第1章 Zabbix Server安装... 1 1.1 Zabbix Server环境... 1 1.2 Zabbix Server软件... 1 1.3 Zabbix server配置. ...