javascript 定时器 实现时间自动更新的特效

最新推荐文章于 2021-04-13 20:06:39 发布
最新推荐文章于 2021-04-13 20:06:39 发布
阅读量136 收藏
点赞数
文章标签： javascript xhtml java ViewUI
图片自己找几个替换下就OK了!
Java代码 收藏代码
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <style>
  7. img{padding:0;margin:0;}
  8. </style>
  9. <scripttype="text/javascript">
  11. window.οnlοad=function(){
  12. varnum=null;
  13. varaImg=document.getElementsByTagName("img");
  16. functiontoDouble(num){
  17. returnnum<10?"0"+num:""+num;
  18. }
  20. functionfnTime(){
  21. vardate=newDate();
  22. varyear=date.getFullYear();
  23. varmonth=date.getMonth()+1;
  24. varday=date.getDate();
  25. varhours=date.getHours();
  26. varminutes=date.getMinutes();
  27. varseconds=date.getSeconds();
  29. vartime=toDouble(year)+toDouble(month)+toDouble(day)+toDouble(hours)+toDouble(minutes)+toDouble(seconds);
  32. for(vari=0,length=time.length;i<length;i++){
  33. aImg[i].src="images/"+time.charAt(i)+".gif";
  34. }
  35. }
  36. setInterval(fnTime,1000);
  37. fnTime();
  38. }
  40. </script>
  41. </head>
  43. <body>
  45. <divid="time">
  46. <imgsrc=images/0.gif/><imgsrc=images/0.gif/><imgsrc=images/0.gif/><imgsrc=images/0.gif/>年
  47. <imgsrc=images/0.gif/><imgsrc=images/0.gif/>月
  48. <imgsrc=images/0.gif/><imgsrc=images/0.gif/>日
  49. <imgsrc=images/0.gif/><imgsrc=images/0.gif/>时
  50. <imgsrc=images/0.gif/><imgsrc=images/0.gif/>分
  51. <imgsrc=images/0.gif/><imgsrc=images/0.gif/>秒
  52. </div>
  53. </body>
  54. </html>


Java代码 收藏代码
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <style>
  7. img{padding:0;margin:0;}
  8. </style>
  9. <scripttype="text/javascript">
  11. window.οnlοad=function(){
  12. varnum=null;
  13. varpic="";
  14. varoSpan=document.getElementsByTagName("span")[0];
  15. for(vari=0;i<4;i++){
  16. num=Math.floor(Math.random()*10);
  17. pic+="<imgsrc=images/"+num+".gif/>";
  18. }
  19. oSpan.innerHTML=pic;//alert(oSpan.innerHTML);
  21. functiontoDouble(num){
  22. returnnum<10?"0"+num:""+num;
  23. }
  26. functionfnTime(){
  27. vardate=newDate();
  28. varyear=date.getFullYear();
  29. varmonth=date.getMonth()+1;
  30. varday=date.getDate();
  31. varhours=date.getHours();
  32. varminutes=date.getMinutes();
  33. varseconds=date.getSeconds();
  35. vararrTime=[toDouble(year),"年",toDouble(month),"月",toDouble(day),"日",
  36. toDouble(hours),"时",toDouble(minutes),"分",toDouble(seconds),"秒"];
  38. pic="";
  39. varindex=null;
  40. for(vari=0;i<arrTime.length;i++){
  41. index=arrTime[i];
  42. if(isNaN(index)){
  43. pic+=index;
  44. }else{
  45. for(varn=0;n<index.length;n++){
  46. pic+="<imgsrc=images/"+index.charAt(n)+".gif/>";
  47. }
  48. }
  49. }
  50. varoSpan=document.getElementById("time");
  51. oSpan.innerHTML=pic;
  52. }
  53. setInterval(fnTime,1000);
  54. fnTime();
  55. }
  58. </script>
  59. </head>
  61. <body>
  63. <inputtype="text"value=""/><span></span><br/><spanid="time"></span>
  64. </body>
  65. </html>
不讲理的胖子
关注
js简单获取今天日期，星期，此时时间，并自动更新
m0_71491195的博客
08-01 893
js获取今天日期，星期，此时时间，并自动更新。
javascript实现自动输出文本（打字特效）
11-23
在本文中，我们将探讨如何使用JavaScript实现自动输出文本，即所谓的“打字特效”，它模拟了人类打字的过程，为网页增添了一种引人入胜的视觉效果。 首先，我们可以看到在描述中提到了`setTimeout()`、递归和`...
js 实现时间递增,当前时间功能
qishinihenhao的专栏
02-26 2826
直接上代码：  function nowTimeStr() {                         var date = new Date();                         var year = date.getFullYear();                         var month = date.getMonth() + 1;         ...
使用js实现时钟效果
少年休闲海
01-16 4441
首先在单元格中输入下面的代码，然后使用html显示内容。 这个宽高可以根据自己需要填。 然后在预览方式中添加加载结束事件： var dom=document.getElementById("view"); var ctx=dom.getContext("2d"); var width=ctx.canvas.width; var height=ctx.canvas.height; va
初探js特效魅力之定时器的使用one
13东倍
10-07 874
初探js特效魅力之简易时钟的使用one http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> js特效 -->    window.onload=function(){   function toD(n){    if(n     return
javascript实现图片自动和可控的轮播切换特效
10-24
在本篇文章中，我们主要探讨了如何使用JavaScript来实现一个图片自动和可控的轮播切换特效。轮播图是一种非常流行的网页元素，常用于展示一系列的图片或内容，使得用户能够在有限的空间里浏览更多的信息。本文提供的...
jquery实现定时自动轮播特效
10-23
综上所述，通过jQuery实现定时自动轮播特效的关键在于使用`setInterval()`设置定时器，并在定时器回调函数中处理图片的切换逻辑。同时，合理的CSS布局与样式设计能够确保轮播图在视觉上的效果与用户体验。如果你对...
基于jQuery实现照片墙自动播放特效
11-29
综上所述，这个基于jQuery的照片墙特效实现了动态加载、自动播放和动画展示的功能，通过良好的前端设计和编程技巧，为用户提供了一种引人入胜的用户体验。在实际项目中，可以根据需求调整图片获取频率、动画速度和...
javascript网页特效生成器 跑马灯,变换背景 文字特效 日期和时间 窗口特效 其他特效.zip
01-29
JavaScript可以通过定时器（setTimeout或setInterval）来控制内容的自动切换，同时结合CSS实现平滑过渡，增加用户体验。 2. **变换背景（Background Transitions）**：利用JavaScript可以改变元素的背景颜色、图像...
JS获取当前时间并且实时刷新
KobeNo_1的博客
04-13 924
JS获取当前时间并且实时刷新 代码： $(function () { setInterval(“getTime();”, 1000); //每隔一秒执行一次 }) //取得系统当前时间 function getTime() { var myDate = new Date(); var date = myDate.toLocaleDateString(); var hours = myDate.getHours(); var minutes = myDate.getMinutes(); var seconds
javascript中date对象,Date对象,时钟案列,setInterval,setTimeout,定时器
程宇寒
12-11 638
javascript中date对象,Date对象,时钟案列,setInterval,setTimeout,定时器 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;javascript中date对象,Date对象,时钟案列,setInterval,setTimeou...
jsp页面实现自动刷新的时钟
Gqiangqiang的博客
10-10 4839
在jsp的显示页面做一个可以自动刷新的时钟， 就是把需要的数据都获取到之后进行拼接，拼接成你想要的格式就可以 &lt;script type="text/javascript" src="${path }/js/jquery.1.7.js"&gt;&lt;/script&gt; //导入jQuery &lt;script type="text/javascript"&gt; ..
js制作12进制的时钟特效
JackieDYH的博客
03-25 7475
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>制作12进制的时钟特效</title> </head> <body> <div id="myclock"></div> ...
js 定时器，自动实时更新时间
小王先森的代码笔记
11-18 2183
window.setInterval("changetime()", 1000); function changetime() { var time = new Date(); document.getElementById("showdate").innerHTML = time; ...
跑马灯效果——this的使用和计时器
Scrow1204的博客
09-21 460
注意： 1.VM机制，加载完页面后还持续监听data数据，一旦改变随之改变。是本地改变页面的基础，也是这个框架优点 2.了解在此机制中，在VM实例中，如果想要获取data中的数据，或者调用methods中的方法，要使用this关键字实现 3.ES6不是idea的默认规范，要调整。 HTML代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; ...
JavaScript中实现时钟效果
ab_dk的博客
03-24 794
利用Math和定时器实现时钟效果 思路：首先创建一个获取年、月、日、星期、小时、分钟、秒的函数，这里需要注意两点 1.JavaScript中的月份是 从0开始的，所以要在月份上加1，能够得到正确的月份 2.JavaScript中规定获取星期的结果是0-6的数值，0表示星期日，1表示星期一…6表示星期六 在这里我们要将获得的星期数转化为汉字： 定义一个数组，其中的数据内容为var arr = ['日...
如何使用js实现电子时钟功能
蒋伟平的博客
03-28 6662
电子时钟是网上常见的功能，在学习date对象和定时器功能时，来完成一个电子时钟的制作是不错的选择。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。 先准备一个html元素，用来放置时钟。新建一个div元素，它的id命名为clock，如下所示： <div id="clock" class="clock_con"></div><...
原生JavaScript实现轮播图特效教程与代码
- **定时器**: 使用`setTimeout()`或`setInterval()`函数设置定时器，让图片或其他内容在固定时间间隔后自动切换，这是实现自动轮播的关键。 - **事件监听**: 监听用户的交互行为（如点击事件），根据用户的行为来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值