基本语法的课堂案例

最新推荐文章于 2023-03-21 20:15:00 发布

宇宙超级美少女

最新推荐文章于 2023-03-21 20:15:00 发布

阅读量428

点赞数

分类专栏：案例

本文链接：https://blog.csdn.net/kobe081959/article/details/79083655

版权

案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

比较两个数的大小：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请输入第一个数：<input type="text" id="txt1"/><br/>
	请输入第二个数：<input type="text" id="txt2"/><br/>
	<input type="button" id="btn" value="比较" />
</body>
</html>
<script type="text/javascript">
function $(id){
	return document.getElementById(id);
}
window.onload = function(){
	$("btn").onclick = function(){
		var num1 = $("txt1").value;
		var num2 = $("txt2").value;
		if(num1>num2){
			alert("第一个数大于第二个数！");
		}else if(num1<num2){
			alert("第一个数小于第二个数！");
		}else{
			 alert("两个数相等！");
		}
	}
}
</script>

判断成绩等级：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请输入成绩：<input type="text" id="txt"/>
	<input type="button" id="btn" value="查询" />
</body>
</html>
<script type="text/javascript">
// 判断成绩等级
// 60分以下：E
// 60-70：   D
// 70-80：   C
// 80-90：   B
// 90-100：  A
window.onload = function(){
	document.getElementById("btn").onclick = function(){
		var score = document.getElementById("txt").value;
		if(score>=90 && score<=100){
			alert("您的成绩等级是A！");
		}else if(score>=80 && score<90){
			alert("您的成绩等级是B！");
		}else if(score>=70 && score<80){
			alert("您的成绩等级是C！");
		}else if(score>=60 && score<70){
			alert("您的成绩等级是D！");
		}else if(score>=0 && score<60){
			alert("您的成绩等级是E！");
		}else{
			alert("请输入合法的成绩！");
		}
	}
}
</script>

判断一个年份是不是闰年：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	请输入您要查询的年份：<input type="text" id="txt"/>
	<input type="button" id="btn" value="判断" />
</body>
</html>
<script type="text/javascript">
// 判断一个年份是不是闰年
// 闰年的概念：四年一闰，百年不闰，四百年一闰
// 翻译成数学问题就是判断这一年能被4整除，且不能被100整除或者能被400整除
// 翻译成计算机语言就是如下代码
window.onload = function(){
	// 当点击判断按钮的时候获取输入的年份并且进行判断
	document.getElementById("btn").onclick = function(){
		var year = document.getElementById("txt").value;
		if((year%4==0 &&　year%100!=0)|| year%400==0){
			alert("这一年是闰年！");
		}else{
			alert("这一年是平年！");
		}
	}
}
</script>

输入一个数字，将输入的数字转化为汉字星期几

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="txt"/>
		<input type="button" id="btn" value="转换" />
	</body>
</html>
<script type="text/javascript">
function $(id){
	return document.getElementById(id);
}
//根据文本框内输入的数字显示对应的星期汉字
window.onload = function(){
	//添加点击事件
	$("btn").οnclick=function(){
		//获取用户输入的星期，获取不到返回null，反之则是一个对象
		//通过value属性获取的全部是字符串类型，用Number转化为数字类型
		var week = Number($("txt").value);
		//判断用户输入的是不是都是数字
		if(isNaN(week)){
			alert("请输入数字！");
		}else{
			switch(week){
			case 0:
			case 7:alert("星期天");break;
			case 1:alert("星期一");break;
			case 2:alert("星期二");break;
			case 3:alert("星期三");break;
			case 4:alert("星期四");break;
			case 5:alert("星期五");break;
			case 6:alert("星期六");break;
			default:alert("非法数字！");
		    }
		}
	}
}
</script>

判断一个整数属于哪个范围：大于0；小于0；等于0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="txt"/>
		<input type="button" id="btn" value="测试" />
	</body>
</html>
<script type="text/javascript">
window.onload = function(){
	//判断一个整数，属于哪个范围：大于0；小于0；等于0。
    document.getElementById("btn").onclick = function(){
        var num = parseInt(document.getElementById("txt").value);
    	if(num<0){
    		alert(num+"小于0");
    	}else if(num>0){
    		alert(num+"大于0");
    	}else{
    		alert(num+"等于0");
    	}
    }
}
	
</script>

判断一个数是奇数还是偶数，并输出他的结果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="txt" />
		<input type="button" id="btn" value="测试"/>
	</body>
</html>
<script type="text/javascript">
//判断一个整数是偶数还是奇数，并输出判断结果。
window.onload = function(){
	document.getElementById("btn").onclick = function(){
		var num = document.getElementById("txt").value;
		if(parseInt(num)!=num || num == ''){
			alert("请输入一个整数！");
		}else if(num % 2 != 0){
			alert(num+"是奇数！");
		}else{
			alert(num+"是偶数！");
		}
	}
	
}
</script>

开发一款软件，根据公式（身高-108）*2=体重，可以有10斤左右的浮动。来观察测试者体重是否合适。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		请输入您的身高：<input type="text" id="txt1" /><br />
		请输入您的体重：<input type="text" id="txt2" /><br />
		<input type="button" id="btn" value="检测"/>
	</body>
</html>
<script type="text/javascript">
window.onload = function(){
	//给按钮添加点击事件
	document.getElementById("btn").onclick = function(){		    
		//开发一款软件，根据公式（身高-108）*2=体重，可以有10斤左右的浮动。来观察测试者体重是否合适。
		//获取两个文本框的值
		var height = document.getElementById("txt1").value;
		var weight = document.getElementById("txt2").value;
		//计算公式
	    var result = (height-108)*2;
	    if(result-10<=weight &&　result+10>=weight){
	    	alert("您是标准身材！");
	    }else if(result-10>weight){
	    	alert("您的身材偏瘦！");
	    }else if(result+10<weight){
	    	alert("您的身材偏重！")
	    }
	}
}
</script>

输入月份，显示当月的天数。要求：1) 利用case穿透简化代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="txt" />
		<input type="button" id="btn" value="测试" />
	</body>
</html>
<script type="text/javascript">
window.onload = function(){
	document.getElementById("btn").onclick = function(){
			console.log(111);
		var num = Number(document.getElementById("txt").value);
			switch(num){
				case 1:
				case 3:
				case 5:
				case 7:
				case 8:
				case 10:
				case 12: 
					alert(num+"月有31天");break;
				case 4:
				case 6:
				case 9:
				case 11:
					alert(num+"月有30天");break;
				case 2:
					alert(num+"月闰年29天，平年28天");break;
				default:alert("请输入合法的月份！");
			}
	}
}
</script>

根据一个数字日期，判定这个日期是这一年的第几天。例如：20160211，计算后结果为42.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="txt" />例如：20160211，计算后结果为42.
		<input type="button" id="btn" value="计算" />
	</body>
</html>
<script type="text/javascript">
//根据一个数字日期，判定这个日期是这一年的第几天。例如：20160211，计算后结果为42.
window.onload = function(){
	//点击事件
	document.getElementById("btn").onclick = function(){
		//获取文本框的value值
		var dataValue = document.getElementById("txt").value;
		//分别拿出年、月、日
		var year = parseInt(dataValue/10000);
		var month = parseInt((dataValue-year*10000)/100);
		var day = dataValue%100;
		
		//1、3、5、7、8、10、12
		//4、6、9、11
		//2月有28或者29天
		//先定义一个变量allData来表示
		var allData = day;
		for(var i=1;i<month;i++){
			switch(i){
				case 1:
				case 3:
				case 5:
				case 7:
				case 8:
				case 10:
				case 12:
					allData += 31;break;
				case 4:
				case 6:
				case 9:
				case 11:
					allData +=30;break;
				case 2:
				//判断二月份是不是闰年
					if(year % 4 ==0 && year % 100 ==0 || year % 400 ==0){
						allData +=29;
					}else{
						allData +=28;
					}
				break;
			}
		}
		console.log(allData);
	}
}
</script>