JavaScript初始小实例三

最新推荐文章于 2022-06-24 17:32:47 发布

橘子爱吃香菜

最新推荐文章于 2022-06-24 17:32:47 发布

阅读量1.7k

点赞数

分类专栏：基础 JavaScript 前端文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/weixin_48683052/article/details/121242214

版权

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

JavaScript

14 篇文章 15 订阅

订阅专栏

基础

8 篇文章 0 订阅

订阅专栏

这篇博客通过三个JavaScript实例展示了如何实现点击元素使其放大缩小、生成乘法表以及创建自定义宽度、高度、颜色和数量的菱形布局。第一个示例使用原生JS监听点击事件改变盒子尺寸；第二个实例用for循环生成1到9的乘法表；第三个例子则根据用户输入创建动态的菱形图案，实现了先递增再递减的布局效果。

摘要由CSDN通过智能技术生成

练习：

1、点击盒子让盒子放大缩小（原生js）

2、原生JS：乘法表

3、自定义宽度、高度、个数及选取颜色输出相应的盒子，并先递增再递减（输出的结果像菱形一样）

1、点击盒子让盒子放大缩小（原生JS）

<!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"></div>
  <script>
	var box =document.getElementById('box')	
		var b=0; 
	box.onclick=function(){
		b=b+1;
			if(b%2==0){
				box.style='';
				box.style.width='200px';
				box.style.height='200px';
			}else{
				box.style='';
				box.style.width='100px';
				box.style.height='100px';
			}
		}
  </script>
 </body>
</html>

2、原生JS：乘法表

<!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>
  <script>
	for(var i=1; i<=9;i++){
		  for(var j=1; j<=9;j++){
			document.write(i+'*'+j+'='+j*i+'&nbsp;');
			if(i==j){
				document.write('<br/>')
				break;
			}
			
		}
		
	}

  </script>
 </body>
</html>

3、自定义宽度、高度、个数输出相应的格子，并先递增再递减（输出的结果像菱形一样）

<!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{
		border:2px solid #000;
		min-height:200px;
	}
  </style>
 </head>
 <body>
  <input type="text" id="n1">
  <input type="text" id="n2">
 <select id ="select">//选取颜色
		<option value="red">红</option>
		<option value="orange">橙</option>
		<option value="yellow">黄</option>
		<option value="green">绿</option>
		<option value="blue">蓝色</option>
	</select>
	<input type="text" placeholder="个数"id="n3">
  <input type="button" id="butt" value="生成">
   <div id="res" style="text-align:center">
   <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");
		res=res.value;
		var res = document.getElementById("res");
		var select = document.getElementById("select");
		var box = document.getElementById("box");
		var div='<div style="width:'+n1+'px;height:'+n2+'px;background:'+select.value+';display:inline-block;margin-right:10px;color:#fff"></div>';
		//递增输出
		for(var i =1; i<=n3; i++){
			for(var j=1; j<=n3;j++){
				res.innerHTML+=div;
				if(i==j){
					res.innerHTML+='<br>';
					break;
				}
			}
		}
//递减输出
		for(var x =1; x<=n3-1; x++){
			for(var y=n3-1; y>=0;y--){
				res.innerHTML+=div;
				if(x==y){
					res.innerHTML+='<br>';
					break;
				}
			}
		}
		
	}
  </script> 
 </body>
</html>