“打工搬砖记”中首页的功能实现(一)

2024-05-14 22:12

本文主要是介绍“打工搬砖记”中首页的功能实现(一),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 打工搬砖记
    • 秒薪的计算
    • 文字弹出动画
    • 根据时间数字变化
    • 小结

打工搬砖记

先来一个小程序首页预览图,首页较为复杂的也就是“秒薪”以及弹出文字的动画。
已上线小程序“打工人搬砖记”,进行预览观看。
请添加图片描述

请添加图片描述

秒薪的计算

秒薪计算公式:秒薪 = 平均月薪/工作天数/(工作时间-午休时间)
平均月薪以及工作天数是用户自行设置的,一天工作多少秒这个比较难点需要计算一下。
"new Date(new Date(new Date().toLocaleDateString()).getTime()) " 代表获取今天0点的时间戳。
时间点乘60乘60乘1000再加上0点的时间戳得出时间点的时间戳
详细实现过程代码如下:

			// 这是通过接口获取的数据,这里为了方便演示定易了一下let workerStartArr=['9','30']let noonStartArr=['11','30']let noonEndArr=['1','30']let workerEndArr=['18','30']// 时间转换为时间戳let workerStart = new Date(new Date().toLocaleDateString()).getTime() + parseInt(workerStartArr[0]) * 60 * 60 * 1000 - 1 + workerStartArr[1] * 60 * 1000let noonStart = new Date(new Date().toLocaleDateString()).getTime() + parseInt(noonStartArr[0]) * 60 * 60 * 1000 - 1 + noonStartArr[1] * 60 * 1000let noonEnd = new Date(new Date().toLocaleDateString()).getTime() + parseInt(noonEndArr[0]) * 60 * 60 * 1000 - 1 + noonEndArr[1] * 60 * 1000let workerEnd = new Date(new Date().toLocaleDateString()).getTime() + parseInt(workerEndArr[0]) * 60 * 60 * 1000 - 1 + workerEndArr[1] * 60 * 1000let newTime = Date.parse(new Date())// 工作时长 多少秒 let secondWorker = (workerEnd - workerStart - (noonEnd - noonStart)) / 1000// 秒薪this.secondMoney = (this.userInfo.wage / this.userInfo.workDay / secondWorker).toFixed(4)// 根据当前时间在哪个区间然后计算已经挣到的薪资this.statusWork = 2if(newTime < workerStart){this.money = 0this.titleTime = 0this.statusWork = 1} else if (newTime > workerStart && newTime < noonStart) {this.money = ((newTime - workerStart) / 1000) * this.secondMoneythis.titleTime = noonStart - newTime} else if (newTime > noonEnd && newTime < workerEnd) {let haveMoney = (noonStart - workerStart)/1000 * this.secondMoneythis.money = ((newTime - noonEnd) / 1000) * this.secondMoney + haveMoneythis.titleTime = workerEnd - newTime}else{let haveMoney = (noonStart - workerStart)/1000 * this.secondMoneythis.money = ((workerEnd - noonEnd) / 1000) * this.secondMoney + haveMoneythis.titleTime = 0this.statusWork = 1}

文字弹出动画

用户点击人物后,人物会纵向的动一下,并且文字会先从人物头上冒出来,然后快速移动到手机屏幕中件。
通过CSS中animation动画结合JS中setTimeout()方法来实现。通过绑定class,然后控制active状态是true和false来实现动画过程。

			<!-- 主体结构内容 --><view @click="setWork" class="basis_right"><view :class="[active?'bubble_boxActive':'bubble_box']"><image src="../../static/role/bubble.png" class="bubbleImg" mode=""></image><view class="bubble_text"><text v-for="(item,index) in funnyList" :key="index" >{{item}}</text></view></view><image v-show="statusWork == 1" src="../../static/role/luXun_rest.png":class="[active?'luxunImgActive':'luxunImg']" mode=""></image><image v-show="statusWork == 2" src="../../static/role/luXun_active.png":class="[active?'luxunImgActive':'luxunImg']" mode=""></image></view>
<!-- 样式 -->
<style lang="scss">.basis_right {flex: 1;position: relative;.luxunImg {position: absolute;right: 30rpx;bottom: 0;width: 210rpx;height: 350rpx;}.luxunImgActive {position: absolute;right: 30rpx;bottom: 0;width: 210rpx;height: 350rpx;animation: myMove 1s linear alternate 1;}@keyframes myMove {0% {height: 350rpx;}50% {height: 300rpx;}100% {height: 350rpx;}}.bubble_box {display: none;}.bubble_boxActive {position: absolute;right: 200rpx;top: -180rpx;width: 280rpx;height: 280rpx;display: flex;align-items: center;justify-content: center;.bubbleImg {position: absolute;width: 100%;height: 100%;}.bubble_text {position: relative;display: flex;font-size: 24rpx;flex-direction: column;}animation: myIdea 3s ease alternate infinite;}@keyframes myIdea {0% {transform: scale(0.1, 0.1);right: 10rpx;top: -100rpx;}30% {transform: scale(0.3, 0.3);right: 10rpx;top: -240rpx;}50% {transform: scale(1, 1);right: 200rpx;top: -180rpx;}100% {transform: scale(1, 1);right: 200rpx;top: -180rpx;}}}
</style>
			// getFunny方法是我这请求后端的数据,active控制class样式切换,以及3秒执行一次setWork() {if (!this.active) {getFunny({data: {},custom: {auth: true,toast: false,catch: true}}).then((res) => {this.funnyList =res.split(',')})this.active = truesetTimeout(() => {this.active = false}, 3000)// 声音const innerAudioContext = uni.createInnerAudioContext();innerAudioContext.autoplay = true;innerAudioContext.sessionCategory = 'ambient';innerAudioContext.src = '/static/lunch/music.mp3';innerAudioContext.onPlay();}// this.statusWork = this.statusWork == 1 ? 2 : 1},

根据时间数字变化

每秒顶部以及秒薪会变化,是使用到了uview中的u-count-down组件。感兴趣的可以看一下如何实现。不感兴趣的会用就行
组件内的部分代码如下:

<template><view class="u-count-down"><slot><text class="u-count-down__text">{{ formattedTime }}</text></slot></view>
</template><script>import props from './props.js';import {isSameSecond,parseFormat,parseTimeData} from './utils';/*** u-count-down 倒计时* @description 该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作。* @tutorial https://uviewui.com/components/countDown.html* @property {String | Number}	time		倒计时时长,单位ms (默认 0 )* @property {String}			format		时间格式,DD-日,HH-时,mm-分,ss-秒,SSS-毫秒  (默认 'HH:mm:ss' )* @property {Boolean}			autoStart	是否自动开始倒计时 (默认 true )* @property {Boolean}			millisecond	是否展示毫秒倒计时 (默认 false )* @event {Function} finish 倒计时结束时触发 * @event {Function} change 倒计时变化时触发 * @event {Function} start	开始倒计时* @event {Function} pause	暂停倒计时 * @event {Function} reset	重设倒计时,若 auto-start 为 true,重设后会自动开始倒计时 * @example <u-count-down :time="time"></u-count-down>*/export default {name: 'u-count-down',mixins: [uni.$u.mpMixin, uni.$u.mixin, props],data() {return {timer: null,// 各单位(天,时,分等)剩余时间timeData: parseTimeData(0),// 格式化后的时间,如"03:23:21"formattedTime: '0',// 倒计时是否正在进行中runing: false,endTime: 0, // 结束的毫秒时间戳remainTime: 0, // 剩余的毫秒时间}},watch: {time(n) {this.reset()}},mounted() {this.init()},methods: {init() {this.reset()},// 开始倒计时start() {if (this.runing) return// 标识为进行中this.runing = true// 结束时间戳 = 此刻时间戳 + 剩余的时间this.endTime = Date.now() + this.remainTimethis.toTick()},// 根据是否展示毫秒,执行不同操作函数toTick() {if (this.millisecond) {this.microTick()} else {this.macroTick()}},macroTick() {this.clearTimeout()// 每隔一定时间,更新一遍定时器的值// 同时此定时器的作用也能带来毫秒级的更新this.timer = setTimeout(() => {// 获取剩余时间const remain = this.getRemainTime()// 重设剩余时间if (!isSameSecond(remain, this.remainTime) || remain === 0) {this.setRemainTime(remain)}// 如果剩余时间不为0,则继续检查更新倒计时if (this.remainTime !== 0) {this.macroTick()}}, 30)},microTick() {this.clearTimeout()this.timer = setTimeout(() => {this.setRemainTime(this.getRemainTime())if (this.remainTime !== 0) {this.microTick()}}, 50)},// 获取剩余的时间getRemainTime() {// 取最大值,防止出现小于0的剩余时间值return Math.max(this.endTime - Date.now(), 0)},// 设置剩余的时间setRemainTime(remain) {this.remainTime = remain// 根据剩余的毫秒时间,得出该有天,小时,分钟等的值,返回一个对象const timeData = parseTimeData(remain)this.$emit('change', timeData)// 得出格式化后的时间this.formattedTime = parseFormat(this.format, timeData)// 如果时间已到,停止倒计时if (remain <= 0) {this.pause()this.$emit('finish')}},// 重置倒计时reset() {this.pause()this.remainTime = this.timethis.setRemainTime(this.remainTime)if (this.autoStart) {this.start()}},// 暂停倒计时pause() {this.runing = false;this.clearTimeout()},// 清空定时器clearTimeout() {clearTimeout(this.timer)this.timer = null}},beforeDestroy() {this.clearTimeout()}}
</script><stylelang="scss"scoped
>@import "../../libs/css/components.scss";$u-count-down-text-color:$u-content-color !default;$u-count-down-text-font-size:15px !default;$u-count-down-text-line-height:22px !default;.u-count-down {&__text {color: $u-count-down-text-color;font-size: $u-count-down-text-font-size;line-height: $u-count-down-text-line-height;}}
</style>

小结

总的来说实现过程不难,难的是思路以及行动力。加油打工人!!!
后面写一篇关于轮盘的实现过程。

这篇关于“打工搬砖记”中首页的功能实现(一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/989999

相关文章

Java StringBuilder 实现原理全攻略

《JavaStringBuilder实现原理全攻略》StringBuilder是Java提供的可变字符序列类,位于java.lang包中,专门用于高效处理字符串的拼接和修改操作,本文给大家介绍Ja... 目录一、StringBuilder 基本概述核心特性二、StringBuilder 核心实现2.1 内部

Android实现图片浏览功能的示例详解(附带源码)

《Android实现图片浏览功能的示例详解(附带源码)》在许多应用中,都需要展示图片并支持用户进行浏览,本文主要为大家介绍了如何通过Android实现图片浏览功能,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

SpringBoot AspectJ切面配合自定义注解实现权限校验的示例详解

《SpringBootAspectJ切面配合自定义注解实现权限校验的示例详解》本文章介绍了如何通过创建自定义的权限校验注解,配合AspectJ切面拦截注解实现权限校验,本文结合实例代码给大家介绍的非... 目录1. 创建权限校验注解2. 创建ASPectJ切面拦截注解校验权限3. 用法示例A. 参考文章本文

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配

Python的Darts库实现时间序列预测

《Python的Darts库实现时间序列预测》Darts一个集统计、机器学习与深度学习模型于一体的Python时间序列预测库,本文主要介绍了Python的Darts库实现时间序列预测,感兴趣的可以了解... 目录目录一、什么是 Darts?二、安装与基本配置安装 Darts导入基础模块三、时间序列数据结构与

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现(FastAPI)2.1 运行环境2.2 目录结构建议2.3 serv

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot?二、环境准备与部署2.1 安装 RustF

Nginx部署HTTP/3的实现步骤

《Nginx部署HTTP/3的实现步骤》本文介绍了在Nginx中部署HTTP/3的详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录前提条件第一步:安装必要的依赖库第二步:获取并构建 BoringSSL第三步:获取 Nginx

MyBatis Plus实现时间字段自动填充的完整方案

《MyBatisPlus实现时间字段自动填充的完整方案》在日常开发中,我们经常需要记录数据的创建时间和更新时间,传统的做法是在每次插入或更新操作时手动设置这些时间字段,这种方式不仅繁琐,还容易遗漏,... 目录前言解决目标技术栈实现步骤1. 实体类注解配置2. 创建元数据处理器3. 服务层代码优化填充机制详