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

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。

相关文章

windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
C#使用yield关键字实现提升迭代性能与效率

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭
阅读更多...
Python实现高效地读写大型文件

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作（适用于大文件）四、使用 pand
阅读更多...
python实现pdf转word和excel的示例代码

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1，PDF转Word2，PDF转Excel三、前端页面效果展示总结一
阅读更多...
Python xmltodict实现简化XML数据处理

Python xmltodict实现简化XML数据处理

《Pythonxmltodict实现简化XML数据处理》Python社区为提供了xmltodict库,它专为简化XML与Python数据结构的转换而设计,本文主要来为大家介绍一下如何使用xmltod... 目录一、引言二、XMLtodict介绍设计理念适用场景三、功能参数与属性1、parse函数2、unpa
阅读更多...
C#实现获得某个枚举的所有名称

C#实现获得某个枚举的所有名称

《C#实现获得某个枚举的所有名称》这篇文章主要为大家详细介绍了C#如何实现获得某个枚举的所有名称,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... C#中获得某个枚举的所有名称using System;using System.Collections.Generic;usi
阅读更多...
Go语言实现将中文转化为拼音功能

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求：新用户入职 创建一系列账号比较麻烦，打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英
阅读更多...
C# 读写ini文件操作实现

C# 读写ini文件操作实现

《C#读写ini文件操作实现》本文主要介绍了C#读写ini文件操作实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录一、INI文件结构二、读取INI文件中的数据在C#应用程序中，常将INI文件作为配置文件，用于存储应用程序的
阅读更多...
C#实现获取电脑中的端口号和硬件信息

C#实现获取电脑中的端口号和硬件信息

《C#实现获取电脑中的端口号和硬件信息》这篇文章主要为大家详细介绍了C#实现获取电脑中的端口号和硬件信息的相关方法,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 我们经常在使用一个串口软件的时候，发现软件中的端口号并不是普通的COM1，而是带有硬件信息的。那么如果我们使用C#编写软件时候，如
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2