文档章节

利用js实现倒计时

Airship
 Airship
发布于 2017/03/09 03:44
字数 502
阅读 24
收藏 1

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

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 = '元旦到了';
        }
    }
   

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

本文转载自:http://www.cnblogs.com/my-effort/p/5737850.html

共有 人打赏支持
Airship
粉丝 41
博文 965
码字总数 20029
作品 0
南京
高级程序员
私信 提问
点击按钮 倒计时60秒方可再次点击发送的Js代码

本节内容: Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果。 比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果。 本文用Javas...

Carl_
2014/08/06
0
0
10 个jQuery/JavaScript的圣诞主题效果

圣诞节快到了,赶快为你的网站打扮一番,换上节日的盛装吧!本文为你整理了10款使用jQuery和 JavaScript打造的圣诞主题效果,希望能给你带来些许惊喜。(PS:经过小编测试,下面的部分效果仅...

开心303
2011/12/13
2.5K
8
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

前言:   此事例是在vue组件中,使用canvas实现倒计时动画的效果。其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了   canvas动画的原理:利用定时器...

damon风
2017/11/23
0
0
Javascript 实现倒计时(10秒)自动关闭网页

JS倒计时10秒 实现功能 实例代码一: <html> <title>倒计时关闭网页</title> <head> <script language="javascript"> var cTime=10;//这个变量是倒计时的秒数设置为10就是10秒 function Tim......

leiboo
2014/04/27
0
0
JavaScript 倒计时踩坑集锦

前阵子,项目中加了个倒计时的需求,接手的时候 啪啪啪三声,搞定,送测 某个彩笔开发:这波有bug我吃shi。 然后测试小姐姐反手就给了我几个 bug bug1: 你这东西不准啊,我看着几分钟,有好几...

哈利破特
2018/10/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring学习记录

Java类定义配置 @Configuration //标记为配置类@ComponentScan //标记为扫描当前包及子包所有标记为@Component的类@ComponentScan(basePackageClasses = {接口.class,...}) //标记为扫描当...

CHONGCHEN
37分钟前
1
0
如何开发一款以太坊(安卓)钱包系列2 - 导入账号及账号管理

这是如何开发一款以太坊(安卓)钱包系列第2篇,如何导入账号。有时用户可能已经有一个账号,这篇文章接来介绍下,如何实现导入用户已经存在的账号。 导入账号预备知识 从用户需求上来讲,导...

Tiny熊
今天
3
0
intellJ IDEA搭建java+selenium自动化环境(maven,selenium,testng)

1.安装jdk1.8; 2.安装intellJ; 3.安装maven; 3.1 如果是单前用户,配置用户环境变量即可,如果是多用户,则需配置系统环境变量,变量名为MAVEN_HOME,赋值D:\Application\maven,往path中...

不最醉不龟归
今天
4
0
聊聊ShenandoahGC的Brooks Pointers

序 本文主要研究一下ShenandoahGC的Brooks Pointers Shenandoah Shenandoah面向low-pause-time的垃圾收集器,它的GC cycle主要有 Snapshot-at-the-beginning concurrent mark包括Init Mark(P......

go4it
昨天
4
0
Makefile通用编写规则

#简单实用的Makefile模板: objs := a.o b.o test:$(objs) gcc -o test $^ # .a.o.d .b.o.d dep_files := $(foreach f,$(objs),.$(f).d) dep_files := $(wildcard $(dep_files)) ifneq ($(d......

shzwork
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部