uniapp中制作战力计算器

最新推荐文章于 2024-06-14 14:37:56 发布
最新推荐文章于 2024-06-14 14:37:56 发布
阅读量1k 收藏 3
点赞数
分类专栏： uni-app 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37117408/article/details/120313622
版权

uniapp中制作战力计算器

在这里插入图片描述

在这里插入图片描述

<template>
	<view class="calculate-wrap">
		<!-- 计时器-start -->
		<view class="calculate-screen">
			<view class="calculate-screen-title">
				<image class="calculate-screen-small" mode="aspectFill" src="@/pagesB/static/calculate/small.png"></image>
				<view class="calculate-screen-title-content">
					<template v-if="isPause">
					   <image mode="aspectFill" @click="isPauseHandle(false)" class="calculate-screen-title-content-icon" src="@/pagesB/static/calculate/end.png"></image>
					</template>
					<template v-else>
						<image mode="aspectFill" @click="isPauseHandle(true)" class="calculate-screen-title-content-icon" src="@/pagesB/static/calculate/start.png"></image>
					</template>
					<text class="calculate-screen-title-content-text">{{countdown}}</text>
				</view>
			</view>
			<image class="calculate-screen-big" mode="aspectFill" src="@/pagesB/static/calculate/big.png"></image>
			<view class="calculate-screen-content">
				<view class="calculate-screen-content-box">
					<view class="calculate-screen-content-box-lf">
						<template v-if="powerValueCurrentIndex=='A'">
							<view class="calculate-screen-people" @click="changeClashRoleHandle(powerValueA,'A')">
								<view class="calculate-screen-people-title">DUEL 01</view>
								<view class="calculate-screen-people-number">{{powerValueA}}</view>
							</view>
						</template>
						<template v-else>
							<view class="calculate-screen-people" @click="changeClashRoleHandle(powerValueA,'A')" style="opacity: 0.5;">
								<view class="calculate-screen-people-title">DUEL 01</view>
								<view class="calculate-screen-people-number">{{powerValueA}}</view>
							</view>
						</template>
					</view>
					<image class="calculate-screen-content-box-clash" mode="aspectFill" src="@/pagesB/static/calculate/clash.png"></image>
					<view class="calculate-screen-content-box-rg">
						<template v-if="powerValueCurrentIndex=='B'">
							<view class="calculate-screen-people" @click="changeClashRoleHandle(powerValueB,'B')">
								<view class="calculate-screen-people-title">DUEL 02</view>
								<view class="calculate-screen-people-number">{{powerValueB}}</view>
							</view>
						</template>
						<template v-else>
							<view class="calculate-screen-people" @click="changeClashRoleHandle(powerValueB,'B')" style="opacity: 0.5;">
								<view class="calculate-screen-people-title">DUEL 02</view>
								<view class="calculate-screen-people-number">{{powerValueB}}</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
		<!-- 计时器-end -->
		<!-- footer-start -->
		<view class="calculate-footer">
			<!-- 计算屏幕区域 -->
			<view class="calculate-footer-screen">
				<text class="calculate-footer-screen-num">{{calculateTotal}}</text>
				<text class="calculate-footer-screen-operate" style="margin-left: 5px;margin-right: 5px;">{{calculateOperate}}</text>
				<text class="calculate-footer-screen-num">{{calculateVariable}}</text>
			</view>
			<!-- 计算操作按钮区域 -->
			<view class="calculate-footer-operate">
				<view class="calculate-footer-operate-item" @click="calculateCLRHandle()" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">CLR</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('7')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">7</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('8')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">8</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('9')" style="border-top: 1px solid #29304A;">9</view>
				<view class="calculate-footer-operate-item" @click="calculateOperateHandle('+')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">+</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('4')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">4</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('5')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">5</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('6')" style="border-top: 1px solid #29304A;">6</view>
				<view class="calculate-footer-operate-item" @click="calculateOperateHandle('-')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">-</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('1')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">1</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('2')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">2</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('3')" style="border-top: 1px solid #29304A;">3</view>
				<view class="calculate-footer-operate-item" @click="calculateOperateHandle('/')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">÷2</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('0')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">0</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('00')" style="border-top: 1px solid #29304A;border-right: 1px solid #29304A;">00</view>
				<view class="calculate-footer-operate-item" @click="calculateNumberHandle('000')" style="border-top: 1px solid #29304A;">000</view>
			</view>
			<!-- 计算确认按钮 -->
			<view class="calculate-footer-operate-btn" @click="calculateTotalHandle">=</view>
			<!-- 底部按钮 -->
			<view class="calculate-footer-box">
				<view class="calculate-footer-item">
					<image src="@/pagesB/static/calculate/jilu.png" class="calculate-footer-item-icon"></image>
					<text class="calculate-footer-item-name">记录</text>
				</view>
				<view class="calculate-footer-item">
					<image src="@/pagesB/static/calculate/shaizi.png" class="calculate-footer-item-icon"></image>
					<text class="calculate-footer-item-name">筛子</text>
				</view>
				<view class="calculate-footer-item">
					<image src="@/pagesB/static/calculate/yingbi.png" class="calculate-footer-item-icon"></image>
					<text class="calculate-footer-item-name">硬币</text>
				</view>
				<view class="calculate-footer-item">
					<image src="@/pagesB/static/calculate/shezhi.png" class="calculate-footer-item-icon"></image>
					<text class="calculate-footer-item-name">设置</text>
				</view>
			</view>
		</view>
		<!-- footer-end -->
	</view>
</template>

<script>
	let timer=null;
	export default {
		data() {
			return {
				isPause:false,//是否暂停，true：暂停；false：继续
				limitTime:356400,//限制最大时间
				time:0,//计时开始值
				countdown:"00:00:00",//计时
				calculateTotal:"",//计算的开始值
				calculateOperate:"",//操作符
				calculateVariable:"",//计算的变量
				
				powerValueA:"8000",//战力值
				powerValueB:"80000",//战力值
				powerValueCurrentIndex:'A',//
			};
		},
		onLoad() {
			this.calculateOperate="";
			this.calculateVariable="";
			if(this.powerValueCurrentIndex=='A'){
				this.calculateTotal=this.powerValueA;
			}else{
				this.calculateTotal=this.powerValueB;
			}
			
		},
		onShow() {
			this.timingFun();
		},
		onHide() {
			console.log("[关闭页面onHide]")
			clearInterval(timer)
		},
		onUnload() {
			console.log("[关闭页面onUnload]")
			clearInterval(timer)
		},
		methods:{
			//是否开始计时器
			isPauseHandle(state){
				this.isPause=state;
				if(state){
					clearInterval(timer)
				}else{
					this.timingFun();
				}
			},
			timingFun(){
				let time=this.time;
			    let limitTime=this.limitTime;
				timer=setInterval(()=>{
					time+=1;
					this.time=time
					if(time>limitTime){
						clearInterval(timer);
						return false
					}
					this.countdown=this.countdownFun(time)
				},1000)
			},
			countdownFun(result){
				var h = Math.floor(result / 3600) < 10 ? '0'+Math.floor(result / 3600) : Math.floor(result / 3600);
				var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
				var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
				result = h+':'+m + ":" + s;
				console.log(result)
				return result;
			},
			//点击战力值
			changeClashRoleHandle(powerValue,currentIndex){
				console.log(powerValue)
				this.calculateTotal=powerValue;
				this.powerValueCurrentIndex=currentIndex;
			},
			//计算结果
			calculateTotalHandle(){
				const calculateTotal=Number(this.calculateTotal);//计算总值
				const calculateVariable=Number(this.calculateVariable);//操作值
				const calculateOperate=this.calculateOperate;//操作符
				const powerValueCurrentIndex=this.powerValueCurrentIndex;
				let tempTotal=0;
				if(calculateVariable>0){
					if(calculateOperate=='+'){
						tempTotal=calculateTotal+calculateVariable;
					}else{
						tempTotal=calculateTotal-calculateVariable;
					}
					if(tempTotal<=0){
						tempTotal=0;
					}
					if(tempTotal>999999){
						tempTotal=999999;
					}
					this.calculateTotal=tempTotal;
					if(powerValueCurrentIndex=='A'){
						this.powerValueA=tempTotal;//战力值
					}else{
						this.powerValueB=tempTotal;//战力值
					}
					console.log("ok=")
					//清除输入值
					this.calculateOperate="";
					this.calculateVariable="";
					
				}
				
			},
			//操作值
			calculateNumberHandle(number){
				const calculateTotal=Number(this.calculateTotal);//计算总值
				const calculateOperate=this.calculateOperate;//操作符
				const calculateVariable=Number(this.calculateVariable);//操作值
				if(Number(number)==0){
					if(calculateVariable!=0){
						if(calculateOperate==""){
							this.calculateOperate='-'
						}
						this.calculateVariable+=number
					}
				}else{
					if(calculateOperate==""){
						this.calculateOperate='-'
					}
					this.calculateVariable+=number
				}
				if(Number(this.calculateVariable)>calculateTotal){
					this.calculateVariable=calculateTotal
				}
				
			},
			//操作符
			calculateOperateHandle(operate){
				this.calculateVariable="";
				if(operate=='+'){
					this.calculateOperate='+'
				}else if(operate=='-'){
					this.calculateOperate='-'
				}else{
					this.calculateOperate='-'
					this.calculateVariable=Math.floor(this.calculateTotal/2)
				}
			},
			//清空
			calculateCLRHandle(){
				this.calculateOperate="";
				this.calculateVariable="";
			}
		}
	}
</script>

<style lang="scss" scoped>
.calculate-wrap{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    background: #131728;
	.calculate-screen{
		width: 348px;
		height: 152px;
		margin: auto;
		margin-top: 24.5px;
		position: relative;
		.calculate-screen-big{
			width: 100%;
			height: 100%;
		}
		.calculate-screen-title{
			width: 248px;
			height: 49px;
			position: absolute;
			top:-24.5px;
			left: 50%;
			transform: translateX(-50%);
			.calculate-screen-small{
				width: 100%;
				height: 100%;
			}
			.calculate-screen-title-content{
				width: 100%;
				height: 49px;
				position: absolute;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				.calculate-screen-title-content-icon{
					width: 20.4px;
					height: 20.4px;
				}
				.calculate-screen-title-content-text{
					font-size: 23px;
					font-family: Arial;
					font-weight: 400;
					color: #B8C7FF;
					margin-left: 11px;
					padding-top: 2px;
				}
			}
		}
		.calculate-screen-content{
			width: 348px;
			height: 152px;
			position: absolute;
			top: 0;
			left: 0;
			.calculate-screen-content-box{
				width: 100%;
				position: relative;
				height:127.5px;
				margin-top: 24.5px;
				.calculate-screen-content-box-clash{
					position: absolute;
					width: 59px;
					height: 78.5px;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
				}
				.calculate-screen-content-box-lf{
					position: absolute;
					top: 15px;
					left: 10px;
					width: 125px;
				}
				.calculate-screen-content-box-rg{
					position: absolute;
					top: 15px;
					right: 10px;
					width: 123px;
				}
				.calculate-screen-people{
					display: flex;
					flex-direction: column;
					text-align: center;
					.calculate-screen-people-title{
						font-size: 16px;
						font-family: Arial;
						font-weight: bold;
						color: #FFFFFF;
					}
					.calculate-screen-people-number{
						border-bottom: 1px solid #FFFFFF;
						width: 100px;
						padding: 10px 0px 6px 0px;
						font-size: 25px;
						font-family: Arial;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						margin: auto;
					}
				}
			}
		}
	}
	.calculate-footer{
		position: fixed;
		min-height: 408px;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 1;
		background: #0A0E1D;
		border-radius: 20px 20px 0px 0px;
		display: flex;
		flex-direction: column;
		//计算屏幕
		.calculate-footer-screen{
			border-radius: 20px 20px 0px 0px;
			height: 60px;
			line-height: 60px;
			font-size: 25px;
			font-family: Arial;
			font-weight: 400;
			color: #FFFFFF;
			padding-left: 22px;
		}
		//计算操作按钮区域
		.calculate-footer-operate{
			display: flex;
			flex-wrap: wrap;
			.calculate-footer-operate-item{
				width: 24.75%;
				height: 60px;
				font-size: 22px;
				font-family: Arial;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		//计算操作确认按钮
		.calculate-footer-operate-btn{
			border-top: 1px solid #29304A;
			height: 60px;
			line-height: 60px;
			font-size:25px;
			font-family: Arial;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
		}
		//底部按钮
		.calculate-footer-box{
			height: 49px;
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			box-shadow: 0px 0px 5px 1.5px rgba(127, 140, 189, 0.16);
			.calculate-footer-item{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				.calculate-footer-item-icon{
					width: 25px;
					height: 25px;
					margin-top: 5px;
				}
				.calculate-footer-item-name{
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					opacity: 0.97;
				}
			}
		}
	}
}
</style>
miao_zz
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用UniApp构建简易计算器
emmp40的博客
06-20 1070
通过Vue.js的模板语法和UniApp提供的丰富功能，我们可以快速开发出一个具有基本计算功能的应用程序。如果你对跨平台应用开发感兴趣，或者想要寻找一个强大且易用的工具来实现你的创意，那么不妨尝试一下UniApp。按钮部分使用嵌套的`<view>`和`<button>`元素来创建一系列按钮，而按钮的文本和样式则通过Vue绑定实现。第三步：处理计算逻辑 我们需要在页面的script标签中添加逻辑代码，来处理按钮的点击事件和计算逻辑。在这段代码中，我们使用了Vue.js的模板语法来定义计算器页面的结构。
uniapp实现计算器功能
10-05
在uniapp中，我们可以利用它的API和插件来扩展功能，比如与硬件交互、网络请求等。 对于计算器的实现，我们主要关注以下几个部分： 1. **布局设计**：计算器的界面通常由数字键、运算符键和结果显示区组成。可以...
用uniapp实现一个简单的计算器
06-08
用uniapp实现一个简单的计算器，亲测有效！
uniapp实现简易计算器
weixin_47586598的博客
03-20 1541
uniapp实现简易计算器
uniapp做一个简答计算器！+号怎么不行呢？？
最新发布
qq_41691068的博客
06-14 146
发现一个非常奇怪的事情！+号就不行！选择使用+号是拼接一起了！如果使用其他符号就是计算！
uniapp中实现简易计算器
纸鸢的博客
02-02 3867
uniapp中实现简易计算器 主要问题：在计算器的实现过程中会遇到小数点计算精度； 此计算器是依赖了uni-popup的弹出层插件，可在uniapp官方组件中查找扩展插件popup弹窗层下载，也可直接点击该（https://ext.dcloud.net.cn/plugin?id=329）链接直接下载 计算器效果图 HTML源码 <template> <view class="uni-popup-calculator"> <view class="uni-popup-ca
【uniapp+node.js】用户式加班计算器项目
悟空—
02-02 329
加班时长计算器（uniapp+node）
uniapp房贷计算器小程序源码包
08-12
【uniapp房贷计算器小程序...总的来说，这个uniapp房贷计算器小程序源码包提供了一个实际的计算工具，涵盖了房贷计算的基本要素，并展示了uni-app在小程序开发中的实际应用，对于学习者和开发者都有很高的参考价值。
气缸输出力计算器.exe
04-26
气缸输出力计算器
c语言制作计算器
08-09
在C语言中制作一个计算器是一项基础且有趣的编程实践。它能帮助初学者更好地理解C语言的基本语法、控制结构以及函数的运用。以下是一些关于如何使用C语言制作计算器的重要知识点： 1. **基本输入输出**：C语言使用`...
uniapp写一个计算器用于记账（微信小程序，APP）
csdnyp的博客
11-03 1168
uniapp，记账小程序，数字键盘，计算器
uniapp房贷计算器,适用pc移动端
02-01
房贷计算器，功能全面，设计及页面好看，适用于移动端和pc端
Android 计算器（仅限定两个数的运算）
10-18
Android 计算器（仅限定两个数的运算），运算完点击一个数会自动进行下一次运算，不用手动清楚前面的数据，有一个缺点：运算结果可能会损失精度
uniapp中使用mathJax解析数学公式
03-15
uniapp中使用mathJax解析数学公式，兼容App与H5
科学计算器 微信小程序
10-20
微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。微信小程序源码，前端源码，简单展示源码，原生小程序源码 非uniapp，仅供参考，如有涉及版权问题请联系作者。
uniapp -卡牌游戏战斗计算及动画展现页面源代码.zip
09-19
此代码为uniapp框架下用vue2语言写的一个有战斗动画播放的示例页面以及伤害计算的js模块的简易可运行完整代码包，其中【伤害计算】包含了(命中、闪避、格挡、破挡、暴击、抗暴、附加各种状态等多种战斗机制)，在示例页面也实现了展示各种战斗机制的显示动画以及简单的技能攻击动画。
uni-app 仿 ios 计算器功能
qq_45032714的博客
05-06 429
使用 uni-app 仿 ios 计算器功能，附仓库地址 https://github.com/peng-xiao-shuai/calculator
uniapp实现计数器
qq_40791594的博客
03-30 913
Uni-app 是一个跨平台开发框架，可以使用 Vue 组件语法编写一次编译即可发布到多个平台的应用程序，包括iOS、Android、H5、微信小程序等。2.在页面组件中定义一个数据变量。3.点击按钮+1或者-1。
uniapp 语音播报的功能_你用手机自带计算器？教你一招，能显示计算过程还全程语音播报...
weixin_39644377的博客
12-13 422
现在，不管用什么牌子的手机都会有自带的计算器功能，而且大家经常会用到手机计算器。那么，你知道手机计算器隐藏的功能吗？你知道手机计算器还可以靠语音来计算吗？今天就给大家分享一招手机计算器隐藏的功能，不仅能显示计算过程而且还能全程语音播报，方便又实用，解决了很多人困扰的烦恼。下面就来了解一下手机计算器隐藏的这个功能吧！手机计算器隐藏的功能你平常用手机计算器的次数多吗？你知道手机计算器隐藏的功能吗？想必...
uniapp 做的一个房贷计算器
陈熙之的博客
10-15 1269
在支付宝的文档中找到一个比较详细的公式 等额本息计算公式 每月还款额=贷款本金×[月利率×（1+月利率）^还款月数]÷[（1+月利率）^还款月数-1] 总支付利息：总利息=还款月数×每月月供额-贷款本金 每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕 每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕 总利息=还款月数×每月月供额-贷款本金 等额本金计算..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值