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>
实现效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- js 格式化时间日期函数小结
- js data日期初始化的5种方法
- JS 日期比较大小的简单实例
- js时间戳转为日期格式的方法
- 日期 时间js控件
- 解决json日期格式问题的3种方法
- js获取日期:昨天今天和明天、后天
- js用Date对象的setDate()函数对日期进行加减操作
- js时间戳与日期格式之间相互转换
- javascript时间戳和日期字符串相互转换代码(超简单)
本文由 华域联盟 原创撰写:华域联盟 » JavaScript实现简单日期特效
转载请保留出处和原文链接:https://www.cnhackhy.com/61902.htm