JS显示时间
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术: Dw、JS
作者:
撰写时间:2021/5/1
首先先了解一下JS JS的全称是 JavaScript
JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习
首先将布局摆放好
先在网页上放置一个按钮
既 button标签,这个标签的作用是用来调用方法
通过 onClick 属性绑定事件
将一切放置好后 就可以写需要的函数了
Function 然后在里面写出要使用的函数
因为写的是控制台方法所以要使用
在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>