uni-app实现一个设置时间和获取当前时间的案例(考虑不是很周到)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app实现一个设置时间和获取当前时间的案例(考虑不是很周到)相关的知识,希望对你有一定的参考价值。
参考技术A 说一下我考虑的条件输入:首先是用户每输入一个值都需要摁下回车进行确认核查,不符合数据的用alert()方法弹出一个警告框提示用户进行修改。
年份这里要考虑的是4位数的年份,不能是特殊字符,但是负数这个条件我没考虑到。
月份这里考虑的是2位数的月份,采取02月这种表达,也不能是特殊字符,还有月份范围是01-到12月。
天数、小时分钟秒这里都是同上,考虑范围、不能是特殊字符,采取两位数表达。
然后我说让用户摁下秒数这个输入框的时候,才显示这个界面。
用到了时间函数
获取当前时间 和 10s倒计时案例
1.获取当前的时间,时间没分每秒都在走,(把握现在,将来会是美好的!)
1 <title>获取当前时间</title> 2 <script type="text/javascript"> 3 onload = function () {//地址对象 函数 4 setInterval(disptime, 1000);//setInterval()可按照指定的周期(以毫秒计)来调用函数或计算表达试 5 } 6 function disptime() { 7 var today = new Date();//获得当前时间 8 var hh = today.getHours();//获得小时,然后判断小时在哪个时间段 9 var sj = null; 10 if (hh <= 12) { 11 sj = "早上好"; 12 } else if (hh > 12 && hh<= 18) { 13 14 sj = "下午好"; 15 } else if (hh> 18) { 16 sj = "晚上好"; 17 } 18 var doc = document.getElementById(\'myid\');//getElementById()方法返回对拥有指点id的第一个对象的引用 一般用于访问DIV 图片 表单元素 网页标签等,但要求访问对象的id是唯一的 19 //设置div的内容为当前时间 20 doc.innerHTML = sj + "<br/>今天日期:" + today.getFullYear() + "年" + (today.getMonth()) + "月" + today.getDate() + "日" + "<br/>现在时间:" + today.getHours() + "时" + today.getMinutes() + "分" + today.getSeconds() + "秒"; 21 } 22 </script> 23 </head> 24 <body > 25 <div id="myid"></div> 26 </body>
实现效果截图:
2.10s倒计时效果,按开始按钮,时间变短,按停止按钮,时间暂停,时间为0时,可以跳转到其他页面
1 <title>10s倒计时效果</title> 2 <script type="text/javascript"> 3 //1.1 取出div中的变量值 4 window.onload = function () { 5 var t1; 6 //1.4 给开始按钮注册事件 7 //锁定开始按钮对象 8 var btnStart = document.getElementById("btnStart"); 9 //结束按钮对象 10 var btnStop = document.getElementById("btnStop"); 11 btnStop.onclick = function () { 12 clearInterval(t1); 13 }; 14 btnStart.onclick = function () { 15 //1.5 16 t1 = setInterval(step, 1000); 17 }; 18 }; 19 20 function step() { 21 //1.2 锁定div对象 22 var dom = document.getElementById("msg"); 23 //1.3 innerText,innerHTML value 24 var num = dom.innerText; 25 //1.6 对num进行--操作 26 if (num > 0) { 27 num--; 28 } 29 //1.7 将运算过的num重新赋值给div的innerText 30 dom.innerText = num; 31 } 32 33 </script> 34 </head> 35 <body> 36 <input type="button" id="btnStart" value="开始" /> 37 <input type="button" id="btnStop" value="停止" /><br /> 38 <div id="msg">10</div> 39 40 </body>
以上是关于uni-app实现一个设置时间和获取当前时间的案例(考虑不是很周到)的主要内容,如果未能解决你的问题,请参考以下文章
微信小程序如何获得自己当前的定位呢?本文利用逆地址解析uni-app带你实现