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>
View Code

实现效果截图:

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>
View Code

 

以上是关于uni-app实现一个设置时间和获取当前时间的案例(考虑不是很周到)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序如何获得自己当前的定位呢?本文利用逆地址解析uni-app带你实现

Android与uni-app 互相通信案例(包含源代码)

uni-app获取当前位置

uni-app 小程序获取实时定位和车辆签到(wx.getLocation方法)

uni-app 106群资料设置功能

移动端 uni-app 滑动事件 精确判断手指滑动方向