uni-app:实现当前时间的获取,并且根据当前时间判断所在时间段为早上,下午还是晚上

这篇具有很好参考价值的文章主要介绍了uni-app:实现当前时间的获取,并且根据当前时间判断所在时间段为早上,下午还是晚上。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图

uni-app:实现当前时间的获取,并且根据当前时间判断所在时间段为早上,下午还是晚上,uni-app,uni-app,javascript,前端

核心代码

获取当前时间

toString()方法将数字转换为字符串

padStart(2, '0')padStart()方法用于在字符串头部填充指定的字符,使其达到指定的长度。该方法接受两个参数:第一个参数为期望得到的字符串长度,第二个参数为要填充的字符。

// 获取当前时间
const now = new Date();
// 获取当前日期
var year = now.getFullYear();
var month = (now.getMonth() + 1).toString().padStart(2, '0');
var day = now.getDate().toString().padStart(2, '0');
// 获取当前详细时间
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var seconds = now.getSeconds().toString().padStart(2, '0');
// 拼接日期和时间
var datetime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

时间段的判断

根据小时来判断当前的时间段,这里规定早上:6:00-12:00,下午:12:00-18:00,其余时间为晚上文章来源地址https://www.toymoban.com/news/detail-721303.html

const startTime = 6; // 早上开始时间(小时)
const noonTime = 12; // 下午开始时间(小时)
const endTime = 18; // 晚上开始时间(小时)
// 判断当前时间所属时间段,并输出相应的问候语
var tp = '';
// 早上6-12
if (hours >= startTime && hours < noonTime) {
	tp = '早上好';
//下午12-18
} else if (hours >= noonTime && hours < endTime) {
	tp = '下午好';
//晚上
} else {
	tp = '晚上好';
} 

完整代码

<template>
	<view>
		{{tp+',当前时间为:'+datetime}}
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tp:'',//当前时间段
				datetime:'',//当前时间
			}
		},
		methods: {

		},
		onLoad() {
			// 获取当前时间
			const now = new Date();
			// 设置时间段划分的时间点,规定早上:6:00-12:00,下午:12:00-18:00,其余时间设置为晚上
			const startTime = 6; // 早上开始时间(小时)
			const noonTime = 12; // 下午开始时间(小时)
			const endTime = 18; // 晚上开始时间(小时)
			var tp = '';
			// 获取当前日期
			var year = now.getFullYear();
			var month = (now.getMonth() + 1).toString().padStart(2, '0');
			var day = now.getDate().toString().padStart(2, '0');
			// 获取当前时间
			var hours = now.getHours().toString().padStart(2, '0');
			var minutes = now.getMinutes().toString().padStart(2, '0');
			var seconds = now.getSeconds().toString().padStart(2, '0');
			// 拼接日期和时间
			var datetime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			// 判断当前时间所属时间段,并输出相应的问候语
			// 早上6-12
			if (hours >= startTime && hours < noonTime) {
				tp = '早上好';
				//下午12-18
			} else if (hours >= noonTime && hours < endTime) {
				tp = '下午好';
				//晚上
			} else {
				tp = '晚上好';
			} 
			//将数据存入data中
			this.tp = tp;
			this.datetime = datetime
		}
	};
</script>
<style>

</style>

到了这里,关于uni-app:实现当前时间的获取,并且根据当前时间判断所在时间段为早上,下午还是晚上的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

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

    目录 前言 效果展示 一、在腾讯定位服务配置微信小程序JavaScript SDK 二、使用uni-app获取定位的经纬度 三、 逆地址解析,获取精确定位 四、小提示 在浏览器搜索腾讯定位服务,找到官方网站,利用微信或者其他账号注册登录,登录后如下图操作 点进去之后,可以看到如下图

    2024年01月19日
    浏览(85)
  • uni-app:实现账号密码登录,并且实现当页面登录过该账号在下次登录时无需再输入账号密码(本地缓存实现)

    一、完整代码 二、标签部分解析 使用了 template 标签定义模板。 页面主要由一个 view 标签组成。 页面包含一个标题图片和一个登录表单。 标题图片使用了 image 标签,通过 :src 绑定属性来设置图片路径。 登录表单使用了 form 标签,并在提交时调用 formSubmit 方法。对账号和密

    2024年02月15日
    浏览(57)
  • uni-app:刷新当前页面

    执行这三行代码就可以实现uniapp刷新当前页面。不论是tabbar还是page页面 * * * * * * * * * * * * * * * *

    2024年02月11日
    浏览(48)
  • uni-app:实现表格多选及数据获取

     

    2024年02月14日
    浏览(41)
  • uni-app 封装 websocket 并且监听心跳机制

    新建 socket.js , 将以下代码复制进去 ,向外暴露。 在入口文件中 将 socketIO 挂载在 Vue 原型上 , 也可以按需引入置顶页面 。 在需要用到webSocket的页面中使用如下方法(可根据自身业务需求进行整改) 离开页面,记得断开连接。

    2024年02月11日
    浏览(43)
  • uni-app根据腾讯地图接口三级联动组件

    有时候很懵逼,因为需要用到腾讯地图接口的三级联动,习惯问问度娘,结果出来了我几年前用JQ写的,好吧,还是自己撸一个现在用的吧 组件使用得是uni-popup弹窗,picker-view 滑动选择地址 访问腾讯地图接口使用的是 vue-jsonp  在main.js引入 组件address.vue 组件只需要填写你自

    2024年01月20日
    浏览(53)
  • uni-app 微信小程序 保存当前页面为图片

    由于在微信小程序环境下面没法获取dom,很多方法都很难去实现保存html结构的页面,比较有效的#painter 可以不需要操作dom,但是那玩意儿和重新用js写个页面一样,简单的页面还好,复杂的,元素比较多的就很麻烦,所以考虑用webview+html2canvas来完成 先说一下思路,既然在微

    2024年02月11日
    浏览(52)
  • uni-app uni-ui 微信小程序 uni-datetime-picker 时间选择组件设置start和end属性,实现时间选择限制

     效果如图,先选择开始日期,完成日期需要在开始日期之后,先选择完成日期,开始日期需要在完成日期之前 需要用到uni-datetime-picker官方的三个属性  代码如下 这样一个能够限制选定范围的组件就ok了!    

    2024年02月11日
    浏览(64)
  • uni-app小程序刷新当前页面的两种方法

    方法一 wx.relaunch来刷新当前页面,页面会被重载,若路由携带参数需自行拼接,方法如下 (如果用电脑打开小程序,该方法有bug) 上面是获取页面路由和参数的方法,具体使用如下 方法二(推荐) 通过获取该页面实例执行其内部的生命周期方法来刷新页面

    2024年02月12日
    浏览(53)
  • uni-app 设置当前page界面进入直接变为横屏模式

    首先 我们打开项目的 manifest.json 在左侧导航栏中找到 源码视图 然后找到 app-plus 配置 在下面加上 然后 我们在需要操作的 page 上 加入代码 其中 onLoad 将模式初始化 onUnload关闭横向 如果你一直要横向的 可以不要这个 然后 onReady 等页面加载好 启动横向模式 因为我们加的注解

    2024年02月04日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包