JavaScript实现动态时间效果

最新推荐文章于 2023-01-25 17:10:09 发布
最新推荐文章于 2023-01-25 17:10:09 发布
阅读量317 收藏
点赞数
分类专栏： 前端技术 文章标签： JavaScript IE XHTML CSS HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_11097/article/details/82001582
版权

首先说明JavaScript日期相关的一些操作。

1.创建日期对象  

   var dateObj = new Date()//返回当前系统时间，Thu Jan 20 2011 23:25:24 GMT+0800

2.获取时针数字

   dateObj.getHours() // 23

 

3.获取分针数字

   dateObj.getMinutes() //25

 

4.获取秒针数字

   dateObj.getSeconds() //24

 

5.获取星期几

   dateObj.getDay() // 4

 

6.获取日期

   dateObj.getDate() // 20

 

7.获取月份

   dateObj.getMonth() // 0, 月份的索引由0开始，因此，如果返回0，则需加1才得出真正的月份

 

8.获得年份

  (1) dateObj.getYear()

  关于这个方法要特殊说明一下，这个方法的返回值在firefox和IE中不同：在标准浏览器中都返回 111,因为标准的计算起始年份是从1900年，因此需要加上1900才得出真正的年份；而在IE中，直接返回2011，无需特别操作。

  所以此处要做浏览器类型判断，具体判断方法参见这里。

  (2) dateObj.getFullYear()/dateObj.getUTCFullYear()

  使用这个方法就不用想上述方法那样麻烦，可以直接返回正确的年份。

 

 

动态时间效果一：YYYY-MM-DD hh:mm:ss

 

 

 

<!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=gb2312" /> 

<title>电子时钟</title> 

</head> 

<style type="text/css"> 

#showtime{ background:#333; color:#FFF; height:30px; line-height:30px; font-size:12px; textindent:30px; width:250px; border:2px #999 solid; } 

#localtime{ margin-lift:10px; color:#CCC; } 

</style> 

<body> 

<div id="showtime"> 

<span id="localtime"></span> 

</div> 

<script language="javascript"> 

function showLocale(objD) 

{ 

var str; 

var hh = objD.getHours(); 

var mm = objD.getMinutes(); 

var ss = objD.getSeconds(); 

var month = objD.getMonth()+1;

var date = objD.getDate();

 

if(hh<10)hh='0'+hh; 

if(mm<10)mm='0'+mm; 

if(ss<10)ss='0'+ss; 

if(month<10)month='0'+month;

if(date<10)date = '0' + date;

 

var year = objD.getFullYear();

 

str=year+"年";

str+=month+"-"+date+" "; 

 

 

str+= hh+":"+mm+":"+ss; 

return(str); 

} 

 

function tick() 

{ 

var today; 

today=new Date(); 

document.getElementById("localtime").innerHTML=showLocale(today); 

} 

 

window.setInterval("tick()",1000); 

 

</script> 

</body> 

</html>

 

 

动态时间效果二：倒计时，DD天hh小时mm分钟ss秒

 

 

<!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=gb2312" /> 

<title>电子时钟</title> 

</head> 

<style type="text/css"> 

#showtime{ background:#333; color:#FFF; height:30px; line-height:30px; font-size:12px; textindent:30px; width:250px; border:2px #999 solid; } 

#localtime{ margin-lift:10px; color:#CCC; } 

</style> 

<body> 

<div id="showtime"> 

<span id="localtime"></span> 

</div> 

<script language="javascript"> 

function countDown(ls) 

{ 

   var str;    

 

   var date = parseInt(ls/(24*60*60*1000)) ; ls = ls % 86400000;

   var hh = parseInt(ls/3600000) ; ls = ls % 3600000;

   var mm = parseInt(ls/60000) ; 

   var ss = parseInt(Math.round(ls%60000)/1000);

 

   if(hh<10)hh='0'+hh; 

   if(mm<10)mm='0'+mm; 

   if(ss<10)ss='0'+ss; 

   if(date<10)date = '0' + date;

 

   str="还有:"+date+"天"+hh+"小时"+mm+"分钟"+ss+"秒 结束"; 

   return(str); 

} 

 

function tick() 

{ 

var curTime = (new Date()).getTime(); //采用毫秒形式

var leftTime = endTime-curTime;

 if(leftTime>0){

   document.getElementById("localtime").innerHTML=countDown(leftTime); 

 }else{

   document.getElementById("localtime").innerHTML="已结束"; 

   clearInterval(tm);

 

 }

} 

 

var endTime= 1315140461784; //结束时间

var tm=setInterval(tick,1000);

 

</script> 

</body> 

</html>

 

 

iteye_11097
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端之动态时钟效果
星云随风 倚码为诗
05-22 6266
接下来上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{ background: #000; color: #666; font-size: 12px; .
JavaScript实现页面动态时钟模型
吉帅振博客
06-29 2468
写在前面：实现动态时钟效果可以使用setTimeout()或setInterval()函数。setTimeout(showTime,1000);//在指定的时间(1秒)后,执行showTimesetInterval(showTime,1000);//在指定的时间(1秒)后,调用showTime函数主要代码：//显示时间 定义一个函数(功能) function showTime(){ var ...
Javascript实现动态时钟效果
12-03
本文实例为大家分享了js实现动态时钟效果的具体代码，供大家参考，具体内容如下 1.css代码 <style type="text/css"> #box{ width:200px; height:200px; background:pink; margin:100px auto; line-height:200px; text-align:center; border-radius:50%; box-shadow:0 0 100px pink; color:black; } </style> 2.JS代码 <script
JavaScript的时间动态表现效果
weixin_44848852的博客
09-30 128
效果如下 代码如下： <!DOCTYPE html> <html> <head> <title>Time</title> <style type="text/css"> body { background:#F0FFFF url(wave.jpg) no-repeat fixed center; } .div1 { position: absolute; bottom: 0.3em; } &lt
js实现动态时间
qq_41575219的博客
07-27 384
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body onload="start()"> <span id=...
用js实现时间效果
charlene0824的博客
11-27 466
window.onload=function(){ showTime(); } function format(num){ if(num<10){ num="0"+num; }return num; } function showTime(){ var getD=new Array(); getD[0]="星期日"; getD[1]="星期一"; get
用javascript做动态时钟
qq_41898663的博客
05-07 422
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
基于javascript实现动态时钟效果
10-22
主要为大家详细介绍了基于javascript实现动态时钟效果的相关资料，动态显示系统当前时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现时间表动态效果
10-19
主要为大家详细介绍了JavaScript实现时间表动态效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现行走的时间效果
廖若星辰-LTY
10-22 249
本文主要介绍使用原生 JavaScript 实现页面实时行走的时间效果，效果图如下： 由以上效果图可以看出时间是动态的，是每秒钟进行刷新显示的。那么话不多说，下面直接上源码： 时间：<span id="txt"></span> <script type="text/javascript"> // 页面刷新调用函数启动/刷新时间 showLeftTime() function showLeftTime().
制作一个动态时钟，如图所示：
hjh2018的博客
10-27 601
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191027195918755.png)
js 动态时间特效
zhou316814572的专栏
12-21 564
function showtime() { today=new Date(); var year=today.getYear(); var month=today.getMonth()+1; var day=today.getDate(); var hours = today.getHours(); var minutes = today.getMinutes(); var
javascript特效代码
weixin_34384915的博客
06-04 172
点一下--首页地址添加到收藏夹 　我们都希望自己辛苦制作的主页能够成为网友们的收藏夹中的东东，于是我们不停的用各种方法吸引网友的注意力，大声的告诉他们：“如果你觉得的好，就把我的主页填加到你的收藏夹中吧！”；“按CTRL+D把本站填加进您的收藏夹”…… 其实我们不用那么费力气就可以达到一个更好的效果，呵呵，现在有一段代码，你可以使你通过点击一个连接就把主页地址添入收藏...
前端常见的时间转换方法合集+动态时钟效果实现
i-cat的博客
01-25 6827
如果实现钟表效果-动态实时显示时间？
融入动画技术的交互应用
aasdf245的博客
04-29 488
融入动画技术的交互应用 前言 之前使用过p5.js做一些简单的编程，实现了一些简单的交互，比如画动态的风车、制做画图工具等；这次老师又提出了新的要求，让我们结合《代码本色》至少三个章节的技术来实现融入动画技术的交互应用。课上学过一些力、向量什么的知识，再结合《代码本色》上的粒子系统，我初步决定开发一款游戏，灵感来自以前老手机上玩的直升机小游戏，直升机会受到重力的作用，玩家需要操控直升机上下移动躲避...
js实现页面动态时间，滚动效果（年月日，小时、分钟、秒，星期，毫秒）
sweetllh的博客
04-19 6161
年月日放在一个div里面； 小时、分钟、秒放在一个div里面； 星期放在一个div里面； 毫秒放在一个div里面。 因为它们的时间设置不同或img类不同 html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js制作一个动态页面时间，滚动效果</title> <style type
史上最全的Javascript面试题总结（内附答案）
热门推荐
u011277123的博客
04-17 15万+
原创 IT168企业级 2017-04-13 17:02 近年来，从事JavaScript的程序员越来越多，JavaScript的曝光率也越来越高，如果你想转行试试JavaScript，不妨收下这份面试题及答案，没准用得上。当然，如果针对这些问题，你有更棒的答案，欢迎移步至评论区。 1、什么是JavaScript？（这是基本题，对很多程序员来说也是送分题！） JavaScript是
使用js实现动态时间
m0_46862838的博客
09-08 900
<body onload="actTime()"> <div id="time"></div> <script> function actTime(){ var time ,year,month,day,hour,minutes,seconds,da,weeks,week; setInterval(function(){ time = new Date(); year = time.getFullYear(..
js获取当前时间，并格式化为"yyyy-MM-dd HH:mm:ss"
想到就写点东西的博客
11-29 6805
function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 &
用javascript实现动态时钟
最新发布
04-07
以下是JavaScript实现动态时钟的代码： HTML： ```html <!DOCTYPE html> <html> <head> <title>动态时钟</title> <style> body { background-color: #f1f1f1; } .clock { margin: 50px auto; width: 200px; height: 200px; border-radius: 50%; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); position: relative; } .hour-hand { position: absolute; top: 50%; left: 50%; width: 6px; height: 50px; background-color: black; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: hourAnim 43200s linear infinite; } .minute-hand { position: absolute; top: 50%; left: 50%; width: 4px; height: 80px; background-color: black; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: minuteAnim 3600s linear infinite; } .second-hand { position: absolute; top: 50%; left: 50%; width: 2px; height: 100px; background-color: red; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: secondAnim 60s linear infinite; } @keyframes hourAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes minuteAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes secondAnim { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } .clock-center { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background-color: black; border-radius: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="clock"> <div class="hour-hand"></div> <div class="minute-hand"></div> <div class="second-hand"></div> <div class="clock-center"></div> </div> <script src="clock.js"></script> </body> </html> ``` JavaScript： ```javascript function updateClock() { const now = new Date(); const hour = now.getHours(); const minute = now.getMinutes(); const second = now.getSeconds(); const hourDegree = (hour % 12) * 30 + (minute / 60) * 30; const minuteDegree = minute * 6; const secondDegree = second * 6; document.querySelector(".hour-hand").style.transform = `translateX(-50%) rotate(${hourDegree}deg)`; document.querySelector(".minute-hand").style.transform = `translateX(-50%) rotate(${minuteDegree}deg)`; document.querySelector(".second-hand").style.transform = `translateX(-50%) rotate(${secondDegree}deg)`; } setInterval(updateClock, 1000); ``` 这个代码通过 `setInterval` 方法每秒更新一次时钟， `updateClock` 函数获取当前时间并计算出每个指针应该旋转的角度，然后通过设置 `transform` 属性来旋转指针。其中，时针每小时旋转30度，分针每分钟旋转6度，秒针每秒钟旋转6度。 在HTML文件中，我们定义了一个时钟的容器 `.clock`，并在其中添加了时针、分针、秒针和中心点。每个指针都有自己的类名和CSS样式，也有自己的动画效果。其中，时针的动画总时长为43200秒（12小时），分针的动画总时长为3600秒（1小时），秒针的动画总时长为60秒（1分钟）。这样可以让指针在一定的时间内完成一圈的旋转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值