innerText改变元素内容

素心如月桠

已于 2022-04-05 17:58:17 修改

阅读量747

点赞数

文章标签： javascript

于 2021-05-02 21:47:06 首次发布

本文链接：https://blog.csdn.net/m0_47010003/article/details/116357323

版权

html 同时被 3 个专栏收录

43 篇文章 13 订阅

订阅专栏

vscode

35 篇文章 2 订阅

订阅专栏

JavaScript

34 篇文章 3 订阅

订阅专栏

点击鼠标显示当前时间

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div {
			width:300px;
			height: 20px;
			background-color: aqua;
			line-height: 20px;
			text-align: center;
		}
	</style>
</head>

<body>
	<button id="btn">显示系统当前的时间</button>
	<br/>
	<div id="app">
		当前时间
	</div>
	<script>
		var btn = document.querySelector('button');
		var d = document.querySelector('div');//querySelector返回当前标签的首个标签

		btn.onclick = function () {
			//点击的onclick事件
			d.innerText = getDate();
			//innerText改变元素内容
		}
		function getDate() {
			var a = new Date();
			var year = a.getFullYear();//获取年份
			var month = a.getMonth()+1;//getMonth()方法返回表示月份的数字，返回值是0-11的一个整数，要加1 
			var dates = a.getDate();//获取日
			var arr=['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
			var count=a.getDay();//获取周几返回0、1、2~6
			return '今天是：'+year+'年'+month+'月'+dates+'日'+arr[count];

		}
	</script>
</body>

</html>

在这里插入图片描述

素心如月桠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
innerText改变元素内容

点击鼠标显示当前时间<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> div { width:300px; height: 20px; background-color: aqua; line-height: 20px; text-align: center; } <
复制链接

扫一扫