重庆网站建设网页设计,国外的创意设计网站,做阿里巴巴的网站的费用吗,wordpress视频分享文章目录 打工搬砖记秒薪的计算文字弹出动画根据时间数字变化小结 打工搬砖记
先来一个小程序首页预览图#xff0c;首页较为复杂的也就是“秒薪”以及弹出文字的动画。 已上线小程序“打工人搬砖记”#xff0c;进行预览观看。
秒薪的计算
秒薪计算公式#xff1a;秒薪… 文章目录 打工搬砖记秒薪的计算文字弹出动画根据时间数字变化小结 打工搬砖记
先来一个小程序首页预览图首页较为复杂的也就是“秒薪”以及弹出文字的动画。 已上线小程序“打工人搬砖记”进行预览观看。
秒薪的计算
秒薪计算公式秒薪 平均月薪/工作天数/工作时间-午休时间 平均月薪以及工作天数是用户自行设置的一天工作多少秒这个比较难点需要计算一下。 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 clicksetWork classbasis_rightview :class[active?bubble_boxActive:bubble_box]image src../../static/role/bubble.png classbubbleImg mode/imageview classbubble_texttext v-for(item,index) in funnyList :keyindex {{item}}/text/view/viewimage v-showstatusWork 1 src../../static/role/luXun_rest.png:class[active?luxunImgActive:luxunImg] mode/imageimage v-showstatusWork 2 src../../static/role/luXun_active.png:class[active?luxunImgActive:luxunImg] mode/image/view
!-- 样式 --
style langscss.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组件。感兴趣的可以看一下如何实现。不感兴趣的会用就行 组件内的部分代码如下
templateview classu-count-downslottext classu-count-down__text{{ formattedTime }}/text/slot/view
/templatescriptimport 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 :timetime/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:21formattedTime: 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()}}
/scriptstylelangscssscoped
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
小结
总的来说实现过程不难难的是思路以及行动力。加油打工人 后面写一篇关于轮盘的实现过程。
