使用HTML绘制电子时钟

最新推荐文章于 2024-04-15 17:16:00 发布
最新推荐文章于 2024-04-15 17:16:00 发布
阅读量2.2k 收藏 6
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libai99ab/article/details/103619878
版权

内容来源：《Javascript特效实战》
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style type="text/css">
     #shizhong{
         margin-left:auto;
         margin-right: auto;
         width:236px;
         height:264px;
         overflow:hidden;
         margin-top:50px;
     }
     h1{

     }

     #riqi{

     }
     h3{

     }
     #yue{

     }
 </style>
    <div id="shizhong">
        <h1>星期<span id="xq">Wednesday</span></h1>
        <h2><span id="riqi">30</span></h2>
        <h3>
            <span id="nian">2008</span><span id="yue">Feb</span>
            <span id="shijian">12:30</span>
        </h3>
    </div>
    <script type="text/javascript">
        //动态地更新时钟的时间
        var mySet=setInterval(function () {
            showLocalTime();
        },1000)
    </script>
</head>
<body>

<script type="text/javascript">
    function  showLocalTime() {
        var now=new Date();//创建一个Date对象
        var year=now.getFullYear();//获取年份
        var month=now.getMonth();//月份
        var date=now.getDate();
        var day=now.getDay();
        var hour=now.getHours();
        var minute=now.getMinutes();
        var second=now.getSeconds();

        var xqObj=document.getElementById("xq");
        var riqiObj=document.getElementById("riqi");
        var nianObj=document.getElementById("nian");
        var yueObj=document.getElementById("yue");
        var shijianObj=document.getElementById("shijian");

        xqObj.innerHTML=day;
        riqiObj.innerHTML=date;
        nianObj.innerHTML=year;
        yueObj.innerHTML=month;
        shijianObj.innerHTML=hour+":"+minute+":"+second;

    }
</script>
</body>
</html>

运行效果图片：
在这里插入图片描述注意：

    <script type="text/javascript">
        //动态地更新时钟的时间
        var mySet=setInterval(function () {
            showLocalTime();
        },1000)
    </script>

上述代码是加载，并动态更新时间的部分；
假若不显示动态的时间变化，只需将上述代码删除，并在标签中加载showLocalTime()函数便可，代码如下：

<body onload="showLocalTime()">
白小岩
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML（2）电子时钟设计（实时获取）
qq_52187093的博客
01-10 591
电子时钟设计
Html5代码实现动态时钟
DICA的SEOer专栏
04-07 4813
该示例使用了HTML5，CSS和JavaScript来创建一个简单的动态时钟。CSS样式用于设置页面的背景颜色，文本颜色，字体大小，字体样式和文本对齐方式。JavaScript代码用于获取当前时间，并将其格式化为HH：MM：SS字符串，然后将其显示在页面上的一个DIV元素中。setInterval函数用于每秒钟调用一次updateTime函数，以便时钟可以动态更新。 该示例使用了HTML5的canvas元素和JavaScript来创建一个动态时钟表盘。
HTML简单电子时钟
最新发布
2301_77335001的博客
04-15 425
【代码】HTML简单电子时钟。
用html实现电子时钟
PinG1270的博客
11-24 3770
如何实现电子时钟 ###了解动画 在实现电子时钟前一定要了解动画的基础知识，这样写一个电子时钟那就是水到渠成 animation-name：；创建动画名 @keyframes：创建动画，创建关键帧 动画内部使用百分比设置关键帧，每个关键帧中都要设置一个相同的样式 @keyframes move{ 0%{}动画开始的状态 100%{}动画结束状态 注意：初始状态和结束状态的属性一定要保持一致，否则，不能实现动画效果 } animation-duration：；设置动画的持续时间，单位：秒/s animatio
HTML+CSS+JavaScript实现电子时钟（数字换成图片）
zg0601的博客
12-02 2515
使用HTML+CSS+JavaScript实现简易电子时钟，时钟的数字用数字图片代替，效果美观。
简单的电子时钟 web前端开发 HTML5 JavaScript css
阿博的博客
09-23 3605
代码与注释如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>简单电子时钟的设计与实现</title> <style> #clock{ width:800px; font-size:80px; font-weight:bold; color:red; text-align:cen...
微信小程序使用canvas绘制实现时钟
11-01
接下来定义`drawClock`方法，用于在canvas上绘制时钟： ```javascript drawClock() { const ctx = this.data.ctx; const now = new Date(); // 清除画布 ctx.clearRect(0, 0, 300, 300); // 绘制时钟圆盘 ...
HTML5 超级炫酷电子时钟
02-01
在这个电子时钟项目中，Canvas被用来绘制时钟的指针和数字，以及任何可能的背景或装饰元素。开发者可以精确控制每个元素的位置、颜色和形状，从而实现炫酷的视觉效果。 2. **JavaScript**: JavaScript是实现电子...
html5数字时钟_html5电子时钟_html5时钟效果代码
11-10
为了实现数字时钟的实时更新，开发者通常会使用`setInterval`函数，每隔一定时间（如1秒）调用一个函数来更新画布上的时间显示。这确保了时钟始终与系统时间同步。 5. **样式和动画**： HTML5数字时钟还可以通过...
基于HTML5的电子时钟
10-09
"基于HTML5的电子时钟"是一个利用HTML5技术实现的实时显示时间的网页应用。这个项目通常会结合HTML、CSS和JavaScript这三种技术来完成。下面我们将深入探讨这些知识点。 首先，HTML（超文本标记语言）是构建网页的...
java_clock.rar_电子时钟显示
09-22
2. **练习73电子钟.doc**：这可能是一个项目文档或指导，详细解释了电子时钟的设计和实现过程，包括可能的算法和逻辑。 3. **JDClock.html**：这是HTML文件，用于在Web浏览器中加载和运行Applet。它包含了必要的`...
使用js实现的获取当前详细日期时间信息的数字时钟 html 源代码
11-14
使用js实现的获取当前详细日期时间信息的数字时钟 html 源代码
HTML & CSS & JavaScript - 一个简单数字时钟
qq_29761395的博客
07-15 2942
代码】HTML&CSS&JavaScript-一个简单数字时钟。
HTML+JS实现简单的时钟效果
sanmu_1的博客
08-26 2822
前言:想要实现时钟效果,关键就是要使用setTimeout()方法和clearTimeout()方法   首先搞清楚setTimeout()方法和clearTimeout()方法的用法: setTimeout()方法见名知意,就是设置时间跳出,用于在指定的毫秒数后调用函数或计算表达式,有两个参数,第一个参数是要执行的函数或表达式,第二个参数是多少毫秒后执行,只会调用一次。针对时钟效果,我们就...
Html 5 版 电子时钟
weixin_30896763的博客
09-25 426
效果图： html 5 canvas元素 　　Html 5的canvas元素可以用于在网页上绘制图形[即canvas的作用]。 　　canvas画布使用JavaScript在网页上绘制图形 　　其拥有绘制各种路径，矩形，圆，字符以及添加图像的方法。 　　（1）在body中创建canvas元素 <canvas id="panel" width="500" height="...
HTML5 时钟
wuyunhao 博客
05-23 1309
这几天写HTML5作业，做网页做恶心了闲暇时间做了个时钟玩玩，代码需要的可以自取，不能说有多么精妙，但只有不断进步才是最好。&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt;&lt;/head&gt;&lt;body&gt; &lt;canvas id="canvas"
HTML+JS实现时钟
IT学长
04-01 7924
HTML+JS实现时钟 效果： 知识点： Canvas 对象及其属性。 setTimeout() 方法，用于在指定的毫秒数后调用函数或计算表达式。 Date()对象 时分秒对应弧度制的计算： var pi=Math.PI var dat=new Date() var hours=dat.getHours() //获取小时 var minuntes=dat...
用HTML5绘制一个时钟
qq_42769197的博客
09-27 2048
JS代码 var canvas; function clock() { //canvas = document.createElement('canvas'); canvas = document.getElementById("diagonal"); canvas.width=400; canvas.height=400; var ctx = canvas.getContext('...
HTML5使用canvas绘制警示牌
03-26
下面是使用canvas绘制警示牌的基本步骤： 1. 创建canvas元素： 在HTML文件中，使用`<canvas>`标签创建一个canvas元素，并设置宽度和高度。 ```html <canvas id="myCanvas" width="400" height="200"></canvas> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值