实现一个报时器，例如6:00-12：00显示早上好； 12:00-18:00显示下午好；18:00-6:00显示晚上好

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS实现报时器</title><style>.box {overflow: hidden;width: 619px;height: 400px;background-color: #49B5AA;margin: 80px auto;}.content {overflow: hidden;width: 555px;height: 318px;background-color: #ffffff;margin: 40px auto;border-radius: 20px;}h4 {width: 272px;height: 26px;margin: 0 auto;line-height: 26px;text-align: center;margin-top: 100px;font-size: 22px;}ul {width: 417px;height: 77px;margin-top: 50px;margin: 50px 50px 98px 50px;color: #3CAFA4;}li {list-style: none;float: left;font-size: 60px;margin: 0 10px;}#hour,#minute,#second {width: 77px;height: 77px;line-height: 77px;}</style>
</head><body><div class="box"><div class="content"><h4>钟表计时器(原创)</h4><ul><li id="hour"></li><li>:</li><li id="minute"></li><li>:</li><li id="second"></li></ul></div></div><script>window.onload = function() {var hour = document.querySelector("#hour");var minute = document.querySelector("#minute");var second = document.querySelector("#second");function setTimer() {var date = new Date();if (date.getHours() < 10) {hour.innerText = "0" + date.getHours();} else {hour.innerText = date.getHours();}if (date.getMinutes() < 10) {minute.innerText = "0" + date.getMinutes();} else {minute.innerText = date.getMinutes();}if (date.getSeconds() < 10) {second.innerText = "0" + date.getSeconds();} else {second.innerText = date.getSeconds();}}function judge() {if (Number(hour.innerText) >= 6 && Number(hour.innerText < 12)) {alert("早上好")} else if (Number(hour.innerText) >= 12 && Number(hour.innerText < 18)) {alert("上午好")} else {alert("下午好")}}function startTimer() {setInterval(setTimer, 500);}startTimer();judge();}</script>
</body></html>

前端基础 - 案例（三）报时器相关推荐

前端基础 - 案例一：基础网站搭建
基础网站搭建案例: HTML : <!DOCTYPE html> <html lang="en"><head><meta charset= ...
前端基础（三十五）：SVG入门
SVG - viewBox 属性&值描述 svg width="320" height="200" viewBox="0 0 100 100 ...
前端基础-git(三)：git和GitHub的一些基础操作
github是一个网站,是一个开源的源代码管理平台,用户注册后,可以在自己账户下创建仓库,用来管理项目的源代码(源代码是基于git传到仓库中) 我们所熟知的插件.类库.框架等都在这个平台上有托管,我们 ...
php判断学生姓名,PHP基础案例三：判断学生星座
一.需求分析星座是根据出生月日(11-14位)进行匹配:例如,当出生日期在3月21日和4月19日之间就为白羊座,其他星座按此继续编写. 二.设计思路 1. 星座的划分是两个日期的区间,当日期小于10 ...
前端基础第三天项目大事件后台管理系统
0. 资源地址线上 DEMO 项目地址:http://www.escook.cn:8086/ 项目的 API 接口地址: https://www.showdoc.cc/escook?page_id= ...
前端基础 - 案例二：酱品购电商网站首页（精简版）
酱品购电商网页–精简版 HTML : <!DOCTYPE html> <html lang="en"><head><meta charse ...
前端基础（三十二）：图片转base64
效果源码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8 ...
php for 循环 try_PHP基础案例四：展示学生列表
php中文网课程每日17点准时技术干货分享相关推荐: 1.<PHP基础案例一:展示学生资料卡> 2.<PHP基础案例二:计算学生年龄> 3.<PHP基础案例三:判断学 ...
CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...

前端基础 - 案例（三）报时器

实现一个报时器，例如6:00-12：00显示早上好； 12:00-18:00显示下午好；18:00-6:00显示晚上好

前端基础 - 案例（三）报时器相关推荐

最新文章

热门文章

前端基础 - 案例（三） 报时器

实现一个报时器，例如6:00-12：00显示早上好； 12:00-18:00显示下午好；18:00-6:00显示晚上好

前端基础 - 案例（三） 报时器相关推荐

最新文章

热门文章

前端基础 - 案例（三）报时器

前端基础 - 案例（三）报时器相关推荐