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

　　　　

　　　　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. sql分组数据去重

    #分组获得每个机柜里服务器占用的机架总数,如552807e6-b428-4184-b219-ae368c68ddb3占用4个 mysql> select cabinet_uuid, count( ...

  2. Arcgis for Js之鼠标经过显示对象名的实现

    在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效果. 为了有个直观的概念,先给大家看看实 ...

  3. Visual Studio 各个版本汇总

    微软开发人员,对开发工具的熟练程度,在一定程度上说明了开发 版本 名称 内部版本 发布日期 支持 .NET Framework 版本 备注 引入 .NET Framework 前[4]  1 Visu ...

  4. Python基础学习-列表基本操作

     列表:Python的“苦力”.   列表不同于元组和字条串的地方:列表是可变的——可以改变列表的内容,并且列表有很多有用的.专门的方法. 1.list函数 因为字符串不能像列表一样被修改,所有有时根 ...

  5. Linux下安装部署RabbitMQ

    在写正文之前先啰嗦几句,RabbitMQ(消息队列)的安装让我费了半天劲啊!足足折腾了2天,最后写下这篇文章总结下,其实很简单,但是你找不到错在哪个环节就会费很多无用功,如果你也遇到了安装erl后 怎 ...

  6. POJ-2395 Out of Hay---MST最大边

    题目链接: https://vjudge.net/problem/POJ-2395 题目大意: 求MST中的最大边,和POJ-2495类似 思路: 模板直接过 #include<iostream ...

  7. Android（java）学习笔记62：android.intent.action.MAIN 与 android.intent.category.LAUNCHER 理解

    1. 先看看网路上的说法: android.intent.action.MAIN 决定应用程序最先启动的 Activity android.intent.category.LAUNCHER 决定应用程 ...

  8. mac home brew install go

    mac利器home brew安装Go 首先你得需要安装home brew和ruby环境(因为home brew依赖ruby) 如果没有请自行到链接安装 准备好之后就开始安装go了 brew updat ...

  9. 在matlab中查看变量的数据类型

    >> x = x = >> class(x) ans = double

  10. js获取对象所有的keys

    Js中获取对象的所有key值   假如现在有一个对象 var obj = { A:2 ,B:"Ray" ,C:true ,D:function(){} } 如果想遍历对象obj中的 ...