JavaScript初始小实例二_a.onclick = function(){ box.style=''; box.style.wi-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48683052/article/details/121241963

练习：

1、判断奇偶

2、输入框输入三个数，判断最大值

3、点击按钮让盒子放大相应倍数，并且方法后缩小到所点击的倍数（例：点击x4则扩大四倍，再点x2则缩小到二倍状态）

1、判断奇偶

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <input type="number" id="num">
  <input type="button" id="button" value="判断奇偶">
  <script>
	var button = document.getElementById("button");
	var num = document.getElementById("num");
	//绑定点击事件
	button.onclick=function(){
		var num = document.getElementById("num");
		num=Number(num.value);
		if(num % 2 == 0&&num!=0){
			alert('这是偶数')
		}else if(num%2==1&&num!=0){
			alert('这是奇数')
		}else{
			alert('啥都不是')
		}
	}
  </script>
 </body>
</html>

2、输入框输入三个数，判断最大值

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	#res{
		width:300px;
		height:200px;
		border:2px solid #000;
	}
  </style>
 </head>
 <body>
  <input type="text" placeholder="num1"id="n1">
  <input type="text" placeholder="num2"id="n2">
  <input type="text" placeholder="num3"id="n3">
  <input type="button" value="判断"id="butt">
  <div id="res"><div>
  <script>
	var butt= document.getElementById("butt");
	butt.onclick=function(){
		var n1 = document.getElementById("n1");
		n1=Number(n1.value);
		var n2 = document.getElementById("n2");
		n2=Number(n2.value);
		var n3 = document.getElementById("n3");
		n3=Number(n3.value);
		var res = document.getElementById("res");
		if(n1>n2&&n2>n3||n1>n3&&n3>n2){
			res.innerHTML='n1最大，最大值为'+n1+'';
		}else if(n2>n1&&n1>n3||n2>n3&&n3>n1){
			res.innerHTML='n2最大，最大值为'+n2+'';
		}else if(n3>n2&&n2>n1||n3>n1&&n1>n2){
			res.innerHTML='n3最大，最大值为'+n3+'';
		}else{
			res.innerHTML='啥都不是';
		}
	}
</script>
 </body>
</html>

3、点击按钮让盒子放大相应倍数，并且方法后缩小到所点击的倍数（例：点击x4则扩大四倍，再点x2则缩小到二倍状态）

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	.box{
		width:100px;
		height:100px;
		border:2px solid #000;
		background-color:green;
	}
  </style>
 </head>
 <body>
  <div id="box" class="box"></div>
  <input id="a" type="button" value="x2">
  <input id="b" type="button" value="x3">
  <input id="c" type="button" value="x4">
  <script>
	var box =document.getElementById('box')
	var a =document.getElementById('a')
	var b =document.getElementById('b')
	var c =document.getElementById('c')
	a.onclick=function(){
		box.style='';
		box.style.width='200px';
		box.style.height='200px';
	}
	b.onclick=function(){
		box.style='';
		box.style.width='300px';
		box.style.height='300px';
	}
	c.onclick=function(){
		box.style='';
		box.style.width='400px';
		box.style.height='400px';
	}
  </script>
 </body>
</html>