Web-JS

最新推荐文章于 2023-08-09 22:33:42 发布

小范的一天

最新推荐文章于 2023-08-09 22:33:42 发布

阅读量295

点赞数

分类专栏： web前端文章标签： js javascript

本文链接：https://blog.csdn.net/qq_43574317/article/details/107166750

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS

JS知识
- 方法的声明
练习

JS知识

方法的声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" onclick="fn1()"/>
		<script type="text/javascript">
			//单行注释
			/* 多行注释 */
			//声明无参数无返回值的方法
			function fn1(){
				alert("fn1执行");
			}
			fn1();
			//声明无参有返回值的方法
			function fn2(){
				return "fn2执行了";
			}
			var str = fn2();
			alert(str);
			//声明有参数无返回值
			function fn3(name,age){
				alert(name+":"+age);
			}
			fn3("carry",18);
			//有参数有返回值
			function fn4(n1,n2){
				return n1*n2;
			}
			var result = fn4(5,9);
			alert(result);
			//JS第二种声明方式的方法
			var fn5 = function(){
				alert("fn5执行")
			} 
			fn5();
			/* JS第三种声明方法的方式
			 Function对象的构造参数中前面的参数是方法的参数名称，最后一个参数是方法体*/
			 var fn6 = new Function("name","age","alert(name+':'+age)");
			 fn6("铠铠",16);
		</script>
	</body>
</html>

练习

平方

用户输入一个数，点击按钮，生成输入的那个数的平方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="i1"/>
		<input type="button" value="平方" onclick="myfn()"/>
		<div id="d1">结果</div>
		<script type="text/javascript">
			function myfn(){
				var i = document.getElementById("i1");
				var d = document.getElementById("d1");
				/* 当字符串进行- * /会自动将字符串转换成数值，如果不是数值则转成NaN，进行任何数值计算结果都是NaN*/
				if(isNaN(i.value)){
					d.innerText="输入有误!";
				}else{//输入的是数
					/* d.innerText = i.value*i.value ; */
					//将字符串转成数
					d.innerText = i.value*1*i.value*1;
					d.innerText = parseInt(i.value)+parseInt(i.valule);
				}
			}
		</script>
	</body>
</html>

猜数字

随机生成一个1-100的整数，如果用户输入的数比生成的数大，则提示猜大了，若用户输入的数比生成的数小，则提示猜小了，如果相等，则提示恭喜你，猜对了，并输出第几次猜对的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="i1"placeholder="请输入1-100的整数"/>
		<input type="button" value="猜一猜" onclick="fn2()"/>
		<div id="d1">提示</div>
		<script type="text/javascript">
			//生成一个1-100的随机整数
			var x = parseInt(Math.random()*100)+1;
			var number = 0 ;
			function fn2(){
				number++;
				if(i1.value>x){
					d1.innerText="猜大了!";
				}else if(i1.value<x){
					d1.innerText="猜小了!";
				}else{
					d1.innerText="恭喜你，第"+number+"次猜对了!";
				}
			}
		</script>
	</body>
</html>

计算器

简单实现计算器功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="i1"/>
		<input type="text" id="i2"/>
		<input type="button" value="+" onclick="fn5(1)"/>
		<input type="button" value="-" onclick="fn5(2)"/>
		<input type="button" value="*" onclick="fn5(3)"/>
		<input type="button" value="/" onclick="fn5(4)"/>
		<div id="d1">结果</div>
		<script type="text/javascript">
			function fn5(x){
				if(isNaN(i1.value)||isNaN(i2.value)){ 
					d1.innerText = "输入有误!";
					return;
					}
				switch(x){
					case 1:
						d1.innerText = i1.value*1+i2.value*1;
					break;
					case 2:
						d1.innerText = i1.value-i2.value;
					break;
					case 3:
						d1.innerText = i1.value*i2.value;
					break;
					case 4:
						d1.innerText = i1.value/i2.value;
					break;
				}
			}
		</script>
	</body>
</html>

翻牌子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	/* 给四个小的div添加样式 */
	div>div{
		width: 25%;
		float: left;/* 显示到一行 */
	}
	/* 装着4个小的的大div */
	div{
		overflow: hidden;/* 解决高度识别为0的问题 */
	}
	/* 待选择的4个图片的样式 */
	div>div>img{
		width: 100%;
		height: 180px;
	}
	h1,h4{
		text-align: center;
	}
	/* 点击按钮添加的小图片的样式 */
	div>img{
		width: 100px;
		height: 80px;
	}
</style>
</head>
<body>
<h1>翻牌子练习</h1>
<input type="text" placeholder="请输入人物编号" id="i1">
<input type="button" value="添加" onclick="add()">
<hr>
<div>
	<div>
		<img src="1号人物.jpg">
		<h4>魅者</h4>
	</div>
	<div>
		<img src="2号人物.jpg">
		<h4>医师</h4>
	</div>
	<div>
		<img src="3号人物.jpg">
		<h4>异人</h4>
	</div>
	<div>
		<img src="4号人物.jpg">
		<h4>射手</h4>
	</div>
</div>
<div id="d1"></div>


<script type="text/javascript">
	function add(){
		//判断用户输入的图片编号 因为value是字符串需要*1
		//转成数值
		switch(i1.value*1){
		case 1:
		 	d1.innerHTML+="<img src='1号人物.jpg'>";
			break;
		case 2:
			d1.innerHTML+="<img src='2号人物.jpg'>";
			break;
		case 3:
			d1.innerHTML+="<img src='3号人物.jpg'>";
			break;
		case 4:
			d1.innerHTML+="<img src='4号人物.jpg'>";
			break;
		default:
			alert("没有这位人物!");
		}
	}
</script>
</body>
</html>

小范的一天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web-JS

JSJS知识方法的声明练习平方猜数字计算器JS知识方法的声明<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="按钮" onclick="fn1()"/> <script type="text/ja
复制链接

扫一扫

专栏目录