正文 

当前位置： 首页 > java > java教程

超实用的javascript代码段item1--倒计时效果

黄银 黄银     2022-08-04     414

关键词：

现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，本文分析不同倒计时效果的计算思路及方法，掌握日期对象Date，获取时间的方法,计算时差的方法，实现不同的倒时计效果。

1、简单时间显示

讲解日期对象Date,并通过该对象获取时、分、秒等，让你自由提取所需时间内容。

<!DOCTYPE html>
<html>
<head>
    <title>获取时间</title>
    <script type="text/javascript">
    window.onload = function(){
        showTime();
    }

    function showTime(){
        var myDate = new Date();
        var year = myDate.getFullYear();//年
        var month = myDate.getMonth() + 1;//月要+1
        var date = myDate.getDate();//天是getDate(),不是getDay()
        var dateArr = ["日","一",‘二‘,‘三‘,‘四‘,‘五‘,‘六‘];
        var day = myDate.getDay();//getDay()是星期的第几天，0为日。
        var hours = myDate.getHours();
        var minutes = formatTime(myDate.getMinutes());
        var seconds = formatTime(myDate.getSeconds());

        var systemTime = document.getElementById("time");
        systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" +  minutes + ":" + seconds;
        setTimeout("showTime()",500);
    }

    //格式化时间：分秒。
    function formatTime (i){
        if(i < 10){
            i = "0" + i;
        }
        return i;
    }

    </script>
</head>
<body>
    <div id =‘time‘></div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

显示结果：

技术分享

2、倒计时时差

讲解gettime()等方法，及计算时间的方法，学会时间相差的天数。

<!DOCTYPE html>
<html>
<head>
    <title>获取时间</title>
    <script type="text/javascript">
        window.onload = function(){
            deadTime();
        }
        function deadTime(){
            var nowTime = new Date();
            var finalTime = new Date("2015-11-11");
            var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
            var date = Math.ceil(lefttime);
            document.getElementById("time").innerHTML = date;
        }
    </script>
</head>
<body>
    <div >距离双十一还有：<span id =‘time‘></span>天</div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

显示效果：

技术分享

3、 限时抢购

如何运用日期对象及方法，计算相差的天、时、分、秒的方法。

<!DOCTYPE html>
<html>
<head>
<title>团购——限时抢</title>

</head>

<body>

<div class="time"> <span id="LeftTime"></span></div>
</div>
<script>
function FreshTime()
{
        var endtime=new Date("2015/11/11,12:20:12");//结束时间
        var nowtime = new Date();//当前时间
        var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); 
        d=parseInt(lefttime/3600/24);
        h=parseInt((lefttime/3600)%24);
        m=parseInt((lefttime/60)%60);
        s=parseInt(lefttime%60);

        document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";
        if(lefttime<=0){
                document.getElementById("LeftTime").innerHTML="团购已结束";
                clearInterval(sh);
        }
}
        FreshTime();
        var sh;
        sh=setInterval(FreshTime,1000);
</script>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

技术分享

知识点：

1.学会使用日期对象Date和方法。
2.学会不同时间内容的获取。
3.学会计算时差的方法。

本实例通过慕课网相关课程整理：慕课网—–倒计时效果。

 

转载：http://blog.csdn.net/i10630226/article/details/49530617

《超实用的node.js代码段》连载二：正确拼接buffer

  对于初学Node.js框架的开发人员来说，可能认为Buffer模块比较易学、重要性也不是那么突出。其实，Buffer模块在文件I/O和网络I/O中应用非常广泛，其处理二进制的性能比普通字符串性能要高出很多，重要性可谓是举足轻... 查看详情

超实用的jquery小技巧(代码片段)

JQuery是一个JavaScript库，她极大的简化了我们对JavaScript的编程。今天我们总结了下平常项目中用到的一些小技巧，仅供参考。1、替换元素//替换元素$(document).ready(function()$("#id").replaceWith(‘<p>Ihavebeenrepaced</p>‘));2、延时加... 查看详情

开发中经常遇到的javascript问题整理(超实用)(代码片段)

作者@chengyuming 原文地址：https://chengyuming.cn/views/basis/issue.html   获取一个月有多少天今天遇到一个需求，已知月份，得到这个月的第一天和最后一天作为查询条件查范围内的数据newDate(year,month,date,hrs,min,sec)，n... 查看详情

你应该了解的23个超实用js技巧(代码片段)

...t/6955293673365962789本文的目的在于帮助大家更加熟练的运用JavaScript语言来进行开发工作。带有多个条件的if语句把多个值放在一个数组中，然后调用数组的includes方法。// bad 👴if (x =& 查看详情

vscode超实用插件推荐，让你的开发效率火力全开(代码片段)

...前端开发脚本和插件3.语法错误检查，包括CSS/SCSS/LESS/Javascript/TypeScript4.emmet 查看详情

超实用的javascript技巧及最佳实践

21.使用逻辑AND/OR来处理条件语句varfoo=10;foo==10&&doSomething();//isthesamethingasif(foo==10)doSomething();foo==5||doSomething();//isthesamethingasif(foo!=5)doSomething();逻辑AND也可以用来设置含糊参数缺省的值FunctiondoSomething(arg1... 查看详情

超实用！javascript修改css变量,达到动态修改样式的目的(代码片段)

...根据不同的条件来动态修改样式，这时候就需要使用JavaScript来实现。在CSS中，有一种变量的概念，可以使用变量来定义颜色、字体大小等样式属性。在本篇文章中，我们将介绍如何使用JavaScript来修改CSS变量，... 查看详情

超实用多选框checkbox功能——全选不选反选等功能的数据驱动js实现(代码片段)

超实用多选框checkbox功能——全选、不选、反选等功能的数据驱动JS实现对多选框实现全选、不选、反选是一个常见的功能，尤其是在外面使用了vue或者react等前端框架之后，仅仅是需要数据处理，我相信各位朋友都已... 查看详情

css3超实用属性：pointer-events

最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态... 查看详情

git超实用总结(代码片段)

转自：https://www.cnblogs.com/qcloud1001/p/9796750.htmlGit是什么？Git是一个分布式的代码管理容器，本地和远端都保有一份相同的代码。Git仓库主要是由是三部分组成：本地代码，缓存区，提交历史，这几乎是所有操作的本质，但是为了... 查看详情

android超实用实战--分析汇编定位问题(代码片段)

...例为引子，介绍一下汇编分析的一些技术知识，绝对超值实用，让我们对问题的认识更上一个档次！！   我们的问题就是通过代码来模拟一个空指针，这种问题很常见，相信各位码农朋友在实际的工作中不知道碰到过... 查看详情

求教下面的javascript代码意思

...lass('menu_hover'););)</script>这是一段使用jQuery库的JavaScript代码片段，如果菜单中超链接的URL与当前页面的URL匹配，则将“menu_hover”类添加到菜单中的超链接的父元素中，以突出显示或激活该菜单项。代码使用$(document).read... 查看详情

javascript实用的javascript(代码片段)

查看详情

这10个超实用的python函数，你不妨试试！(代码片段)

...据挖掘、好玩工具！大家好，今天我要推荐10个超实用的Python内置函数，而且简单实用，收藏学习或者复习，简直舒服。喜欢技术交流的朋友，文末加入我们的学习群。废话不多说，我们开始学习吧1.red... 查看详情

javascript实用的书签(代码片段)

查看详情

十个html5代码片段，超实用，一定要收藏(代码片段)

HTML很容易写，但创建网页时，您经常需要重复做同样的任务，如创建表单。在这篇文章中，我收集了10个超有用的HTML 代码片段，有HTML5启动模板、空白图片、打电话和发短信、自动完成等等，帮助你提高开发速度。一、HTML5... 查看详情

newtonsoft六个超简单又实用的特性，值得一试上篇(代码片段)

...Newtonsoft源码，对它有了新的认识，先总结六个超经典又实用的特性，同大家一起分享，废话不多说，快来一起看看吧~~~二：特性分析1.代码格式化如果你直接使用JsonConvert.SerializeObject的话，默认情况下所有的json是挤压在一块的... 查看详情

git超实用总结，再也不怕记忆力不好了(代码片段)

【转】Git超实用总结，再也不怕记忆力不好了欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~本文由腾讯工蜂发表于云+社区专栏Git是什么？Git是一个分布式的代码管理容器，本地和远端都保有一份相同的代码。Git... 查看详情