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

　　　　

　　　　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. atom markdown转换PDF 解决AssertionError: html-pdf: Failed to load PhantomJS module

    atom编辑器markdown转换PDF 解决AssertionError: html-pdf: Failed to load PhantomJS module. You have to set th ...

  2. ARM平台指令虚拟化初探

    0x00:什么是代码虚拟化? 虚拟机保护是这几年比较流行的软件保护技术.这个词源于俄罗斯的著名软件保护软件“VmProtect”,以此为开端引起了软件保护壳领域的革命,各大软件保护壳都将虚拟机保护这一 ...

  3. ListView优化的时候ViewHolder的简洁写法

    在ListVIew做复用优化的时候,经常会写ViewHolder,还需要很麻烦的去findview,我最讨厌写一堆的这样代码了,今天看到了一个极简的写法,很好用,很简洁啊!!! public stat ...

  4. Redis在Windows下安装全过程

    一.下载windows版本的Redis 去官网找了很久,发现原来在官网上可以下载的windows版本的,现在官网以及没有下载地址,只能在github上下载,官网只提供linux版本的下载 官网下载地址 ...

  5. Js 数据类型 Number()转型函数

    alert(Number(true)); //转换为1,如果为false为0 alert(Number()); //25,数值型直接返回 alert(Number(null)); //0,空对象返回0 ...

  6. ODBC驱动程序丢失解决方法

    今天运行SqlDbx连接数据库的时候报错,提示没有找到相应的ODBC driver,打开ODBC管理面板一看,发现里面的驱动程序都不见了.这时想起今天卸载了一个成本核算软件后成这样的,网上搜索一下只需 ...

  7. 打表格，字符串处理，POJ(2136)

    题目链接:http://poj.org/problem?id=2136 水题WA了半天,结果是数组开小了. #include <stdio.h> #include <string.h ...

  8. LayoutParams布局

    AbsoluteLayout.LayoutParams可以重新设置坐标,然后调用setLayoutParamsLinearLayout.LayoutParams可以调用setMargins();来移动 ...

  9. python 3+djanjo 2.0.7简单学习(一）

    1.安装django pip install django 我这里已经安装过了 整个目录结构如下: votes : migrations : __init__.py : admin.py : apps ...

  10. tensorflow pb ckpt pbtxt

    ckpt存储参数值 pbtxt存储网络图 pb既存储参数值又存储网络图