在js中用图片显示当前时间

最新推荐文章于 2024-04-29 10:35:43 发布
最新推荐文章于 2024-04-29 10:35:43 发布
阅读量3.5k 收藏 9
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44436093/article/details/86571478
版权

在js中用图片显示当前时间

        <!DOCTYPE html>
       <html lang="en">
     <head>
     <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
	div{margin:100px auto;width: 350px;}
</style>
</head>
<body>
<div>
		<img src="images/0.png" id="img1">
		<img src="images/0.png" id="img2">
		<img src="images/second1.png" >
		<img src="images/0.png" id="img3">
		<img src="images/0.png" id="img4">
		<img src="images/second1.png" >
		<img src="images/0.png" id="img5">
		<img src="images/0.png" id="img6">
</div>
<script type="text/javascript">
	//获取图片id
	var images1=document.getElementById('img1');
	var images2=document.getElementById('img2');
	var images3=document.getElementById('img3');
	var images4=document.getElementById('img4');
	var images5=document.getElementById('img5');
	var images6=document.getElementById('img6');
	function showTime(){
	//获取当前时间
	var date=new Date;
	var hours=date.getHours();
	var minutes=date.getMinutes();
	var seconds=date.getSeconds();
	//将小时拆分
	var q=parseInt(hours/10);
	var w=hours%10;
	//将图片加入拆分的时间里
	images1.src='images'+'/'+q+'.'+'png';
	images2.src='images'+'/'+w+'.'+'png';
	//拆分分钟
	var e=parseInt(minutes/10);
	var r=minutes%10;
	//将图片加入拆分的时间里
	images3.src='images'+'/'+e+'.'+'png';
	images4.src='images'+'/'+r+'.'+'png';
	//拆分秒
	var t=parseInt(seconds/10);
	var y=seconds%10;
	//将图片加入拆分的时间里
    images5.src='images'+'/'+t+'.'+'png';
    images6.src='images'+'/'+y+'.'+'png';
      }
      //调用第一次
     showTime();
    //每隔一秒调用一次
      setInterval(showTime,1000);
</script>
</body>
</html>

网页中所显示：

未来可见
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JS在图片上显示时间
12-16
纯JS写的，能在图片上显示时间。学WEB开发的可以拿去看看
Js实现图片做的实时时钟
进击的葱
12-17 1008
描述： 将下图作为时间的背景，实现随时时钟的效果。 效果： 代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style
在HTML中使用JavaScript实时显示当前日期和时间（结尾完整例程）
最新发布
weixin_67244432的博客
04-29 2868
在Web开发中，经常需要在网页上显示当前的日期和时间。HTML本身并不具备这样的动态功能，但我们可以借助JavaScript来实现。JavaScript是一种常用的前端脚本语言，它可以轻松地获取系统时间，并将其插入到HTML元素中。现在，当您打开这个HTML页面时，它将实时显示当前的日期和时间，并且每秒都会自动更新。的JavaScript文件，并编写用于获取和格式化当前日期时间的函数。首先，我们创建一个HTML文件，并在其中添加一个用于显示日期和时间的。函数，以便实时更新显示的日期时间。
js用图片显示现在时间
Amily_an的博客
01-13 1047
js用图片显示现在时间 话不多说，直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用图片显示现在时间</title> <link rel="stylesheet" href="css/index.css"/> ...
利用JS在网页上动态的显示当前的时间
weixin_75141231的博客
06-03 3258
【代码】利用JS在网页上动态的显示当前的时间。
js实现动态的图片时钟
hugejihu9的专栏
10-10 4898
实现代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;title&gt;Examples&amp
JavaScript 广告图片轮播 JS
04-24
在提供的文件列表中，`test.html`应该是包含了HTML结构和JavaScript引用的页面，`1.jpg`、`2.jpg`、`3.jpg`是轮播中用到的图片，而`cycle_image.js`则包含了实现轮播功能的JavaScript代码。通过分析`cycle_image.js`...
原生JavaScript数字时钟-内含29种样式
01-14
首先，一个数字时钟的核心是JavaScript的Date对象，它提供了获取当前时间的功能。你可以通过`new Date()`创建一个新的Date实例，然后通过`getDate()`, `getHours()`, `getMinutes()`, `getSeconds()`等方法获取日期...
JavaScript实现轮播图方法一
04-20
此外，可能还会有一些额外的CSS类，比如隐藏当前不显示的图片的类（如"display-none"），以及激活状态的类（如"display-block"），这些类会在JavaScript中用来控制每个幻灯片的显示状态。 然后，JavaScript是实现...
《JavaScript实例精通》[源代码]
09-21
5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示日期。 5_6.htm 标题栏显示时间。 5_7.htm 不同时间的不同问候。 第6章（\6） 示例描述...
js定时间转换图片
05-17
js定时间转换图片
js获取图片修改时间
05-01
NULL 博文链接：https://704378737-qq-com.iteye.com/blog/2404219
js实现图片实时时钟
11-21
本文实例为大家分享了js实现图片实时时钟的具体代码，供大家参考，具体内容如下 描述： 将下图作为时间的背景，实现随时时钟的效果。 效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div div { float: left; width: 30px; font-size: 120px; } #hours0,#hours1,#minute0,#minute1,#second0,#second1 {
JavaScript实例精通
01-11
5_2.htm 分别获取当前时间的年月日时分秒。 5_3.htm 时间的水中倒影。 5_4.htm 简单的日历。 5_5.htm 标题栏显示日期。 5_6.htm 标题栏显示时间。 5_7.htm 不同时间的不同问候。 第6章（\6） 示例描述...
简单的图片数字时钟js代码
Lucky Star的博客
11-27 5487
img{ width: 25px; height: 25px; } 时钟 function getImg(val) { var len=val.length; var images=""; for (var i = 0; i < len; i++) { var num=val.substr(i,1); switch(num){ case '0' : image
js之图片数字时钟
mingzidaodiduochang的专栏
11-02 3849
Digit Clock window.onload = function(){ new DigitalClock(document.getElementById('digitClock')); }; function DigitalClock(container) { this.container = container; var xx = this.
JS 的时间的获取和图片的添加
matiantian666的博客
07-29 1219
最终效果是这样的：js动态时钟和添加图片 首先要有img文件，文件里要有这几张图片： 新建文件time.html，具体实现 动态时间 window.onload=function(){ var oBody=document.body; var oP=document.getElementById('time'); var aImg=document.
js中用图片显示实时时间
05-26
你可以使用JavaScript来实现用图片显示实时时间的效果。具体步骤如下： 1. 准备好显示时间的图片资源，可以是数字图片或者是动态的时钟图片。 2. 在HTML中添加一个img标签，用于显示时间图片。 3. 在JavaScript中使用setInterval函数来每秒更新一次时间图片的src属性，从而实现实时更新显示时间的效果。 以下是示例代码： HTML代码： ```html <img id="clock" src="0.png" alt="clock"> ``` JavaScript代码： ```javascript function updateTime() { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var clockImg = document.getElementById("clock"); clockImg.src = hours + ".png"; // 显示小时数 clockImg.alt = hours + ":" + minutes + ":" + seconds; // 显示时间字符串 } setInterval(updateTime, 1000); // 每秒更新一次时间图片 ``` 在上面的代码中，我们定义了一个名为updateTime的函数，用于获取当前时间并更新时间图片的src和alt属性。然后使用setInterval函数每秒调用一次updateTime函数，从而实现实时更新显示时间的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值