HTML时钟自练

最新推荐文章于 2022-10-14 15:24:55 发布
最新推荐文章于 2022-10-14 15:24:55 发布
阅读量210 收藏
点赞数 2
分类专栏： 前端 文章标签： HTML 时钟 音乐 换背景
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_h_1122/article/details/97376438
版权
这篇博客展示了如何使用HTML实现一个实时显示当前时间的时钟，并结合JavaScript实现每秒更新时间的功能。同时，博客中还介绍了如何通过下拉菜单切换背景图片以及自动播放音乐的实现方法。
摘要由CSDN通过智能技术生成

实现的功能：

1.获取当前时间；

2.转换背景图片；

3.自动播放音乐。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        #mycolock{
             font-size:-webkit-xxx-large;
            font-style: oblique;
            color:#990066;
            text-align: center;
            padding-top: 6%;
            background-image: url(img/11.jpg);
        }
    </style>
    <body style="background-image: url(img/img1.jpg);">
        <center>
            <font size="7" color="#CCCC">M Y C O L C K</font>
            <br /><br />
        <div style="border: 10px double aqua; width: 400px;height: 400px;" id&

最低0.47元/天 解锁文章
ACE1125
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5时钟代码
JobsLee' Blog
08-23 2321
HTML5智能时钟    您的浏览器不支持canvas标签，请更换浏览器    var clock=document.getElementById('clock');  var cxt=clock.getContext('2d');      function drawClock(){  //清除画布  cxt.clearRect(0,0,500,500);  v
使用JavaScript实现的简单数字时钟 html 源代码
11-14
使用JavaScript实现的简单数字时钟 html 源代码 使用js获取当前时间，提取出当前时间的时分秒，并在页面上显示，增加停止按钮
自定义仪表盘笔记
牛仔面包
05-17 400
参考自：http://blog.csdn.net/vv_bug/article/details/716945621.新建DashboardView类继承View，一些准备工作public class DashboardView extends View{ //弧形开始的角度 private static final int startAngle = 180; //弧面所跨的弧
echarts写仪表盘，指针到不同区域显示不同颜色
weixin_33728708的博客
12-08 3936
2019独角兽企业重金招聘Python工程师标准>>> ...
css3+html5——摆动的钟表
十二tel
06-11 1549
先为大家提供两张钟表和指针的图：（具体大小需要自己下去调）            然后是效果图： 代码如下：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;摆动的钟表&lt;/title&gt; &a
使用html制作时钟
最新发布
gentlevxx的博客
10-14 3034
使用html和js制作动态时钟
自学web前端练手——js的动态时钟
lvshaoshishang的博客
03-07 393
获取当前的时间后每秒时钟也跟着增加一秒，实现动态时钟同步。 效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态时钟</title> <style type="text/css"...
原生js实现，学习练手项目实时时间钟表.7z
10-26
这个项目适合初学者用来提升JavaScript编程技能，通过实际动手来理解如何将时间数据转化为可视化的时钟界面。 【描述】该项目使用纯JavaScript编写，不依赖任何外部库或框架，因此对理解JavaScript核心概念非常有...
好用的Flash时钟
12-25
现在，更多的时钟应用采用HTML5、CSS3和JavaScript来实现，这些技术在现代浏览器中得到了广泛支持，且更适合跨平台应用。 尽管如此，对于那些还在使用Flash的用户来说，"Flash时钟.swf"这个文件仍然具有价值。只需...
JS实现仿IOS时钟
weixin_43212739的博客
10-10 767
JS实现仿IOS时钟 文章目录JS实现仿IOS时钟成果图HTML以及CSS部分JS部分最终效果 最近都在练习一些小Demo，来提高对JS的掌握度，当然这其中也顺便温习了HTML和CSS，今天又花了一些时间仿写了一个IOS时钟，虽然还是在网上找的教程，但还是实现了练手的效果，每天进步一点点吧。 成果图 我这里因为不是放的动图，所以时钟并没有转动，实际效果中是可以获取本地时间并且转动的。 HTM...
修改仪表盘指针的宽度，刻度值数字的大小，仪表盘内刻度显示的数量，仪表盘标题的位置
k912120的博客
08-16 2万+
  1.仪表盘指针的宽度 pointer: { width:3,//指针的宽度 length:"60%", //指针长度，按照半圆半径的百分比 shadowColor : '#ccc', //默认透明 shadowBlur: 5 }, ...
Html5时钟
qq_31976441的博客
03-31 4347
先画时钟的表盘    1.1 画个圆形        在html中画个圆形，要如何画呢？可以用css画，css中有一个border-radius的属性，当div是高和宽一样的正方形时border-radius的值为高或宽的一半时这个div为圆形。同时为了方便定位，我们使用的是绝对定位position:absolute代码如下：&lt;html&gt; &lt;title&gt;Clock&lt;/...
数字时钟设计
老吕的博客
12-08 2万+
设计一个多功能数字时钟，有基本的数字时钟、秒表、闹钟三个功能。
js实现动态数字时钟
weixin_34418883的博客
02-25 817
1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS — 实现简单的数字时钟效果</title> <link rel="stylesheet" type="text/css...
Html纯代码时钟
热门推荐
子渊的博客
04-27 3万+
效果如图所示源代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;canvas clock&lt;/title&gt; &lt;style type="text/css"&gt; div{ text-al
小白都能看懂的html+js动态时钟效果
十分拧巴的白某的技术博客
10-13 1042
不同于其他篇目的是，此次既没有用到三角函数，也没有用到canvas，非常适合自学前端的小白！不过前提是你需要掌握transform、定时器和Date对象。 先来看下效果吧！ 首先是html，代码如下： &lt;div class="wrap"&gt; &lt;ul id="list"&gt;&lt;/ul&gt; &lt;!-- 刻度容器 --&gt; &lt;ul id=&qu
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值