JavaScript小练习

最新推荐文章于 2024-06-12 11:59:04 发布

Janemy_

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量57

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Janemy_/article/details/130439535

版权

显示与隐藏

文本编辑器

计算器

1.显示与隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
					function apper(){
						var div1obj=document.getElementById("div1");
						var a1obj=document.getElementById("a1");
						div1obj.style.width="0px";
						div1obj.style.height="0px";
						div1obj.style.backgroundColor="white";
						a1obj.value="显示";		
					}
					function duo(){
						var div1obj=document.getElementById("div1");
						var a1obj=document.getElementById("a1");
						div1obj.style.width="100px";
						div1obj.style.height="100px";
						div1obj.style.backgroundColor="green";
						a1obj.value="隐藏";
									}
							function check(){
								var a1obj=document.getElementById("a1");
								if(a1obj.value=="隐藏"){
									apper();
								}else{
									duo();
								}
							}		
									
				</script>
			</head>
			<body>
			<input type="button" value="显示" id="a1" onclick="check()">
			<div id="div1"></div>
	</body>
</html>

2.文本编辑器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文本编辑器</title>
		<style type="text/css">
			.textBox{
				width: 500px;
				height: 250px;
				background-color: skyblue;
				border-radius: 7px;
				margin-left: auto;
				margin-right: auto;
			}
			.textArea{
				width:494px;
				height: 224px;
				background-color: aliceblue;
				font-weight: 600;
				font-size: 10px;
				font-family: unset;
			}
			.selects{
				width: 500px;
				height: 20px;
			}
			.sel{
				width: 100px;
				height: 18px;
				margin-left: 50px;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				position: relative;
				top: -1px;
			}
		</style>
		<script type="text/javascript">
			function test1(val){
				document.getElementById("txaid").style.color=val;
			}
			function test2(val){
				document.getElementById("txaid").style.fontSize=val;
			}
			function test3(val){
				document.getElementById("txaid").style.fontFamily=val;
			}
		</script>
	</head>
	<body>
		<div style="margin-top: 170px; margin-left: auto; margin-right: auto; width:500px; height:30px; font-size: 25px; color: cadetblue; line-height: 30px; text-align: center; font-weight: 800; font-family: 楷体;">文本编辑器</div>
		<div class="textBox">
			<div class="selects">
				<select class="sel" onchange="test1(this.value)">
					<option selected disabled hidden>颜色</option>
					<option value="black">黑色</option>
					<option value="red">红色</option>
					<option value ="blue">蓝色</option>
					<option value ="yellow">黄色</option>
					<option value ="green">绿色</option>
				</select>
				<select class="sel" onchange="test2(this.value)">
					<option selected disabled hidden>字体大小</option>
					<option value="15px">15</option>
					<option value="20px">20</option>
					<option value ="30px">30</option>
					<option value ="500px">500</option>
				</select>
				<select class="sel" onchange="test3(this.value)">
					<option selected disabled hidden>字体</option>
					<option value="unset">黑体</option>
					<option value="楷体">楷体</option>
					<option value ="宋体">宋体</option>
					<option value ="行草体">行草体</option>
				</select>
			</div>
			<textarea class="textArea" id="txaid"></textarea>
		</div>
	</body>
</html>

3.计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				.counterBox{
					width: 350px;
					height: 280px;
					background-color: darkgray;
					margin:170px auto;
					text-align: center;
				}
				.inputText{
					width:300px;
					height: 30px;
					margin-top: 20px;
					margin-left: 21px;
					margin-right: 21px;
				}
				.buttonArea{
					width: 330px;
					height: 224px;
					margin-left: auto;
					margin-right: auto;
				}
				.button{
					height: 35px;
					width: 70px;
					margin-top: 15px;
				}
			</style>
			<script type="text/javascript">
				var firstNum;
				var secondNum;
				var isOperation = false;
				var operation;
				function show(a){
					var s = document.getElementById("inptxid").value;
					if(isOperation){
						document.getElementById("inptxid").value = s+a;
						secondNum = s+a;
					}else{
						document.getElementById("inptxid").value = s+a;
						firstNum = s+a;
					}
				}
				function add(oper){
					document.getElementById("inptxid").value = "";
					operation = oper;
					isOperation = true;
				}
				function subtraction(oper){
					document.getElementById("inptxid").value = "";
					operation = oper;
					isOperation = true;
				}
				function multiplication(oper){
					document.getElementById("inptxid").value = "";
					operation = oper;
					isOperation = true;
				}
				function division(oper){
					document.getElementById("inptxid").value = "";
					operation = oper;
					isOperation = true;
				}
				function clearinp(){
					document.getElementById("inptxid").value = "";
					isOperation=false;
				}
				function result(){
					if(isOperation){
						if(operation=="+"){
							document.getElementById("inptxid").value = parseInt(firstNum)+parseInt(secondNum);
							firstNum = parseInt(firstNum)+parseInt(secondNum);
						}
						else if(operation=="-"){
							document.getElementById("inptxid").value = parseInt(firstNum)-parseInt(secondNum);
							firstNum = parseInt(firstNum)-parseInt(secondNum);
						}
						else if(operation=="*"){
							document.getElementById("inptxid").value = parseInt(firstNum)*parseInt(secondNum);
							firstNum = parseInt(firstNum)*parseInt(secondNum);
						}
						else if(operation=="/"){
							if(secondNum!="0"){
								document.getElementById("inptxid").value = parseInt(firstNum)+parseInt(secondNum);
								firstNum = parseInt(firstNum)+parseInt(secondNum);
							}
							else{
								alert("除数不能为0！")
								clearinp();
							}
						}
					}
					else{
						alert("无法运算！");
					}
				}
			</script>
		</head>
		<body>
			<div class = "counterBox">
				<input type="text" class="inputText" id="inptxid" />
				<div class="buttonArea">
					<input type="button" value="7" class="button" onclick="show(this.value)"/>
					<input type="button" value="8" class="button" onclick="show(this.value)"/>
					<input type="button" value="9" class="button" onclick="show(this.value)"/>
					<input type="button" value="+" class="button" onclick="add(this.value)"/>
					<input type="button" value="4" class="button" onclick="show(this.value)"/>
					<input type="button" value="5" class="button" onclick="show(this.value)"/>
					<input type="button" value="6" class="button" onclick="show(this.value)"/>
					<input type="button" value="-" class="button" onclick="subtraction(this.value)"/>
					<input type="button" value="1" class="button" onclick="show(this.value)"/>
					<input type="button" value="2" class="button" onclick="show(this.value)"/>
					<input type="button" value="3" class="button" onclick="show(this.value)"/>
					<input type="button" value="*" class="button" onclick="multiplication(this.value)"/>
					<input type="button" value="0" class="button" onclick="show(this.value)"/>
					<input type="button" value="c" class="button" onclick="clearinp()"/>
					<input type="button" value="=" class="button" onclick="result()"/>
					<input type="button" value="/" class="button" onclick="division(this.value)"/>
				</div>
			</div>
	</body>
</html>