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

文章目录

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

打工搬砖记

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

秒薪的计算

秒薪计算公式:秒薪 = 平均月薪/工作天数/(工作时间-午休时间)
平均月薪以及工作天数是用户自行设置的,一天工作多少秒这个比较难点需要计算一下。
"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.mzph.cn/news/837508.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring常见的注解

前言 在当今的软件开发领域&#xff0c;Spring框架已经成为了Java开发中不可或缺的重要工具之一。其优秀的设计和丰富的功能使得开发者能够更加高效地构建出稳健、可扩展的企业级应用程序。而Spring框架的注解机制&#xff0c;则是其灵活性和便捷性的重要体现之一。 本文将深入…

RPA的全新形态—Agent智能体:当机器人开始“听”话

随着人工智能技术的不断进步&#xff0c;RPA正迈向其全新形态——Agent智能体。想象一下&#xff0c;如果你的日常工作中有一个智能助手&#xff0c;它不仅能理解你的需求&#xff0c;还能自动帮你完成那些繁琐的任务&#xff0c;这会是怎样的体验&#xff1f;这就是RPA技术正在…

SpringBoot+Mock Mvc测试web接口增删改查、导入导出

需求&#xff1a; 使用Mock Mvc单元测试web接口的增删改查、导入、导出功能&#xff0c;涵盖登录 token header赋值等全流程 1&#xff0c;引入核心依赖 <!-- 单元测试 --><dependency><groupId>junit</groupId><artifactId>junit</artifac…

从零创建一个vue2项目

标题从零创建一个vue2项目&#xff0c;项目中使用TensorFlow.js识别手写文字 npm切换到淘宝镜像 npm config set registry https://registry.npm.taobao.org安装vue/cli -g npm install -g vue/cli检查是否安装成功 vue -V创建项目 vue create 项目名安装TensorFlow npm …

RAC中Voting盘相关总结

一、概述 在Oracle RAC&#xff08;Real Application Clusters&#xff09;环境中&#xff0c;"voting盘" 是用于存储集群的心跳信息和状态信息的特殊磁盘。每个节点都可以访问并共享此磁盘上的数据。voting盘在Oracle RAC中扮演着至关重要的角色&#xff0c;用于维护…

cpp笔记-24-05-10

1、public —— 外部也能访问 2、private —— 只能内部&#xff08;友元也可以&#xff09; 3、explicit —— 只可用于声明単参构造函数。声明类的构造函数是显示调用&#xff0c;不是隐式。阻止调用构造函数时隐式转换&#xff08;赋值初始化&#xff09; 4、默认构造函数…

Arduino-ILI9341驱动-SPI接口TFTLCD实现触摸功能系列之触控开关二

Arduino-ILI9341驱动-SPI接口TFTLCD实现触摸功能系列之触控开关二 1.概述 这篇文章在触摸屏上绘制一个开关&#xff0c;通过点击开关实现控制灯的开关功能。 2.硬件 硬件连接参考第一篇文章介绍 Arduino-ILI9341驱动-SPI接口TFTLCD实现触摸功能系列之获取触控坐标一 3.实现…

在线caj转换成pdf免费吗?caj变成pdf很容易!点进来!

在数字化阅读日益盛行的今天&#xff0c;各种电子文献格式层出不穷&#xff0c;其中CAJ和PDF无疑是两种最为常见的格式。CAJ是中国知网推出的一种专用全文阅读格式&#xff0c;而PDF则因其跨平台、不易被修改的特性&#xff0c;受到了广大读者的青睐。因此&#xff0c;将CAJ格式…

Auto.js如何打包成APK文件

Auto.js 是一个基于 JavaScript 的自动化脚本工具&#xff0c;它可以被打包成 APK 文件&#xff0c;以便在 Android 设备上安装和运行。以下是根据您提供的搜索结果中关于如何将 Auto.js 脚本打包成 APK 文件的步骤&#xff1a; 1. **安装 Auto.js App**&#xff1a;首先&…

【C++】 类的新成员:static成员和类的好朋友:友元

欢迎来到CILMY23的博客 &#x1f3c6;本篇主题为&#xff1a; 类的新成员&#xff1a;static成员和类的好朋友&#xff1a;友元 &#x1f3c6;个人主页&#xff1a;CILMY23-CSDN博客 &#x1f3c6;系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法 | 贪心算法 | Li…

网络编程套接字(一) 【简单的Udp网络程序】

网络编程套接字<一> 理解源端口号和目的端口号PORT VS PID认识TCP协议和UDP协议网络字节序socket编程接口sockaddr结构简单的UDP网络程序服务端创建套接字服务端绑定运行服务器客户端创建套接字关于客户端的绑定问题启动客户端启动客户端本地测试INADDR_ANY 理解源端口号…

怎么给视频加水印?2招轻松搞定

在数字媒体时代&#xff0c;视频水印作为一种有效的版权保护手段&#xff0c;被广泛应用于各种场景。给视频添加水印不仅可以防止内容被恶意盗用&#xff0c;还能增加视频的辨识度&#xff0c;提升品牌形象。本文将为您介绍2种简单易行的方法&#xff0c;教您怎么给视频加水印&…

Linux进程控制——Linux进程等待

前言&#xff1a;接着前面进程终止&#xff0c;话不多说我们进入Linux进程等待的学习&#xff0c;如果你还不了解进程终止建议先了解&#xff1a; Linux进程终止 本篇主要内容&#xff1a; 什么是进程等待 为什么要进行进程等待 如何进程等待 进程等待 1. 进程等待的概念2. 进…

软件杯 深度学习的水果识别 opencv python

文章目录 0 前言2 开发简介3 识别原理3.1 传统图像识别原理3.2 深度学习水果识别 4 数据集5 部分关键代码5.1 处理训练集的数据结构5.2 模型网络结构5.3 训练模型 6 识别效果7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习…

【数据结构】平衡二叉树(插入、查找、删除)解析+完整代码

3.2 平衡二叉树 3.2.1 定义 平衡二叉树&#xff0c;简称平衡树&#xff08;AVL树&#xff09; 树上任一结点的左右子树高度差不超过1。 结点的平衡因子左子树高-右子树高 3.2.2 插入操作 插入结点后&#xff0c;可能造成不平衡 要调整最小不平衡子树&#xff0c;使其恢复平衡。…

武装部三维电子沙盘-行动路径规划分析平台

武装部三维电子沙盘-行动路径规划分析平台是一款集成了大数据、云计算、虚拟现实、物联网、AI等先进技术的综合性系统。它真实模拟地形、地貌、地物&#xff0c;结合地理空间专业数据、执勤兵力部署、基干民兵信息、普通民兵信息、潜力资源信息、军队相关专业数据、兵要地志数据…

【回溯 代数系统】679. 24 点游戏

本文涉及知识点 回溯 代数系统 LeetCode679. 24 点游戏 给定一个长度为4的整数数组 cards 。你有 4 张卡片&#xff0c;每张卡片上都包含一个范围在 [1,9] 的数字。您应该使用运算符 [‘’, ‘-’, ‘*’, ‘/’] 和括号 ‘(’ 和 ‘)’ 将这些卡片上的数字排列成数学表达式…

SQLserver - 笔记

1 SQLserver - 用户管理 4、SQL SERVER数据库用户管理_哔哩哔哩_bilibili 创建用户 - user 2.选择用户&#xff0c;修改属性

Qt---绘图和绘图设备

一、QPainter绘图 绘图事件 void paintEvent() 声明一个画家对象&#xff0c;OPainter painter(this) this指定绘图设备 画线、画圆、画矩形、画文字 设置画笔QPen 设置画笔宽度、风格 设置画刷QBrush 设置画刷风格 代码示例&#xff1a; #includ…

LeetCode---循环队列

循环队列就是只有固定的内存&#xff0c;存数据&#xff0c;出数据&#xff0c;但是也和队列一样&#xff0c;先进先出。如下图所示&#xff0c;这是他的样子 在head出&#xff0c;tail进&#xff0c;但是这个如果用数组解决的话&#xff0c;就有问题&#xff0c;力扣给我们的接…