Web代码合集(笔记)

mac2023-06-09  20

导航栏:

<!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>

 

最新回复(0)