开发工具与关键技术: Dw
作者:nd
撰写时间:2021/5/17
首先将布局摆放好
先在网页上放置一个按钮
既 button标签,这个标签的作用是用来调用方法
通过 onClick 属性绑定事件
将一切放置好后 就可以写需要的函数了
Function 然后在里面写出要使用的函数
因为写的是控制台方法所以要使用
console.log函数
在console.log函数内嵌套多种方法,或将函数输出
所以将function写好后就准备开始写核心函数
首先先获取年月日
var date=new Date();
获取本地时间
var year=date.getFullYear();
获取年期
var mouth=date.getMonth()+1;
获取当前月份 为什么加一 是因为月份数组只有11月
是从0开始数的
然后再分别绑定 获取四个本地时间
var day=date.getDate(); 本地时间
var hours=date.getHours(); 时
var minute=date.getMinutes();分
var second=date.getSeconds(); 秒
然后再利用 三目运算
mouth=mouth<=9?"0"+mouth:mouth;
day=day<=9?"0"+day:day;
hours=hours<=9?"0"+hours:hours;
minute=minute<=9?"0"+minute:minute;
second=second<=9?"0"+second:second;
将大于9数重置为0;
再将整合起来
var str=year+"年"+mouth+"月"+day+"日"+hours+"时"+minute+"分"+second+"秒";
最后将函数再控制台输出
console.log(str)
源代码分享
如果需要输出在网页上只要调用innerHTML方法即可
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时间显示上课</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<span id="time">2021年03月28日 08时00分00秒</span>
</div>
<div class="btngroup">
<button onClick="showTime()">开始</button> </div>
<script>
function showTime(){
var date=new Date();
var year=date.getFullYear();
var mouth=date.getMonth()+1;
var day=date.getDate();
var hours=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
mouth=mouth<=9?"0"+mouth:mouth;
day=day<=9?"0"+day:day;
hours=hours<=9?"0"+hours:hours;
minute=minute<=9?"0"+minute:minute;
second=second<=9?"0"+second:second;
var str=year+"年"+mouth+"月"+day+"日"+hours+"时"+minute+"分"+second+"秒";
console.log(str)
}
</script>
</body>
</html>