简单网页-------课程表

简单网页-----课程表

1.效果图

2.具体代码如下

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Class</title> 
<style type="text/css">
	table{
		border: 1px solid ; 
	}
	td{
		text-align: center;
		width: 100px;
		height: 30px;
	}
	
</style>
</head>
<body>
	
<h1>课程表</h1>
<br /><br />
<input type="text" id="numb" placeholder="请输入所要查询的周数"/>
<button οnclick="myFunction()">查询</button>
<p id="demo"></p>
<table>
	
	<tr>
		<td>周一</td>
		<td>周二</td>
		<td>周三</td>
		<td>周四</td>
		<td>周五</td>
		<td>周六</td>
		<td>周日</td>
	</tr>
	<tr>
		<td id="1"></td>
		<td id="5"></td>
		<td id="9"></td>
		<td id="13"></td>
		<td id="17"></td>
		<td id="21"></td>
		<td id="25"></td>
	</tr>
	<tr>
		<td id="2"></td>
		<td id="6"></td>
		<td id="10"></td>
		<td id="14"></td>
		<td id="18"></td>
		<td id="22"></td>
		<td id="26"></td>
	</tr>
	<tr>
		<td id="3"></td>
		<td id="7"></td>
		<td id="11"></td>
		<td id="15"></td>
		<td id="19"></td>
		<td id="23"></td>
		<td id="27"></td>
	</tr>
	<tr>
		<td id="4"></td>
		<td id="8"></td>
		<td id="12"></td>
		<td id="16"></td>
		<td id="20"></td>
		<td id="24"></td>
		<td id="28"></td>
	</tr>
</table>
<script>
function myFunction() 
{
	var shu_ju_jie_gou = "数据结构";
	var computer_internet = "计算机网络";
	var dan_pian_ji = "单片机原理及应用";
	var English = "大学英语";
	var Math_1  = "线性代数";
	var P_E = "体育";
	var shu_zi_dian_lu = "数字电路技术基础";
	var Art = "美术鉴赏";
	var is_true = true ;
	var Week = document.getElementById("numb").value;
	
    while(is_true)
		{
			if(Week >=1 && Week<=18)
				is_true = false;
			for(var i = 1; i <= 7 ; i++)
			{
				if(i==1)
				{
					if(Week >= 2 && Week<=18)
						document.getElementById("1").innerHTML = shu_ju_jie_gou;
					if(Week >= 2 && Week<=18)
					document.getElementById("2").innerHTML = computer_internet;
					if(Week >= 1 && Week<=18)
						document.getElementById("3").innerHTML = dan_pian_ji;
					if(Week >= 1 && Week<=18)
						document.getElementById("4").innerHTML = P_E;
				}
				if(i==2)
				{
					if(Week >= 1 && Week<=18)
						document.getElementById("5").innerHTML = computer_internet;
					if(Week >= 1 && Week<=18)
						document.getElementById("6").innerHTML = English;
					if(Week >= 1 && Week<=18 && Week%2==0)
						document.getElementById("7").innerHTML = Math_1;
					else{document.getElementById("7").innerHTML = shu_ju_jie_gou;}
				}
				if(i==3)
				{
					if(Week >= 1 && Week<=18)
						document.getElementById("9").innerHTML = Math_1;
					if(Week >= 4 && Week<=14 && Week%2==0)
						document.getElementById("10").innerHTML = shu_zi_dian_lu;
				}
				if(i==4)
				{
					if(Week >= 2 && Week<=18)
						document.getElementById("13").innerHTML = dan_pian_ji;
					if(Week >= 2 && Week<=18)
						document.getElementById("14").innerHTML = shu_zi_dian_lu;
				}
				if(i==5)
				{
					if(Week >= 1 && Week<=18)
						document.getElementById("17").innerHTML = English;
					if(Week >= 1 && Week<=18)
						document.getElementById("19").innerHTML = shu_ju_jie_gou;
				}
				if(i==6)
				{
					if(Week >= 2 && Week<=18)
						document.getElementById("22").innerHTML = Art;
				}
			}
			
		}
}
</script>

</body>
</html>