`
charrys
  • 浏览: 36281 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类

js时间倒计时

    博客分类:
  • js
阅读更多

前断时间,因为需要写了一个服务器的时间倒计时,现在我将它改成了JS版的。
描述:severtime:为读取服务器时间!如果时间差为0或小于0表示”已经结束!“我用是的JS所以只能用本机的时间,你可以用你的服务器时间用动 态语言!

Html代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>读取服务器时间,倒计时!</title>
<body>
<script type="text/javascript">
    <!--
        var $ = function(id){ return document.getElementById(id)}; 
        function getDiffDate(m){
            m-=(D=parseInt(m/86400000))*86400000;
            m-=(H=parseInt(m/3600000))*3600000;
            S=parseInt((m-=(M=parseInt(m/60000))*60000)/1000);
			if(M<10 & M>0)
			{
				M='0'+M;
			}
			if(H<10 & H>0)
			{
				H='0'+H;
			}
			if(S<10)
			{
				S='0'+S;
			}
			if(m>0)
            return D+'天'+H+'时'+M+'分'+S+'秒';
			else
			{			
				return "已经结束!";
			}
        }
		function setime(){
			$("severtime").innerHTML=$("time").value;
		}
        window.onload = function(){
            var std=setInterval(function(){
				var severtime=$("severtime").innerHTML;
				var stdf=getDiffDate(new Date(severtime)-new Date())
				if(stdf!="已结束!")
				{
               		$("diffTime").innerHTML =stdf ; // 参数为两个时间的毫秒差					
				}
				else
				{
					$("diffTime").innerHTML =stdf;
					clearInterval(std);	
				}			
                }, 1000);
        }        
    //-->
    </script>
 </head>
<body>
<div>描述:severtime:为读取服务器时间!如果时间差为0或小于0表示”已经结束!“我用是的JS所以只能用本机的时间,你可以用你的服务器时间用动态语言!</div>
<div  style="width:300px;height:40px;line-height:40px;background-color:#C0C0C0;font-size:12px;border:2px solid #808080">
    距离<span id="severtime">2011/11/19 10:00</span>还剩:<span id="diffTime" style="color:#FF0000;font-weight:bold"></span>
</div>
<input type="text" id="time"/><input type="button" value="设置" onclick="setime()" />
<script>

document.getElementById("severtime").style.color="#ff6600";
document.getElementById("severtime").style.fontFamily ="Arial, Helvetica, sans-serif";

</script>
</body>
</html>
 
分享到:
评论

相关推荐

    考试系统js时间倒计时

    下面是一个基本的JavaScript时间倒计时的实现步骤: 1. **设置结束时间**:根据考试的截止时间,我们可以创建一个`Date`对象表示结束时间,例如`var endTime = new Date('2023-12-31T23:59:59')`。 2. **计算剩余...

    JS时间倒计时

    JavaScript时间倒计时是网页开发中常见的功能,用于实现如活动剩余时间、考试倒计时等动态显示。在JavaScript中,我们通常会结合Date对象和setInterval函数来实现这一功能。接下来,我们将深入探讨如何使用...

    JavaScript 时间倒计时

    JavaScript 时间倒计时 倒计时计算 调用方法 Timer.Init('2015/06/17 14:11:10','2015/06/18 14:12:08','ti','{0}天{1}时{2}分{3}秒')

    js获取服务端时间并倒计时

    在JavaScript(JS)编程中,实现获取服务器时间并进行倒计时是一项常见的需求,尤其在构建Web应用时。以下是对这个主题的详细说明: 首先,理解服务器时间和客户端时间的概念至关重要。服务器时间是服务器上计算机...

    JS做的环形倒计时

    8. **模块化和封装**:在`TimeCircles.js`文件中,我们可以推测这是一个实现了环形倒计时功能的JavaScript模块。它可能包含一个构造函数,接收开始时间、持续时间等参数,以及初始化、更新和结束等方法。 9. **响应...

    Javascript实现商品秒杀倒计时(时间与服务器时间同步)

    由于秒杀涉及的时间和服务器时间的同步对于确保活动的公平性和准确性至关重要,因此,如何使用JavaScript实现与服务器时间同步的商品秒杀倒计时成为了本篇讨论的核心内容。 首先,需要明确在实现秒杀倒计时时应避免...

    js实现倒计时时分秒

    在提供的压缩包文件中,"js倒计时"可能包含了一个完整的JS倒计时实现,你可以查看源代码学习更多细节,比如如何将倒计时数据显示在网页上,或者如何处理时区问题。通过深入理解这些代码,你将能更好地掌握JS实现倒...

    javascript 实现网页 倒计时 代码

    本篇文章将详细介绍如何利用JavaScript编写一个网页倒计时功能,并结合提供的`index.html`和`js`文件进行解析。 首先,我们需要理解JavaScript中的时间处理。JavaScript使用`Date`对象来表示日期和时间,它提供了...

    js自定义设置日期时间倒计时代码.zip

    实现效果: ... js自定义设置日期时间倒计时代码,通过使用原生js实现人时间日期的倒计时效果,一般在商城中用的比较多,例如搞某某活动,实现大促销活动,然后一个炫酷的倒计时效果,php中文网推荐下载!

    c#日期时间倒计时

    在本教程中,我们将深入探讨如何使用C#来实现一个简单的日期时间倒计时功能。 首先,我们需要理解C#中的DateTime结构。DateTime是.NET Framework提供的一种类型,用于表示日期和时间。它包含了年、月、日、小时、...

    js短信验证码倒计时(页面刷新无效)

    1. **状态管理**:使用JavaScript,我们可以在全局变量或组件状态中存储倒计时的剩余时间。例如,可以创建一个`countdown`变量,初始值为60秒。然后使用`setInterval`函数每秒更新状态并显示在界面上。倒计时结束后...

    js可以自动设置结束时间的倒计时

    用js实现根据不同情况自动设置,结束时间的网页倒计时代码程序。

    JS倒计时源码

    JavaScript(简称JS)倒计时源码是一种常见的前端开发技术,用于实现网页上的时间计时功能,例如活动截止、考试开始等场景。本资源包含一个实现了天、小时、分钟和秒显示的倒计时功能的JS代码示例。下面将详细讲解JS...

    倒计时功能插件js

    总结来说,“倒计时功能插件js”涉及JavaScript的Date对象、时间差计算、定时器、时间格式化以及DOM操作等核心概念。理解和掌握这些知识点,开发者就能创建出自己的倒计时插件,满足各种应用场景的需求。

    元旦倒计时html/元旦倒计时js/元旦节日祝福html源码【元旦倒计时效果很炫酷】

    在本文中,我们将深入探讨如何使用原生JavaScript来实现一个倒计时特效,特别是针对2023年的元旦。这个倒计时功能不仅限于元旦,通过调整代码,你可以将其应用到任何特定的节日或日期。我们将从以下几个方面展开讨论...

    JS倒计时_可自定义结束时间

    JS倒计时_可自定义结束时间 本资源是一个基于JavaScript的倒计时器,允许用户自定义结束时间。通过设置年、月、日三个参数,可以计算出距离结束时间的剩余时间,并实时显示倒计时。 知识点: 1. JavaScript倒计时...

    JavaScript实现倒计时

    JavaScript是Web开发中不可或缺的一部分,尤其在动态...这个过程不仅加深了对JavaScript时间处理的理解,也展示了JavaScript在动态网页中的应用能力。通过不断实践和优化,我们可以创造出更加丰富多样的倒计时效果。

    js+css3倒计时动画特效

    【标题】"js+css3倒计时动画特效"是一个结合了JavaScript和CSS3技术的网页倒计时组件,它为传统的倒计时功能增添了视觉吸引力。这种特效常见于活动预热、产品上线预告等场景,能吸引用户注意力并营造紧张期待的氛围...

    Javascript的倒计时显示特效

    总的来说,创建JavaScript倒计时特效的关键在于理解日期和时间的计算,以及如何使用`setInterval`来定期更新页面内容。通过这个实例,你可以根据自己的需求调整结束时间,实现各种倒计时应用场景。同时,这个基础...

    js时间对象实现倒计时效果(可设置倒计时开始时间)

    js时间对象实现倒计时效果(可设置倒计时开始时间)js时间对象实现倒计时效果(可设置倒计时开始时间)js时间对象实现倒计时效果(可设置倒计时开始时间)

Global site tag (gtag.js) - Google Analytics