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

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。

相关文章

C#实现将Excel表格转换为图片(JPG/ PNG)

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel
阅读更多...
基于Java实现回调监听工具类

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先，会用到 函数式接口 Consumer, 通过这个可以解耦回调方法，下面先写一个
阅读更多...
使用Java将DOCX文档解析为Markdown文档的代码实现

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown（MD）因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析
阅读更多...
Qt中QGroupBox控件的实现

Qt中QGroupBox控件的实现

《Qt中QGroupBox控件的实现》QGroupBox是Qt框架中一个非常有用的控件,它主要用于组织和管理一组相关的控件,本文主要介绍了Qt中QGroupBox控件的实现,具有一定的参考价值,感兴趣... 目录引言一、基本属性二、常用方法2.1 构造函数 2.2 设置标题2.3 设置复选框模式2.4 是否
阅读更多...
C++使用printf语句实现进制转换的示例代码

C++使用printf语句实现进制转换的示例代码

《C++使用printf语句实现进制转换的示例代码》在C语言中,printf函数可以直接实现部分进制转换功能,通过格式说明符（formatspecifier）快速输出不同进制的数值,下面给大家分享C+... 目录一、printf 原生支持的进制转换1. 十进制、八进制、十六进制转换2. 显示进制前缀3. 指
阅读更多...
springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

《springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法》：本文主要介绍springboot整合阿里云百炼DeepSeek实现sse流式打印,本文给大家介绍的非常详细,对大... 目录1.开通阿里云百炼,获取到key2.新建SpringBoot项目3.工具类4.启动类5.测试类6.测
阅读更多...
pytorch自动求梯度autograd的实现

pytorch自动求梯度autograd的实现

《pytorch自动求梯度autograd的实现》autograd是一个自动微分引擎,它可以自动计算张量的梯度,本文主要介绍了pytorch自动求梯度autograd的实现,具有一定的参考价值,感兴趣... autograd是pytorch构建神经网络的核心。在 PyTorch 中，结合以下代码例子，当你
阅读更多...
SpringBoot集成Milvus实现数据增删改查功能

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2