单页面vue制作网页的电子数字时间动态显示
2023-05-06 05:24:35
1 说明：
1.1 了解vue的基本知识：网页显示方法和js结构。
1.2 如何获取动态时间。
2 效果图
3 完整代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>vue.js数字时钟本地时间代码</title> <!--css设置，没区别，html直接设置--> <style> html, body { height: 100%; } body { /*整体背景颜色渐变效果设置*/ background: radial-gradient(ellipse at center, pink 0%, blue 70%); background-size: 100%; } p { margin: 0; padding: 0; } #clock { font-family: Share Tech Mono, monospace; text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*显示文字颜色*/ color: lightgreen; text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0); } #clock .time { letter-spacing: 0.05em; font-size: 80px; padding: 5px 0; } #clock .date { letter-spacing: 0.1em; font-size: 24px; } #clock .text { letter-spacing: 0.1em; font-size: 12px; font-style: italic; padding: 20px 0 0; } </style> </head> <body> <!--引入本地vuejs，可以导入在线vue.min.js，此处省略--> <script type="text/javascript" src="js/vue.min.js"></script> <!--div容器定义，vue的特点--> <div id="clock"> <!--三行显示：有顺序性；2对大括号--> <p class="text">数字时钟</p> <p class="date">{{ date }}</p> <p class="time">{{ time }}</p> </div> <!--vue格式的js文件--> <script> // vue格式的js文件和js文件格式差不多，采用倒装法，与python不同--> var clock = new Vue({ // el就是对象：上面div里的id内容，注意#符号 el: #clock, data: { // data里面的内容就是class的内容，但是因为可变所以先是空的 // 先各自定义一个空的，后面利用函数获得值 time: , date: } }); /* Model层 */ var week = [星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六]; var timerID = setInterval(updateTime, 1000); // 先定义一个空的时间更新函数 updateTime(); // 再定义时间更新函数，获取动态时间值 function updateTime() { // 定义一个cd变量获取动态时间 var cd = new Date(); // 注意这里的time和date的获得值，就会赋值给上面的data里面去；2是显示2位；4是显示4位 clock.time = zeroPadding(cd.getHours(), 2) + : + zeroPadding(cd.getMinutes(), 2) + : + zeroPadding(cd.getSeconds(), 2); clock.date = zeroPadding(cd.getFullYear(), 4) + - + zeroPadding(cd.getMonth()+1, 2) + - + zeroPadding(cd.getDate(), 2) + + week[cd.getDay()]; }; // 定义零填充函数：就是没有数值就是0来填充 function zeroPadding(num, digit) { var zero = ; for(var i = 0; i < digit; i++) { zero += 0; } return (zero + num).slice(-digit); } </script> </body> </html>4 复习vue的基本知识：
4.1 我是引用本地js/vue.min.js，放在js文件夹内，也可以引用在线的，自己网上搜索，简单。
4.2 <div id="clock">，这里是id="clock"，一般教程都是id="app"，注意这是一个可以自定义的，下面对应需要修改。
4.3 {{}}表示文本插值，运行{{message}}会被数据对象的message属性替换。<!--view层：网页渲染后看到的-->
4.4 js里面的vue是vue的特点：
/* ViewModel层,连接view和model层；
vue实例需要传入一个选项对象，选项对象包括挂载对象，数据，方法，模生命周期钩子（？）
el属性指向view,表示把vue实例绑定某个dom元素*/
/* ViewModel层*/ var clock = new Vue({ // el就是对象：上面div里的id内容，注意#符号 el: #clock, data: { // data里面的内容就是class的内容，但是因为可变所以先是空的 // 先各自定义一个空的，后面利用函数获得值 time: , date: } }); /*下面的是 Model层 ，此处省略*/4.5 动态获取当前时间的函数定义，此处略，属于html的js内容，基本相同。
以上就是关于《单页面vue制作网页的电子数字时间动态显示》的全部内容，本文网址：https://www.7ca.cn/baike/22997.shtml，如对您有帮助可以分享给好友，谢谢。
声明