web前端开发-又双叒叕次数计算

最新推荐文章于 2024-10-16 11:23:07 发布

暮雪倾风

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量109

点赞数

分类专栏： web前端开发文章标签：前端 css css3 html javascript

本文链接：https://blog.csdn.net/qq_39150957/article/details/128324206

版权

web前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用于计算又双叒叕次数，将带有又双叒叕语句转换

例如：我又双叒叕输了转换成我输了11次

闲得无聊写的这段代码，也算是提升个人的能力吧。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>计算器-qbr</title>
	<style>
		#an1,#an11{
			height: 60px;
			background-color: rgba(0, 0, 158, 0);
	        color:#000000;
	        border:0;
	        font-size: 16px;
	        box-sizing: content-box;				
            border-radius: 5px;
			margin: 0px;
		}
		#num{
			width: 421px;
			height: 80px;
			background-color: #ffffff;
			text-align: end;
			font-size: 20px;
			border: 0;
			border-radius: 10px;
		}
		#num1{
			width: 425px;
			height: 60px;
			background-color: #ffffff;
			text-align: end;
			font-size: 20px;
			border: 0;
			border-radius: 10px;
		}
		#an{
			width: 102.5px;
			height: 60px;
			background-color: #ffffff;
	        color:#000000;
	        border:0;
	        font-size: 16px;
	        box-sizing: content-box;				
            border-radius: 5px;
			margin-top: 5px;
		}
		#kuo1,#kuo2,#anq,#ans{
			width: 90px;
			height: 60px;
			background-color: #ffffff;
	        color:#000000;
	        border:0;
	        font-size: 16px;
	        box-sizing: content-box;				
            border-radius: 5px;
			margin-top: 5px;
		}
		#an2,#anf111{
			width: 102.5px;
			height: 102.5px;
			border: 0;
			background-color: #ffffff;
			border-radius: 10px;
			font-size: 20px;

		}
		#an3{
			width: 102.5px;
			height: 102.5px;
			border: 0;
			background-color: #abdfff;
			border-radius: 10px;
			font-size: 20px;
		}
		#anf{
			width: 102.5px;
			height: 102.5px;
			border: 0;
			background-color: #d4efff;
			border-radius: 10px;
			font-size: 20px;
		}
		#anf11{
			width: 102.5px;
			height: 102.5px;
			border: 0;
			background-color: #d4efff;
			border-radius: 10px;
			font-size: 20px;
		}
		#and1{
			width: 210px;
			height: 60px;
			border: 0;
			background-color: #abdfff;
			border-radius: 10px;
			font-size: 20px;
		}
		#anf1{
			width: 210px;
			height: 60px;
			border: 0;
			background-color: #d4efff;
			border-radius: 10px;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div style="background-color: #eeeeee;padding: 10px;width: min-content;border-radius: 15px;">
		<div>
			<script>
			function my(id){
				return document.getElementById(id);
			}

			</script>
		</div>
	
		<!-----生活计算器------>
		<div style="height: 20px;"></div>
		<div id="you">
			<input type="text" value=""placeholder="计算又双叒叕次数" id="num1"/>
			<div style="margin-top: 5px;">
				<input type="button" value="清除" id="anf1"/>
				<input type="button" value="计算" id="and1"/>
			</div>
			<script>
			function sleep(d){
				for(var t = Date.now();Date.now() - t <= d;);
			  }
			  
			my("and1").onclick=function(){
				var num11=my("num1").value;
				if(tongj(num11,"又")==0||tongj(num11,"双")==0||tongj(num11,"叒")==0||tongj(num11,"叕")==0){
					my("num1").value="没有包含又双叒叕字符";


				}else{
					var cis=tongj(num11,"又")+tongj(num11,"双")*2+tongj(num11,"叒")*3+tongj(num11,"叕")*4+1;
					var cis1=tongj(num11,"又")+tongj(num11,"双")+tongj(num11,"叒")+tongj(num11,"叕");
					num11=num11.replace("又","")
					num11=num11.replace("双","")
					num11=num11.replace("叒","")
					num11=num11.replace("叕","")
					var txt1=cis;
					txt1+="次"
					var txt=num11;
					txt+=txt1;
					my("num1").value=txt;
				}
				}
				//清除
				my("anf1").onclick=function(){
					my("num1").value=null;
				}
				//统计字符数量
			function tongj(str, a) {

				let b = str.indexOf(a);
				var num = 0;
				while (b !== -1) {
				console.log(b);
				num++;
				b = str.indexOf(a, b + 1)
				}
				return num;
			}
				//清除
			my("anq").onclick=function(){
				my("num1").value=null;
			}
			</script>
		</div>
	</div>
</body>
</html>

效果图：