使用JavaScript制作一个页面的电子时钟

更新日期: 2022-05-27阅读: 921标签: 页面

题目:

做一个电子时钟,显示当前的年月日,时分秒,要求自动变化。


案例分析:

1.使用一个div盒子来展示时钟的内容;

2.将盒子在JavaScrip里面获取div盒子;

3.我们需要一个定时器setInterval每隔一秒使时钟变化一次;

4.利用时间函数Date()获取系统时间,并分别获取年月日,时分秒;

5.当获取过来的数小于10,利用三元运算符字符串拼接的方式让它显示成 2022年05月01日 00:00:00的样子

6.利用innerhtml将获得结果写进div盒子里面。


注意:

getMonth()返回的月份比当前月份小一个月,因此我们需要在后边加一。


代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
line-height: 100px;
margin: 100px auto;
background-color: black;
color: #fff;
text-align: center;
font-size: 50px;
}
</style>
</head>
<body>
<div class="box">123</div>
<script>
// 1.获取元素
var box = document.querySelector('.box');
//2.使用定时器每隔一秒更新一次
setInterval(getTime, 1000);
function getTime() {
//3.利用时间函数获取系统时间
var time = new Date();
var year = time.getFullYear();//年
year = year < 10 ? '0' + year : year;
var mon = time.getMonth() + 1;//月
mon = mon < 10 ? '0' + mon : mon;
var date = time.getDate();//日
date = date < 10 ? '0' + date : date;
var h = time.getHours();//小时
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();//分钟
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();//秒
s = s < 10 ? '0' + s : s;
box.innerHTML = year + '年' + mon + '月' + date + '日' + '' + h + ':' + m + ':' + s;
}
</script>
</body>
</html>


链接: https://fly63.com/article/detial/11600

js禁止页面回退的方法(使浏览器后退按钮失效)

这篇文章主要为大家详细介绍js禁止页面回退的方法(使浏览器后退按钮失效),具有一定的参考价值,感兴趣的小伙伴们可以参考一下

footer固定在页面底部的实现方法总结

footer固定在底部,footer保持在屏幕底部的四种方法实现:footer高度固定+绝对定位、footer高度固定+margin负值、footer高度任意+js、常用的纯css实现footer sticker

页面重定向的几种方法

html重定向就是通过各种的方法将各种网络请求重新定个方向转到其它位置。 在网站建设中,时常会遇到需要网页重定向的情况:像网站调整,如改变网页目录结构,网页被移到一个新地址

html页面实现返回上一页浏览位置

如果上一页是静态页面,可以用 history.go(-1)方法;页面采用了vue,页面每次加载都会去请求数据,用history.go(-1)方法返回上一页,上一页的页面因为重新请求数据,页面不会定位到上次浏览的位置;

在静态页面中使用 Vue.js

不使用Node.js, NPM, Webpack 等, 在静态页中使用Vue.js. 包括路由, 单文件组件. index.html做为项目的首页, 主要用来定义页面框架, 加载必需的css和script.这里使用element-ui的导航菜单组件搭建了一个页面框架.

js监听用户进入和离开当前页面

VisibilityChange 事件;用于用户是否离开当前页面;页面的 visibilityState属性可能返回三种状态 prerender,visible 和 hidden ;监听 visibility change 事件;页面变为不可见时触发

Flutter 之页面切换(基本路由)

一个应用程序通常由多个页面组成,而统一管理页面之间跳转的机制通常被称为路由管理或导航管理,在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的

解决webapck多页面内存溢出

因为自己的项目是基于vue-cli3进行开发,所以这里只讨论这种情况下的解决办法 ,在进行多页面开发的时候,项目刚开始阶段,因为文件较少,所以代码编译速度还行,但是随着项目逐渐增大

JS内嵌多个页面,页面之间如何更快捷的查找相关联的页面

假设parent为P页面,P页面有两个子页面,分别为B页面和C页面;B页面和C页面分别内嵌一个iframe,分别为:D页面和E页面,现在通过B页面的内嵌页面D的方法refreshEpage(eUrl)来加载内嵌页面E的内容.

Flutter页面跳转传参

路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewController。所谓路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!