一、代码
【核心代码】
getTodayNowTime() 当前时间计算
// 当前时间计算转换 function getTodayNowTime() { var date = new Date(); // 分别获取当前年、月、日、时、分、秒 var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); var week = ["日", "一", "二", "三", "四", "五", "六"] // 一周的数组（替换为中文周期） if (hour < 10) { hour = "0" + hour; } if (second < 10) { second = "0" + second } if (minute < 10) { minute = "0" + minute } var today = year + "年" + month + "月" + day + "日 "; var nowTime = hour + "时" + minute + "分" + second + "秒"; return today + nowTime + " 星期" + week[date.getDay()]; }
getPoem()随机一句诗歌
// 获取随机一句诗歌 function getPoem() { jinrishici.load(function (result) { sentence.innerHTML = result.data.content; console.log(result) info.innerHTML = '来源：<span style="font-size: 14px;color: #999;">《' + result .data.origin.title + '》' + '【' + result.data.origin.dynasty + '】' + result.data.origin.author + "</span>"; poem_lasttime.innerHTML = '上一次点击时间：' + getTodayNowTime(); }); }
clock()定时刷新当前时间
// 定时刷新当前时间： self.setInterval("clock()", 1000); //第一个参数为函数方法 第二个为1秒 function clock() { document.getElementById("clock").innerHTML = "当前时间：" + getTodayNowTime(); }
【完整代码】
随机一句诗歌.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机一句诗歌 南方者 - 掘金</title> </head> <script src="http://code.jquery.com/jquery-latest.js"> </script> <body style="height: 100%;width: 100%;background-color: pink;"> <!-- 获取随机一句诗歌所需 --> <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script> <center style="margin-top: 100px;"> <div style="width: 500px;"> <h2>随机一句诗歌 <span><button onclick="getPoem()">换一句</button> <p style="font-size: 14px;" id="poem_lasttime"></p> </span> </h2> <div id="poem_sentence"></div> <div id="poem_info" style="float: right;"></div> </div> </center> <div id="clock" style="position: fixed; bottom: 500px;width: 100%;text-align: center;"></div> <script type="text/javascript"> console.log("***************************************"); console.log("*********测试Demo 南方者 - 掘金*********"); console.log("https://juejin.cn/user/2840793779295133"); console.log("***************************************"); getPoem(); // 初始化随机第一句诗歌 var poem_lasttime = document.querySelector("#poem_lasttime"); // 记录上一次点击的时间 var sentence = document.querySelector("#poem_sentence"); // 诗歌内容 var info = document.querySelector("#poem_info"); // 诗歌作者相关信息 // 获取随机一句诗歌 function getPoem() { jinrishici.load(function (result) { sentence.innerHTML = result.data.content; console.log(result) info.innerHTML = '来源：<span style="font-size: 14px;color: #999;">《' + result .data.origin.title + '》' + '【' + result.data.origin.dynasty + '】' + result.data.origin.author + "</span>"; poem_lasttime.innerHTML = '上一次点击时间：' + getTodayNowTime(); }); } // 定时刷新当前时间： self.setInterval("clock()", 1000); //第一个参数为函数方法 第二个为1秒 function clock() { document.getElementById("clock").innerHTML = "当前时间：" + getTodayNowTime(); } // 当前时间计算转换 function getTodayNowTime() { var date = new Date(); // 分别获取当前年、月、日、时、分、秒 var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var hour = date.getHours(); var minute = date.getMinutes(); var second = date.getSeconds(); var week = ["日", "一", "二", "三", "四", "五", "六"] // 一周的数组（替换为中文周期） if (hour < 10) { hour = "0" + hour; } if (second < 10) { second = "0" + second } if (minute < 10) { minute = "0" + minute } var today = year + "年" + month + "月" + day + "日 "; var nowTime = hour + "时" + minute + "分" + second + "秒"; return today + nowTime + " 星期" + week[date.getDay()]; } </script> </body> </html>
二、展示效果
1 首次页面
2 点击换一句
三、体验地址
随机一句诗歌.html：nanfangzhe.gitee.io/cat-meow/nf…
【最后】
感谢你看到最后，如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
我是南方者，一个热爱计算机更热爱祖国的南方人。
文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。
