JavaScript实现动态网页时钟

本文实例为大家分享了JavaScript实现动态网页时钟的具体代码,供大家参考,具体内容如下

设计思路:

1先建立一个数组保存带有0〜9数字的10张图片;

2.通过GETDATE()获得本地时间保存在变量数值指明MyTime中;

3. getHours()返回的是24进制即0~23的整数,getMinutes()方法返回一个处于0到59之间的整数,getSeconds()方法返回一个处于0到59之间的整数;

4.通过的setTimeout()每隔1秒调用一次显示()函数改变图像对象的SRC属性。

串对象的的charAt(ID)方法:返回指定位置处的字符,标识为要寻找的字符的位置的索引整数,0对应左边第1个字符,1对应左边第2个字符,如喂的的charAt(1 )则是è;

代码如下:

<html>
<head>
<title>时钟</title>
<meta charset="utf-8">
<style>
*{
    padding:0;
    margin:0;
    }
</style>
<script>
function show(){
    var images=new Array("./images/s0.png","./images/s1.png","./images/s2.png","./images/s3.png","./images/s4.png","./images/s5.png","./images/s6.png","./images/s7.png","./images/s8.png","./images/s9.png");
    var myTime=new Date();
    var hours=myTime.getHours();
    var minutes=myTime.getMinutes();
    var seconds=myTime.getSeconds();
    if(hours<=9){hours="0"+hours;}//补足两位
    if(minutes<=9){minutes="0"+minutes;}
    if(seconds<=9){seconds="0"+seconds}
    var theString=""+hours+minutes+seconds;//转换为字符串
    document.getElementById("img0").src=images[theString.charAt(0)];
    document.getElementById("img1").src=images[theString.charAt(1)];
    document.getElementById("img2").src=images[theString.charAt(2)];
    document.getElementById("img3").src=images[theString.charAt(3)];
    document.getElementById("img4").src=images[theString.charAt(4)];
    document.getElementById("img5").src=images[theString.charAt(5)];
    setTimeout("show()",1000);
    }
</script>
</head>
<body onLoad="show()">
<img id="img0" /><img id="img1" />时<img id="img2" /><img id="img3" />分<img id="img4" /><img id="img5" />
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-06-19

JavaScript实现抖音罗盘时钟

本文实例为大家分享了JavaScript实现抖音罗盘时钟的具体代码,供大家参考,具体内容如下 其实很早以前就想发了,很多东西其实并不难,只要多动手动脑就行了,下面直接上代码,其他的自己下去慢慢研究吧! HTML部分代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co

Javascript实现动态时钟效果

本文实例为大家分享了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; }

html5 canvas js(数字时钟)实例代码

复制代码 代码如下: <!doctype html><html>    <head>        <title>canvas dClock</title>    </head>    <body>        <canvas id = "clock" width = "500px" height = "200px">            您的浏览

js实现一个简单的数字时钟效果

效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8

五步轻松实现JavaScript HTML时钟效果

学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~)  接下来,我们用5步来制作它 step1.准备HTML 首先,我们需要准备HTML结构,背景.表盘.指针(时针.分针.秒针).数字. <div id="clock"> <div class="bg"> <div class="p

js时钟翻牌效果实现代码分享

先给大家上运行效果图,看看是不是特别棒! 这一张是小编抓拍时钟翻牌时的效果图: 为大家分享的JavaScript时钟翻牌效果代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create an Animated Flip Down Clock</title> <link rel=&quo

一个简易时钟效果js实现代码

本文实例为大家分享了js时钟特效 的具体代码,供大家参考,具体内容如下 js代码 var canvas = document.getElementById("clock"); var clock = canvas.getContext("2d"); function zhong() { clock.save(); //开始画外层圆 clock.translate(200, 200); clock.strokeStyle = 'black'; clock.lineWi

基于javascript实现动态时钟效果

本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

JavaScript实现简单的时钟实例代码

复制代码 代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() {        document.getElementById("time").innerHTML = new Date().toTimeString();    } setInterval(displayTime,1000);      // 每隔1秒钟调用dis

javascript入门&#183;动态的时钟,显示完整的一些方法,新年倒计时

时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800

JavaScript实现动态添加Form表单元素的方法示例

本文实例讲述了JavaScript实现动态添加Form表单元素的方法.分享给大家供大家参考,具体如下: 之前写过类似的文章(如:javascript实现的动态添加表单元素input,button等),现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNo

javascript实现动态表头及表列的展现方法

本文实例讲述了javascript实现动态表头及表列的展现方法.分享给大家供大家参考.具体如下: <!-- 作者:恺哥 时间:2008-11-5 用途:测试动态表头与动态表列的展现 --> <html> <head> <title>test</title> </head> <body> <script language="javascript"> //初始化表列 var t_column =

当标题不能显示完整的解决方法

其实建议用css控制超出隐藏显示 也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的.我想很多网站都遇到这样的情况.为了视觉效果不得不进行截字显示以满足网站的整体视觉效果.通常我们采用截字的方法是两种,一种是通过后台输出时来事先设定一定的字符数量.另一种是通过CSS或是JS来对已经输出的完整的内容进行视觉剪截. 在网页标准没有兴起的时候基本上是采用第一种方式来解决这个问题,直到现在这种方式依然被广泛地使用着.这种方式的好处就是可以准确的剪截字数,而不足可能就是因为剪截的工作在后

javascript full screen 全屏显示页面元素的方法

一种最简单的方式,就是动态改变你想要全屏显示的部件的style,例如position变成absolute,height和width都设置成窗口大小,并且把背景颜色改成全白(为了遮住页面上其余的元素).这样网页上就只能看到你要突出的部件了,视觉上就等同于全屏.同时利用javascript监听键盘事件,一旦用户按了ESc退出键,就恢复原来的样子.部分代码如下: 复制代码 代码如下: document.onkeydown = function (event) {        var e = even

javascript入门&#183;对象属性方法大总结

今天是我们js入门系列演示的最后一节了(暂时我是这样计划的),但是请朋友们记住,前面的实例你都很熟悉了的话也不代表我们就懂了JS,甚至连入门我们都不得不承认我们只是站在门槛上,还没有进去呢,那你可能要问,为什么要匆匆结束呢?答案很简单,我们的最终目标是AJAX/Atlas,在以后的入门教程中我们还会接触大量的JS的东西,而我这个懒人繁冗的注释一定不会让你失望的,所以更多JS我们以后继续学习,下面我们必须把JS最重要的东西--<对象>的方法和属性都熟悉下,因为这可是非常重要的,而这篇Post你大

javascript实现动态时钟的启动和停止

javascript实现动态时钟的启动和停止,点击开始按钮,获取当前时间,点击停止按钮,时间停止 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态时钟的启动和停止</title> </head> <body background="img/2.jpg" style="background-re

Java实现的动态数字时钟功能示例【显示世界时间】

本文实例讲述了Java实现的动态数字时钟功能.分享给大家供大家参考,具体如下: 构建: 1. Clock继承 JFrame 为运行页面 2. ClockText 测试类 创建 Clock 对象 运行效果: 具体实现: 一.Clock类  四个JPnal 三个放时间 最后一个放日期 放时间的三个JPnal 分别加入 地点 时间 按钮 最后一个按钮添加日期 具体实现如下: public class Clock extends JFrame { private JPanel jPanelBeijing

理解Javascript文件动态加载

Javascript文件动态加载一直是比较困扰的一件事情,像网络上传的比较常见的做法: function loadjs(fileurl){ var sct = document.createElement("script"); sct.src = fileurl; document.head.appendChild(sct); } 然后我们来测试一下结果: <html> <head> <link rel="stylesheet" typ

JavaScript学习小结(一)——JavaScript入门基础

一.JavaScript语言特点 1.1.JavaScript是基于对象和事件驱动的(动态的) 它可以直接对用户或客户输入做出响应,无须经过Web服务程序.它对用户的响应,是采用以事件驱动的方式进行的.所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为"事件".比如按下鼠标,移动窗口,选择菜单等都可以视为事件.当事件发生后,可能会引起相应的事件响应. 1.2.JavaScript是跨平台的 JavaScript是依赖于浏览器本身的,与操作系统无关. 二.JavaScript