原生态JS脚本简单应用——简易计算器+开关灯

本文链接：https://blog.csdn.net/qq_44754886/article/details/115865260

四则运算+字符串拼接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>四则运算+字符串拼接</title>
	</head>
	<body>
		<input type="text" id="a" />
		<select id="select1">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" id="b" />=
		<input type="text" id="sum" />
		<input type="button" value="计算" onclick="fun1();" />
	</body>
	<script>
		function fun1() {
			// 从输入框取得值默认都是string类型
			var a = document.getElementById("a").value;
			var b = document.getElementById("b").value;	
			var select1 = document.getElementById("select1").value;
			// NaN(not a number)
			// isNaN() true,非number的值
			//console.log(isNaN("123"));
			if(a!=null && a!='' && !isNaN(a) && b!=null && b!='' && !isNaN(b)){
				// parseInt() parseFloat()将字符串类型的数值，转换成number类型的值
				var sum;
				if(select1=="+"){
					sum = parseInt(a) + parseInt(b);
				}else if(select1=="-"){
					sum = parseInt(a) - parseInt(b);
				}else if(select1=="*"){
					sum = parseInt(a) * parseInt(b);
				}else if(select1=="/"){
					sum = parseInt(a) / parseInt(b);
				}				
				document.getElementById("sum").value = sum;
			}else{
				document.getElementById("sum").value = a+b;
			}
			
		}
	</script>
</html>

结果：
在这里插入图片描述

开关灯

<html>
	<head>
		<meta charset="utf-8">
		<title>开关灯</title>
	</head>
	<body id="body1">
		<input type="button" value="开灯" id="but1" />
		<input type="button" value="关灯" id="but2" />
	</body>
	<script>
		// 事件绑定（显示和动作分离）
		document.getElementById("but1").onclick = function(){
			document.getElementById("body1").style.backgroundColor = "white";
		}
		document.getElementById("but2").onclick = function(){
			var body1 = document.getElementById("body1");
			// 通过脚本的方式，更改元素的样式
			body1.style.backgroundColor="black";
		}
	</script>
</html>