用JavaScript制作12小时进制的时钟附加星期

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55:10 发布
阅读量1.1k 收藏 19
点赞数 4
分类专栏： 简易上手的Java知识 文章标签： javascript xhtml html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62356088/article/details/124634746
版权

//获得当前时间

//获得年、月、日，Date()函数中的月份是从0－11计算

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作12小时进制的时钟</title>
<script type="text/javascript">

function clock_12h()
{
 var today = new Date(); //获得当前时间
 //获得年、月、日，Date()函数中的月份是从0－11计算
 var year = today.getFullYear();  
 var month = today.getMonth()+1;
 var date = today.getDate();
 var hour = today.getHours();  //获得小时、分钟、秒
 var minute = today.getMinutes();
 var second = today.getSeconds();
 
 var apm="AM"; //默认显示上午: AM
 if (hour>12) //按12小时制显示
 {
    hour=hour-12;
    apm="PM"  ;
 }
 var weekday = 0;
 switch(today.getDay()){
    case 0:
  	weekday = "星期日";
	break;
    case 1:
  	weekday = "星期一";
	break;
	case 2:
  	weekday = "星期二";
	break;
	case 3:
  	weekday = "星期三";
	break;
	case 4:
  	weekday = "星期四";
	break;
	case 5:
  	weekday = "星期五";
	break;
	case 6:
  	weekday = "星期六";
	break;
 }
 
  /*设置div的内容为当前时间*/
 document.getElementById("myclock").innerHTML="<h2>你好，欢迎访问贵美商城！</h2><h2>"+year+"年"+month+"月"+date+"日&nbsp;"+hour+":"+minute+":"+second+"&nbsp;"+apm+"&nbsp;"+weekday+"</h2>";

}
/*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
var myTime = setInterval("clock_12h()",1000);

</script>
</head>

<body>
<div id="myclock"></div>
</body>
</html>

胡图图.Zzz
关注
  • 4
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 做一个简单的数字时钟（增加了年月日）
Zertuler的专栏
11-14 1174
在以前写的这篇文章的代码上增加年月日的显示 https://blog.csdn.net/Zertuler/article/details/107948389 运行效果 只是把日期和时间显示出来，并没有特别去做美化，所以并不美观 下面是代码： <style> * { padding: 0; margin: 0; box-sizing: border-box; }
JavaScript—简易计时器
qq_41139281的博客
05-25 1101
制作显示年、月、日、星期几，并且显示上午（AM）和下午（PM）的十二进制的时钟(动态显示)，代码如下所示：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod
时钟 显示年月日 时间 分钟 秒
05-31
时钟 显示年月日 时间 分钟 秒
js获取当前时间
qq_43072912的博客
04-25 232
<div id="time"></div> <script> //当前时间 function clock_12h() { var today = new Date(); //获得当前时间 //获得年、月、日，Date()函数中的月份是从0－11计算 var year = today.getFullYear(); var ...
html语言中钟表怎么做,用html制作12小时制时钟
weixin_42363510的博客
05-30 740
练习-12小时时钟var myTime;function onShowTime1() {var today = new Date();//返回当前日期和时间 年-月日 小时分秒var year = today.getFullYear();//返回Date对象的年份，其值为4位数var month = today.getMonth();//返回Date对象的月份，其值介于0~11之间var date...
JavaScript实现12进制的时钟特效
云祁QI
10-13 4862
需求说明 制作显示年、月、日、星期几，并且显示上午（AM）和下午（PM）的十二进制的时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作12进制的时钟特效</title> </head> <b...
给页面写一个炫酷的时钟特效【web前端】
一键难忘的博客
08-11 2134
今天看到某网站的时间特别的丑陋，所以就诞生了写一个看时间的炫酷的时钟前端页面。特点就是炫酷，特效好，个人以心情愉快的感觉。对于时间的变化，我打算使用翻页的特效来完成，色系的话采用黑色以主题，给人一种神秘的感觉。而且要获取到本地的时间的数据来实时更新它的变化。...
bitclock：使用香草JavaScript制作的二进制时钟
02-18
"BitClock"是一个创新的项目，它利用了香草JavaScript（Vanilla JavaScript）技术来创建一个独特的二进制时钟。这个时钟不以我们常见的十进制数字显示时间，而是通过二进制数系统来展示当前的时间。二进制是计算机...
binaryCalculator:用JavaScript制作的二进制计算器
04-07
标题"binaryCalculator:用JavaScript制作的二进制计算器"表明我们的目标是创建一个能够执行二进制算术运算的应用。描述中的"binaryCalculator.js"指出了实现这个功能的主要源代码文件。 首先，我们需要理解二进制...
Jquery练习4：制作12进制的时钟特效.zip
08-27
在本项目"Jquery练习4：制作12进制的时钟特效.zip"中，我们将探讨如何使用jQuery、JavaScript和HTML技术来创建一个显示12小时制时间的动态时钟特效。这个练习主要涵盖以下几个核心知识点： 1. **jQuery基础**： ...
制作12进制的时钟特效
11-12
使用javascript制作12进制的时钟特效
binary-clock:简单的 Javascript 二进制时钟
07-13
这个"binary-clock:简单的 Javascript 二进制时钟"项目是用 JavaScript 编写的，JavaScript 是一种广泛用于网页和网络应用的编程语言，特别适合于交互式和实时更新的场景，如网页上的动态内容。 该项目可能包含以下...
C语言练习 24小时制转12小时制
weixin_53815931的博客
08-17 1314
具体代码如下：int h,m,s;if(h==0){return 0;
分享88个时间日期JS特效，总有一款适合您
adendean的博客
02-12 893
分享88个时间日期JS特效，总有一款适合您
web前端开发实验——3
qq_46476515的博客
10-16 1352
web前端开发实验——3
分享111个JS时钟代码特效，总有一款适合您
zy0412326的专栏
02-07 1852
JS
分享89个时间日期JS特效，总有一款适合您
zdh13370188237的博客
02-12 875
分享89个时间日期JS特效，总有一款适合您
分享76个时间日期JS特效，总有一款适合您
adendean的博客
02-12 756
分享76个时间日期JS特效，总有一款适合您
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 447
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
javascript年月日星期
08-08
在JavaScript中，我们可以使用内置的Date对象来处理日期和时间。Date对象提供了一系列方法和属性来获取年、月、日和星期。 要获取当前日期和时间，我们可以调用Date对象的构造函数并用new关键字来创建一个Date实例，如下所示： ```javascript var currentDate = new Date(); ``` 如果我们只想获取年、月、日或星期中的特定部分，可以使用Date对象的各种方法和属性。 - 要获取当前的年份，我们可以使用getFullYear()方法： ```javascript var currentYear = currentDate.getFullYear(); ``` - 要获取当前的月份，可以使用getMonth()方法。需要注意的是，月份是从0开始计数的，因此1月对应0，2月对应1，以此类推。如果希望月份从1开始计数，可以在获取月份的结果上加1： ```javascript var currentMonth = currentDate.getMonth() + 1; ``` - 要获取当前的日期，可以使用getDate()方法： ```javascript var currentDay = currentDate.getDate(); ``` - 要获取当前是星期几，可以使用getDay()方法。返回的结果是一个数字，其中0表示星期日，1表示星期一，依此类推： ```javascript var currentWeekday = currentDate.getDay(); ``` 有了这些方法和属性，我们就可以在JavaScript中获取当前的年、月、日和星期了。根据需要，我们可以将它们存储在变量中、在页面上显示或进行其他操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值