JavaScript实现简单日期特效
更新时间:2021年04月29日 14:18:50 作者:知识进脑的肖老千啊
这篇文章主要为大家详细介绍了JavaScript实现简单日期特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
JavaScript之日期特效的具体代码,供大家参考,具体内容如下
直接上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } #date{ width: 450px; height: 300px; background-color: darkorange; border-radius: 10px; margin: 100px auto; } #nowDate{ width: 450px; height: 60px; line-height: 60px; text-align: center; color: #fff; font-size: 26px; } #day{ width: 200px; height: 200px; line-height: 200px; background-color: orchid; margin: 0 auto; text-align: center; } </style> </head> <body> <div id="date"> <p id="nowDate"></p> <p id="day"></p> </div> <script type="text/javascript"> // 获取标签 var nowDate = document.getElementById("nowDate"); var day = document.getElementById("day"); // 用定时器 更新时间的变化 setInterval(nowNumTime,1000); nowNumTime(); function nowNumTime(){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var temp = '' + (hour>12 ? hour-12:hour); var year = now.getFullYear(); var month = now.getMonth(); var d = now.getDate(); var week = now.getDay(); console.log(week); //索引 var weeks = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]; // console.log(temp); if (hour ===0){ temp = '12'; } temp = temp + (minute <10 ? ':0':":"+minute); temp = temp + (second <10 ? ':0':":"+second); temp = temp + (hour>=12 ? ' P.M.':' A.M.'); temp = `${year}年${month}月${d}日 ${temp}${weeks[week]}`; // console.log(temp); nowDate.innerHTML = temp; } </script> </body> </html>
实现效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
chorme 浏览器记住密码后input黄色背景处理方法(两种)
使用chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些设计输入框是透明背景的,需要去除掉这个黄色的背景。下面给大家分享chorme 浏览器记住密码后input黄色背景处理方法,一起看看吧2017-11-11inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)
inputSuggest在文本框输入字符时提示,类似Windows的“自动完成”功能,当在文本框输入字符时,与此相关的内容会显示在文本框的下边,你可随时使用键盘或鼠标点选那些提示,你就不用输入了2012-05-05
最新评论