Web代码合集（笔记）

最新推荐文章于 2024-06-11 02:06:44 发布

qdu_zhaiH

最新推荐文章于 2024-06-11 02:06:44 发布

阅读量2.9k

点赞数 5

分类专栏：本科课程笔记

本文链接：https://blog.csdn.net/red_red_red/article/details/102796203

版权

本科课程笔记专栏收录该内容

28 篇文章 1 订阅

订阅专栏

导航栏：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			ul {
				background-color: #EEEEEE;
				text-align: center; /*这里加上text-align可以居中对齐 */
				padding: 0 auto;
			}
			li {
				display: inline-block;
 /* display 显示的特征      block:块(默认)   inline-block:行   原来是块标记，需要把块标记的特征给取消  */
				width: 80px; 
				height: 32px; 
				background-color:#DDDDDD;
				text-align: center; 
				line-height: 32px;
			}
			li:hover {background-color: #FF0000;}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>在线课程</li>
				<li>在线测试</li>
				<li>实验实训</li>
				<li>课程表</li>
				<li>精彩案例</li>
				<li>在线答疑</li>
			</ul>
		</div>
	</body>
</html>

章节目录：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			dt {
				border-top: #999 solid 2px;
				font: 1em 黑体,华文黑体;/*设置多个值时，当前边的字体不存在时，会自动用后边的*/
				background-color:#EEEEEE;
				width:320px;
				height:22px;
			}
			dd {font-size: 0.9em;background-color:#DDDDDD;width:120px;height:19px;}
			dd:hover {background-color: #FF0000;}
			dt:hover {background-color: #0000FF;}/*鼠标移动到标签上，改变的效果*/
		</style>
	</head>
	<body>
		<dl id="menu">
		        <!-- 可以嵌套 -->
				<dt>课程引言</dt>
				<dt>第 1 章 WEB设计概述</dt>
				<dd>1.1 WEB页面设计</dd>
				<dd>1.2 WEB站点设计</dd>
				<dt>第 2 章 WEB页面布局</dt>
				<dd>2.1 HTML5布局</dd>
				<dd>2.2 DIV布局</dd>
				<dd>2.3 框架布局</dd>
				<dd>2.4 表格布局</dd>
			</dl>
	</body>
</html>

JavaScript语法基础：

（1）编写JavaScript程序，计算并输出 F(N) = 1! + 2! + 3! + …… + N!。N的输入，可以用JavaScript输入框，或者HTML的input输入组件，或其他方式。计算结果的输出，可以用JavaScript消息框，或者HTML，或者其他方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算阶乘</title>
	</head>
	<body>
		<script type="text/javascript">
			var n = prompt("请输入整数n:",0);
			if(isNaN(n)){//判断是不是数值
				alert("not a number");
			}else{//判断是整数还是小数
				if(n%1==0){//整数
					//alert("right number");
				    //计算N!
				    var sum=0;
				    for(var i=1;i<=n;i++){
                    	sum += f(i);
				    }
				    if(n==1){
					    alert("1! = "+sum);				    	
				    }else if(n==2){
					    alert("1!+2! = "+sum);				    	
				    }else if(n==3){
					    alert("1!+2!+"+n+"! = "+sum);				    	
				    }else if(n>3){
					    alert("1!+2!+......+"+n+"! = "+sum);			    	
				    }

				}else{//小数
					alert("please input a right number");
				}
			}
		function f(n){//计算阶乘
			var sum = 1;
			for(var i=1;i<=n;i++){
				sum *= i;
			}
			return sum;
		}
		</script>
	</body>
</html>

（2）编写JavaScript程序，计算并输出 F(N) = 1/1 - 1/3 - 1/5 - …… - 1/N（要求 N 是奇数）。N的输入，可以用JavaScript输入框，或者HTML的input输入组件，或其他方式。计算结果的输出，可以用JavaScript消息框，或者HTML，或者其他方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>sum of 1/n</title>
	</head>
	<body>
		<script type="text/javascript">
			var n = prompt("请输入一个奇数 n :",1);
			if(isNaN(n)){
				alert("请输入正确的数!");
			}else{
				if(n%1==0){
					if(n%2==1&&n>=0){
						var sum = 1;
						for(var i=3;i<=n;i+=2){
							sum -= 1/i;
						}
					    if(n==1){
						    alert("1/1 = "+sum);				    	
					    }else if(n==3){
						    alert("1/1 - 1/3 = "+sum);				    			    	
					    }else if(n>3){
						    alert("1/1 - 1/3 - ...... - 1/"+n+" = "+sum);			    	
					    }
					}else{
						alert("请输入正确的数!");
					}
				}else{
					alert("请输入正确的数!");
				}
			}
		</script>
	</body>
</html>

（3）编写JavaScript函数，实现数值序列a[n]，n>0，的排序。排序算法自选。要求：随机输入任意多个（ >0 ）数值，调用自定义JavaScript排序函数，实现序列排序。输出要求：首先输出排序前的序列，最后输出排序后的序列。选做要求：输出排序过程序列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>array_sort</title>
	</head>
	<body>
		<script type="text/javascript">
			var arr = new Array();
			//输入数据
			var n = prompt("请输入数组的长度 n :" ,0);
			var str = prompt("输入数组的数据，以任意字符隔开 :");
			for(var i=0,j=0;i<n;i++,j+=2){
				arr[i] = str[j];
			}
			//赋值给 a 数组
			var a = new Array();
			for(var i=0;i<n;i++){
				a[i] = arr[i];
			}
			for(var i=n-2;i>=0;i--){//冒泡排序
				var num = n-i-1;//计算第几步
				for(var j=0;j<=i;j++){
					if(a[j]>a[j+1]){
						var temp = a[j];
						a[j] = a[j+1];
						a[j+1] = temp;
					}
				}
			    alert("[排序过程]第"+num+"步:\n" +a);//输出排序过程
			}
			alert("未排序的数组 : "+arr+"\n"+"排序后的数组 : "+a);
		</script>
	</body>
</html>

qdu_zhaiH

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Web代码合集（笔记）

导航栏：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> ul { background-color: #EEE...
复制链接

扫一扫

专栏目录