页面显示当前日期时间

最新推荐文章于 2022-05-29 20:59:23 发布
最新推荐文章于 2022-05-29 20:59:23 发布
阅读量782 收藏 1
点赞数 3
分类专栏： 大学记录篇 文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heavenly129324/article/details/121796017
版权

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script type="text/javascript" src="js/fun.js" defer="defer">
		</script>
	</head>
	<body>
		<div class="mydate">
			<div class="date" id="date">2021年9月29日</div>
			<div class="time" id="time">12:24:7</div>
			
		</div>
	</body>
</html>

 css代码

body{
	font-family: "arial black";
}
.mydate{
	background-color: black;
	height: 200px;
	width: 900px;
	margin: 0 auto;
	color: white;
	font-size: 48px;
	text-align: center;
	line-height: 100px;
}
.time{
	font-size:48px;
}

js代码

var date=new Date();
var mydate=document.getElementById('date');
var mytime=document.getElementById('time');
function getDate(){
	var day=date.getDay();
	var myday;
	switch(day){		
		case 0:
		myday="天";
		break;
		case 1:
		myday="一";
		break;
		case 2:
		myday="二";
		break;
		case 3:
		myday="三";
		break;
		case 4:
		myday="四";
		break;
		case 5:
		myday="五";
		break;
		case 6:
		myday="六";
		break;		
	}
	mydate.innerHTML=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;星期"+myday;
};
function getTime(){
	var date=new Date();
	var hours=date.getHours();
	var myhours;
	if(hours=12){
		myhours="下午"+(hours-9);
	}else{
		myhours="上午"+hours;
	}
	mytime.innerText=myhours+":"+date.getMinutes()+	":"+date.getSeconds();
	// setTimeout("getTime()",1000);
}
getDate();
getTime();
setInterval("getTime()",1000);

最终效果图

 

heavenly129324
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js实现页面显示当前日期和时间的代码
10-30
js时间日期显示效果代码
html5
weixin_72553821的博客
08-02 224
HTML5
css li日期代码,3 行 CSS 代码实现日历界面
weixin_42503446的博客
08-03 484
原标题：3 行 CSS 代码实现日历界面来自公众号： 1024译站 Grid Layout日历组件大家应该很熟悉了，但你想过如何实现日历的界面布局吗？最容易想到的方法是用 table 布局，毕竟它在视觉上跟表格类似。但是从现代 CSS 的角度来说， table 多用来展示列表数据，而不是用作布局方案。因为它需要很多额外的 DOM 元素，而且样式控制上也不够灵活。另一种方法是用 flex 布局，这也...
css定位那点事 为指定div添加绝对定位
淘淘小窝
12-26 2090
记录下方便以后查看
【HTML/CSS】创建日期和时间表单控件
热门推荐
连通块的应用
09-01 1万+
属性值 说明 date 选择日，月，年 month 选择月，年 week 选择周，年 time 选择时间（时，分） datetime 输入时间后，会验证是否是时间格式 datetime-local 选择时间，日期，月，年（本地时间） 对应示例代码如下： <!DOCTYPE html> <html lang="zh-CN"> <...
css 日历图标实现
陈小郎的总结博客
07-24 1297
首先看一下效果图,可以跟随当天日期变动 html代码 &lt;p class="calendar"&gt; &lt;span id="dayStr"&gt;&lt;/span&gt; &lt;em&gt; &lt;span id="monthStr"&gt;&lt;/span&gt; &lt;/e
css加入日期,根据日期或时间的日期或时间更改CSS
weixin_35024589的博客
08-03 740
我有一个关于加载基于一天中的时间或日期更改CSS的JavaScript的问题。根据日期或时间的日期或时间更改CSS问题：如何缓存图像以避免页面间的加载？该脚本工作正常，并根据一天中的时间将该类添加到正文和标题中。但是，当用户点击网站的下一页时，它将重新加载相同的CSS类，并使该网站在加载CSS之前闪烁为白色。我已将脚本放置在页面底部和标题中。但它仍然在加载脚本的每个页面上闪烁。每当用户从页面转到页...
9 款样式华丽的 jQuery 日期选择和日历控件
哲洛不闹的专栏
10-28 698
现在的网页应用越来越丰富，我们在网页中填写日期和时间已经再也不用手动输入了，而是使用各种各样的日期时间选择控件，大部分样式华丽的日期选择和日历控件都是基于jQuery和H...
asp.net中页面显示当前系统时间附图
10-26
asp.net如何实现在页面显示当前系统时间，本文有个不错的方法，大家可以尝试操作下，在文章末尾有截图
jsp实现页面实时显示当前系统时间的方法
10-26
在页面上实时显示当前系统时间，通过jsp简单实现，具体如下，感兴趣的朋友可以参考下
网页中显示当前时间
09-18
显示当前时间 有时候网页制作需要获取到当前时间 并显示出来 这个代码可以帮你 显示就像这样：2011年9月19号 星期一 15：20：22
JavaScript页面实时显示当前时间实例代码
11-27
2、得到日期需使用getDate()而不是getDay() ,因为可能习惯性地认为日期就是天数，可能会使用getDay() ，但其实getDay()是用于得到星期数的； 3、通过getMonth()得到月份，从0开始计数，所以需要再加1。 实例代码...
制作简单日历
diga6688的博客
07-14 3414
web页面中很多地方都会用到日历显示，选择等，本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多，可以切换上个月、下个月。也可以根据实际情况进行扩展。 html方面 html部分比较简单，声明一个div，具体的html用javascript生成。整体内容大概是这样的： 1 <!doctype html> 2 &...
css修改input框默认样式（date）
zhudingfengshen的博客
05-29 5338
项目场景： 如图，需求方要求input框的日期选择器修改成如下格式，默认样式如底部 解决方案： 以下为修改步骤： 替换日期选择器icon，并将其移到左边 input[type="date"] { display: flex; padding-left: 10px; padding-right: 550px; font-size: 16px; line-height: 24px; } input[type="date"]::-webkit-calendar-picker-
JavaScript代码：在网页中动态显示当前日期和时间
疯狂源自梦想 技术成就辉煌
01-02 7487
在网页中动态显示当前日期和时间            function showTime(){              var thetime=new Date();   //   初始化日期对象              document.getElementById( "timeArea").innerText   =   thetime.toLocaleString();
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1331
Document
怎样在html中显示时间,如何在网页上显示当前时间
weixin_28223453的博客
06-09 7287
最近做的页面中有需要在页面直接显示当前时间的功能，一开始不知道怎么实现，后来经过查找资料来实现了该功能。虽然用过该功能的人会觉得很简单，但是在这里还是想总结出来，可以供不熟悉的人参考一下。具体实现代码如下：　//font属性用来设置字体属性function getDate(){var d = new Date();var year = d.getFullYear();var month = d.g...
CSS选择器-date0411
AKATian的博客
04-13 265
一、其他的选择器 1.属性选择器：可以挑选带有特殊属性的标签 语法 [属性名] [属性名 = “属性值”] [属性名 ~= “属性值”] [属性名 |= “属性值”] [属性名 ^=“属性值”] [属性名 $= “属性值”] [属性名 *= “属性值”] 2.子元素选择器：子元素选择器可以给另一个元素的子元素设置样式 语法：父元素 > 子元素{} 其他： 第一个子元素：：first-c...
html显示当前日期时间
最新发布
06-02
要在HTML中显示当前日期时间，可以使用JavaScript来获取当前日期时间并将其显示在HTML页面上。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>显示当前日期时间</title> </head> <body> <p id="datetime"></p> <script> var datetime = new Date(); document.getElementById("datetime").innerHTML = datetime.toLocaleString(); </script> </body> </html> ``` 这个示例中，我们使用了JavaScript中的Date对象来获取当前日期时间，然后使用innerHTML属性将其显示在HTML页面上。要注意的是，使用toLocaleString()方法可以将日期时间格式化为本地时间格式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值