在网页上显示一个钟表

最新推荐文章于 2023-12-09 11:08:42 发布
最新推荐文章于 2023-12-09 11:08:42 发布
阅读量154 收藏
点赞数
原文链接：http://www.cnblogs.com/Knowledge-wealth/p/5788098.html
版权


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JavaScript教程</title>

<script>

function startTime()

{

　　var today=new Date();

　　var h=today.getHours();

　　var m=today.getMinutes();

　　var s=today.getSeconds();

　　m=checkTime(m);

　　s=checkTime(s);

　　var time=document.getElementById('txt');

　　time.innerHTML=h+":"+m+":"+s;

　　t=setTimeout('startTime()',500);

}

function checkTime(i)

{

　　if(i<10)

　　{ i="0"+i; }

　　return i;

}

</script>

</head>

<body οnlοad="startTime()">

<div id="txt"></div>

</body>

</html>

效果截图如下：

 

转载于:https://www.cnblogs.com/Knowledge-wealth/p/5788098.html

dengdao265539
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现在页面中显示数字时钟
聂小邯
06-29 1671
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>數字时钟</title> <style type="text/css"> #inner{ width: 300px; height: 50px; ...
如何在网页上显示一个钟表
07-19
如何在网页上显示一个钟表
指针式时钟：绝对酷的指针式时钟，与真正的时钟非常相似
shulei521的专栏
10-05 1339
把如下代码加入区域中fCol = 000000; //face colour.sCol = ff0000; //seconds colour.mCol = 000000; //minutes colour.hCol = 000000; //hours colour.H = ....;H = H.split();M = .....;M = M.split();S =
JavaScript 在页面上显示数字时钟
weixin_30306905的博客
10-28 264
显示一个钟表 拓展JavaScript计时：http://www.w3school.com.cn/js/js_timing.asp setTimeout() 方法会返回某个值。在下面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。 setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能...
ASP.NET MVC-- 在网页上显示一个时钟
feihu19851111的专栏
05-29 1905
html> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers m=checkTime(m) s=checkTime(s)
javascript动态显示钟表
10-12
### JavaScript动态显示钟表知识点详解 #### 一、概述 在网页开发中，有时我们需要为用户提供实时的时间显示功能，比如动态显示当前时间的钟表。本文将详细介绍如何使用JavaScript（简称JS）来实现一个简单的动态...
基于HBuilder的xml网页钟表
09-30
XML网页钟表的实现原理可能是这样的：开发者首先在XML文件中定义好钟表的结构，包括小时、分钟和秒的元素，每个元素可能包含一个特定的ID或者类名以便于JavaScript进行操作。接着，JavaScript会获取当前系统时间，...
HTML5+css3钟表网页特效
11-24
在“HTML5+CSS3钟表网页特效”这个主题中，我们将深入探讨如何利用这两项技术来实现一个实时显示时间的钟表界面。 HTML5作为最新的超文本标记语言版本，引入了许多新的元素和特性，旨在简化网页结构并增强其功能。...
一个js做的钟表，酷哦
09-30
在这个项目中，“一个js做的钟表”实际上是一个使用JavaScript编写的动态时钟，它能够跟随鼠标的移动而变化，为用户带来独特的交互体验。这种酷炫的效果在网页设计中常用来增加用户的互动性和趣味性。 首先，我们来...
HTML网页数字时钟代码.rar
12-07
居中的数字时钟，电子时钟样式，包含年月日时分秒。
【JS】javascript实现页面显示数字时钟
~yzzheng～的博客
06-26 2966
js实现页面时钟效果 function showTime() { var show_day = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'); var time = new Date(); var year = time.getYear(); if (year &lt; 1000) { ...
实现一个简单的网页时钟效果
weixin_54043141的博客
08-21 2576
将上述 HTML、CSS 和 JavaScript 代码组合在一起，将获得一个简单但实用的网页时钟效果。在浏览器中打开这个页面，将看到一个时钟，它会以一秒钟的间隔实时更新。通过这个案例，可以学会如何使用 HTML、CSS 和 JavaScript 来创建一个简单的交互式网页时钟。这是一个展示前端技能和实现基本交互性的很好的示例。可以根据这个案例进一步探索更复杂的前端开发，以及如何将各种技术组合起来创造出更丰富的网页体验。
JS — 实现简单的数字时钟
weixin_34174105的博客
11-16 425
js实现简单的数字时钟 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS — 实现简单的数字时钟效果</title> 6 <link rel="stylesheet" typ...
JavaScript完成电子时钟
qiuqiule6的博客
12-09 1535
在该段代码中首先使用了JavaScript中的Date对象获取当前时间的时分秒具体数值，为确保每次均显示成两位数的效果，分别判断当前时分秒是否小于10，如果比10小则在前面加一个数字0，然后将修改后的数值使用innerHTML属性显示到对应的时间显示框中。由图1-3可见，时钟显示的内容动态变化的功能已实现，图(a)和图(b)已经把电子时钟的样式动态变化展示出来了。至此，电子时钟的制作已经全部完成。该段代码为3个显示框定义了相同的类名称box1，以便在css样式表中可以使用类选择器为其设置统一样式。
HTML页面显示时间——网页数字时钟、钟表
热门推荐
cnds123的专栏
09-02 4万+
一个HTML网页上动态显示系统时间——网页数字时钟、钟表，本文从简单到复杂给出一些例子。
js实现时钟
hsn0755的专栏
12-26 594
function startTime(){var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbersm=checkTime(m)s=checkTime(s)document.getElementById(txt
JS实现网页动态时钟
捷搜索
10-31 1094
问题 我们时常在网页上能看到动态的时间显示，那么是如何实现的呢？ 解决方案 原理是利用js的定时效果，每隔0.5s调用一次获取时间的函数，然后进行渲染到需要放置的地方。代码如下： 示例代码请浏览：JS实现网页动态时钟  ...
仿羊了个羊/王了个王带后台三消游戏源码
最新发布
08-10
仿羊了个羊、王了个王带后台三消游戏源码，游戏玩儿法类似于养了个羊，有两种模式，一个是普通版，一个是王者荣耀版。
在网页上用javascript写一个圆形钟表，并显示实时时间
04-18
好的，下面是实现该功能的代码： ``` <html> <head> <script> function drawClock() { var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.beginPath(); ctx.arc(radius, radius, radius-10, 0, 2*Math.PI); ctx.fillStyle = "white"; ctx.fill(); ctx.lineWidth = 5; ctx.stroke(); ctx.beginPath(); ctx.arc(radius, radius, 10, 0, 2*Math.PI); ctx.fillStyle = "black"; ctx.fill(); var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); // Draw hour hand ctx.lineWidth = 7; ctx.strokeStyle = "black"; ctx.beginPath(); var angle = Math.PI / 6 * hour + Math.PI / 360 * minute; var x = radius + (radius-40) * Math.cos(angle); var y = radius + (radius-40) * Math.sin(angle); ctx.moveTo(radius, radius); ctx.lineTo(x, y); ctx.stroke(); // Draw minute hand ctx.lineWidth = 5; ctx.strokeStyle = "black"; ctx.beginPath(); angle = Math.PI / 30 * minute + Math.PI / 1800 * second; x = radius + (radius-20) * Math.cos(angle); y = radius + (radius-20) * Math.sin(angle); ctx.moveTo(radius, radius); ctx.lineTo(x, y); ctx.stroke(); // Draw second hand ctx.lineWidth = 3; ctx.strokeStyle = "red"; ctx.beginPath(); angle = Math.PI / 30 * second; x = radius + (radius-10) * Math.cos(angle); y = radius + (radius-10) * Math.sin(angle); ctx.moveTo(radius, radius); ctx.lineTo(x, y); ctx.stroke(); setTimeout(drawClock, 1000); } window.onload = function() { drawClock(); } </script> </head> <body> <canvas id="clock" width="200" height="200"></canvas> </body> </html> ``` 解释一下代码： - 首先创建一个 `canvas` 元素，并给它一个 `id` 为 `clock`。 - 在 `window.onload` 事件中调用 `drawClock` 函数，以便在页面加载完毕后开始绘制钟表。 - `drawClock` 函数主要分为以下几个部分： - 通过 `document.getElementById` 获取 `canvas` 元素以及上下文对象 `ctx`。 - 计算钟表半径 `radius`。 - 绘制钟表的外圆和中心点。 - 获取当前时间，并计算时、分、秒对应的角度。 - 绘制时针、分针、秒针。其中时针的角度需要加上分钟的偏移量，分针的角度需要加上秒钟的偏移量。 - 调用 `setTimeout` 函数，每隔一秒钟重新绘制钟表。 注意，为了减少 CPU 的占用率，这里使用了 `setTimeout` 函数的轮询方式来重复绘制钟表。如果需要更加精确地显示时间，可以使用 `requestAnimationFrame` 函数来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值