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

　　　　

　　　　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. Asp.net防御XSS攻击组件库

    一.AntiXss 翻看mvc4高级编程,偶看到作者强烈推荐使用AntiXss防御XSS攻击,收集资料看下. 目前类库已融入到.netframework中,类库主页不再更新. 使用方法:使用Nuget ...

  2. appium（四）交互分析

    转自:http://blog.csdn.net/Yejianyun1/article/details/56017360 一.简介 英文官网:appium官网 Appium跨平台.开源的自动化测试工具, ...

  3. Centos 7.0_64bit 下安装 Zabbix server 3.0服务器的安装

    一.关闭selinux   修改配置文件/ etc / selinux / config,将SELINU置为禁用(disabled)   vim /etc/selinux/config  # This ...

  4. centos6.5_64bit-禅道安装及数据库操作

    linux一键安装包内置了apache, php, mysql这些应用程序,只需要下载解压缩即可运行禅道. 从7.3版本开始,linux一键安装包分为32位和64位两个包,请大家根据操作系统的情况下载 ...

  5. 命令行输入Jmeter提示不是内部或外部命令，处理方式：添加环境变量

    命令行输入Jmeter提示不是内部或外部命令,需要在环境变量path中添加jmeter的bin目录绝对路径 我的电脑 > 右击 >属性 > 高级系统变量 > 环境变量 > ...

  6. IOS 设置ipone状态栏的样式

    /** 控制状态栏的样式 */ -(UIStatusBarStyle)preferredStatusBarStyle { //白色 return UIStatusBarStyleLightConten ...

  7. 使用Python命令创建jenkins的job

    目的:通过调用jenkins的命令,动态创建jenkins的job 如何使用,使用Python的脚本,更多API可以进入到官网去查看,http://jenkinsapi.readthedocs.io/ ...

  8. sql的where条件转换成mongdb筛选条件

    解析字符串 filterModel1 and filterModel2 and (filterModel3 or filterModel4) 1.转换成mongo的筛选条件 /// <summa ...

  9. vue-wechat-title

    html中的title安装:npm install vue-wechat-title --save1.在mian.js中//网页titleimport VueTitle from 'vue-wecha ...

  10. 3、SpringBoot------邮件发送（1）

    开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/Springboot/tree/8878e8e89ce01ceb967ef8c1193ac740a6 ...