首页 > 代码库 > 第二十一天到二十三天学习笔记
第二十一天到二十三天学习笔记
先是做了下一个小的导航栏
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>网页标题</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 ._main{ 9 width:100%; 10 } 11 ._nav{ 12 width:500px; 13 margin:0px auto; 14 border-bottom:2px solid red; 15 } 16 h4{ 17 padding-left:20px; 18 width:80px; 19 /*display:block;*/ 20 } 21 ._nav ul li{ 22 float:left; 23 width:100px; 24 list-style-type:none; 25 text-align:center; 26 height:30px; 27 line-height:30px; 28 } 29 ._clear{ 30 clear:both; 31 } 32 a{ 33 text-decoration: none; 34 display:block; 35 } 36 37 a:link,a:visited{ 38 color:#000; 39 } 40 a:hover{ 41 color:#fff; 42 background-color:red; 43 } 44 ._center{ 45 width:500px; 46 margin:0px auto; 47 border-top:2xp solid red; 48 } 49 ._center ul{ 50 background:url(Images/bg.gif)no-repeat left 7px;/*简写属性*/ 51 } 52 ._center ul li{ 53 height:26px; 54 line-height:26px; 55 list-style-type:none; 56 padding-left:22px; 57 font-size:14px; 58 } 59 </style> 60 </head> 61 <body> 62 <div class = "_main"> 63 <div class = "_nav"> 64 <ul> 65 <li><h4>新闻排行</h4></li> 66 <li><a href = "#">国内</a></li> 67 <li><a href = "#">国际</a></li> 68 <li><a href = "#">社会</a></li> 69 <li><a href = "#">网评</a></li> 70 </ul> 71 <div class = "_clear"></div> 72 </div> 73 <div class = "_center"> 74 <ul> 75 <li><a href = "#">这是一个链接...</li> 76 <li><a href = "#">这是一个链接...</li> 77 <li><a href = "#">这是一个链接...</li> 78 <li><a href = "#">这是一个链接...</li> 79 <li><a href = "#">这是一个链接...</li> 80 <li><a href = "#">这是一个链接...</li> 81 <li><a href = "#">这是一个链接...</li> 82 <li><a href = "#">这是一个链接...</li> 83 <li><a href = "#">这是一个链接...</li> 84 </ul> 85 </div> 86 <div class = "_clear"></div> 87 </div> 88 </div> 89 </body> 90 </html>
以下是效果图:
=================================
接下来做了三目运算符求最大数:
1 var index_1 =500,index_2 = 20000,index_3 = 10; 2 document.write((index_1>index_2)?(index_1>index_3?index_1 : index_3) : (index_3>index_2?index_3: index_2));
以下是效果图:
==================================
关于第九天的作业,代码如下:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第九天作业</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //第一题 10 //prompt("text","value");弹窗输入; 11 //parseInt(value);对数进行取整; 12 /* 13 var res = window.prompt(‘输入成绩‘); 14 res = parseInt(res); 15 document.write(res); 16 */ 17 //=============================================== 18 /* 19 if (res>=90) {document.write("优秀!");} 20 else if (res>=80) {document.write("良好!");} 21 else if (res>=70) {document.write("中等!");} 22 else if (res>=60) {document.write("及格!");} 23 else {document.write("不及格!");} 24 25 switch (parseInt((res/10))) { 26 case 9: 27 document.write("优秀"); 28 break; 29 case 8: 30 document.write("良好"); 31 break; 32 case 7: 33 document.write("中等"); 34 break; 35 case 6: 36 document.write("及格"); 37 break; 38 default: 39 document.write("不及格") 40 break; 41 } 42 */ 43 44 //=============================================== 45 //第二题 46 47 //行 48 /*var row = 1; 49 //列 50 var low = 1; 51 var ser = ("<table width=‘600‘ align=‘center‘ border=‘1‘>"); 52 while(row <= 9) 53 { 54 ser += ("<tr>"); 55 while(low<=row) 56 { 57 ser += ("<td>"+row+"×"+low+"="+ row*low +"</td>"); 58 low++; 59 } 60 ser += ("</tr>"); 61 low = 1; 62 row++; 63 } 64 ser += ("</table>") 65 document.write(ser);*/ 66 67 //=============================================== 68 //第三题 69 70 //=============================================== 71 72 //第四题 73 /* 74 for (var i = 1;i<=100;i++) 75 { 76 if (i%3==0&&i%5==0) 77 { 78 document.write("三五"+"</br>"); 79 } 80 else if (i%3==0) 81 { 82 document.write("三"+"</br>"); 83 } 84 else if (i%5==0) 85 { 86 document.write("五"+"</br>"); 87 } 88 else{ 89 document.write(i+"</br>"); 90 } 91 }*/ 92 //=============================================== 93 //第五题 94 /* 95 for (var i = 1;i<=100;i++) { 96 if (i % 3 == 0) 97 { 98 document.write(i+"<br/>"); 99 } 100 } 101 */ 102 //=============================================== 103 //第六题 104 /* 105 var ser = window.prompt(); 106 for (var i = 1;i<=100;i++) { 107 if (ser % i == 0) 108 { 109 document.write(i+"</br>"); 110 } 111 } 112 */ 113 //=============================================== 114 //第七题 115 /* 116 var num = 1; 117 var ser = window.prompt(); 118 for (var i = 1;i<=100;i++) { 119 if (ser % i == 0) 120 { 121 num+=1; 122 } 123 } 124 document.write(num-1); 125 */ 126 //=============================================== 127 //第八题 128 /* 129 var ser = window.prompt(); 130 if(ser % ser == 0 && ser % 1 == 0) 131 { 132 document.write("这个数是质数!"); 133 } 134 else{ 135 document.write("这个数不是质数!"); 136 } 137 */ 138 //=============================================== 139 //第九题 140 /* 141 for (var i = 1; i <= 100; i++) { 142 if (i % i == 0 && i % 1 == 0) { 143 document.write(i+"</br>"); 144 } 145 } 146 */ 147 //=============================================== 148 //第十题 149 /* 150 var index = 9; 151 for (var i = 19; i >= 1; i--) { 152 for (var j = 1 ; j <= index&& j>0 ; j++) { 153 document.write(index); 154 } 155 156 document.write("</br>"); 157 } 158 */ 159 //=============================================== 160 //第十一题 161 /* 162 var ply = 0.01; 163 var max_ply = 0; 164 for (var i = 0; i < 31; i++) { 165 max_ply+=(ply*2); 166 } 167 console.log(max_ply);*/ 168 </script> 169 </body> 170 </html>
==========================================
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>第一题</title> 5 <meta charset = "UTF-8"> 6 <style type = "text/css"> 7 </style> 8 <script type = "text/javascript"> 9 //指定用户输入; 10 var sorc = prompt("输入你的分数"); 11 if(sore == "") 12 { 13 document.write("请在输入后点击确定"); 14 } 15 if(sore == null) 16 { 17 document.write("你点击了取消按钮"); 18 } 19 //将用户输入强制转换成Number类型 20 var point = number(sore); 21 //判断是否属于Number类型 22 if(point >= 0 && point <= 100) 23 { 24 if(point>=90) 25 { 26 document.write("优秀"); 27 } 28 else if(point >= 80) 29 { 30 document.write("良好"); 31 } 32 else if(point > = 70) 33 { 34 document.write("中等"); 35 } 36 else if(point >= 60) 37 { 38 document.write("及格"); 39 } 40 else 41 { 42 document.write("不及格"); 43 } 44 } 45 </script> 46 </head> 47 <body> 48 </body> 49 </html>
==============================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>数组</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 11 </head> 12 <body> 13 <script type="text/javascript"> 14 var user = new Array("周更生","男",30,"已婚","大专",5000,500,5500,"undefined","山东省"); 15 document.write("姓名:"+user[0]+"</br>"); 16 document.write("性别:"+user[1]+"</br>"); 17 document.write("年龄:"+user[2]+"</br>"); 18 document.write("婚否:"+user[3]+"</br>"); 19 document.write("学历:"+user[4]+"</br>"); 20 document.write("工资:"+user[5]+"</br>"); 21 document.write("奖金:"+user[6]+"</br>"); 22 document.write("实发工资:"+user[7]+"</br>"); 23 document.write("毕业院校:"+user[8]+"</br>"); 24 document.write("籍贯:"+user[9]+"</br>"); 25 </script> 26 </body> 27 </html>
=========================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>二维数组</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 var arr = [ 12 ["周更生","男",30,true,"大专",5000,500,,"山东省"], 13 ["刘晓庆","女",26,false,"研究生",8000,1500,"北京科技大学","山西省"], 14 ["平","男",38,true,"大专",1000,250,"清华大学","陕西省"], 15 ["李克强","女",34,true,"高中",11000,30,"河北大学","江苏省"], 16 ]; 17 18 var _length = arr.length; 19 var str = "<table align=center width = 600px border = 1px style = ‘border-collapse:collapse‘>"; 20 str += "<caption><h2>2014学生信息表</h2></caption>"; 21 for(var row = 0;row<_length;row++) 22 { 23 str += "<tr align = center>"; 24 for(var low = 0;low<arr[row].length;low++) 25 { 26 str += "<td>"+arr[row][low]+"</td>"; 27 } 28 str += "</tr>"; 29 } 30 str += "</table>"; 31 document.write(str); 32 </script> 33 </head> 34 <body> 35 36 </body> 37 </html>
===============================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>冒泡排序</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 //求极值和位置 12 var _max_min = new Array(10,4,15,2,6,9); 13 var _length = _max_min.length; 14 var _min = 0; 15 //Min 16 for(var i = 0;i<_length;i++) 17 { 18 for(var j = 0;j<_length-1;j++) 19 { 20 if(_max_min[j]>_max_min[j+1]) 21 { 22 _min = _max_min[j+1]; 23 _max_min[j+1] = _max_min[j]; 24 _max_min[j] = _min; 25 } 26 } 27 } 28 document.write(_max_min+"<br/>"+_min); 29 30 </script> 31 </head> 32 <body> 33 34 </body> 35 </html>
==================================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>7号第一题</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 //求出此数组中最大的数与最小的数及最大的数与最小的数的位置 12 var arr1 = [10,4,20,15,6,9]; 13 //记录最大数; 14 var _max = 0; 15 var _maxP = 0; 16 //记录最小数; 17 var _min = arr1[0]; 18 var _minP = 0; 19 function max() 20 { 21 for(var i = 0;i < arr1.length; i++) 22 { 23 if(_max<arr1[i]) 24 { 25 _max = arr1[i]; 26 _maxP = i; 27 } 28 if(_min>arr1[i]) 29 { 30 _min = arr1[i]; 31 _minP = i; 32 } 33 } 34 } 35 max(); 36 document.write(_max+"</br>"); 37 document.write(_maxP+"</br>"); 38 document.write(_min+"</br>"); 39 document.write(_minP); 40 </script> 41 </head> 42 <body> 43 44 </body> 45 </html>
==========================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>7号第二题</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 function getnum(a,b,c) 12 { 13 return a+ b+ c; 14 } 15 document.write(getnum(10,20,30)); 16 </script> 17 </head> 18 <body> 19 20 </body> 21 </html>
================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>7号第三题</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 function _m() 12 { 13 //行 14 for(var row = 1;row<=9;row++) 15 { 16 for(var low = 1;low<=row;low++) 17 { 18 document.write(low+"*"+row+"="+(low*row)); 19 } 20 low=1; 21 document.write("</br>"); 22 } 23 } 24 _m(); 25 </script> 26 </head> 27 <body> 28 29 </body> 30 </html>
==============================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>7号第四题</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 //定义一个数组 这个数组中有9个元素 然后将这个数组中的元素为奇数的平均值求出来 12 var _array = new Array(1,2,3,4,5,6,7,8,9); 13 var _mean =0; 14 var _J =0; 15 for(var Index = 0;Index<_array.length;Index++) 16 { 17 if(_array[Index]%2!==0) 18 { 19 _mean += _array[Index]; 20 _J++; 21 } 22 } 23 document.write(_mean/_J); 24 </script> 25 </head> 26 <body> 27 28 </body> 29 </html>
=========================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>7号第五题</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 //创建一个函数 实现两个数之间的加减乘除运算 并将结果返回 12 13 function _Num(num1,num2){ 14 var arr = new Array(); 15 arr[0]=num1+num2; 16 arr[1]=num1-num2; 17 arr[2]=num1*num2; 18 arr[3]=num1/num2; 19 20 return arr; 21 } 22 alert(_Num(1,2)[0]); 23 </script> 24 </head> 25 <body> 26 27 </body> 28 </html>
===========================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>网页标题</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 //创建一个函数 实现判断用户名中是否含有特殊符号 如果有则提示用户名不合法 没有则提示用户名合法 (有基础的可以尝试做一下 ) 12 //var str = “zhang#shuai” //字符串的访问方式与数组是一样的 字符串它也可以通过下标来进行访问 13 14 function _user(str) 15 { 16 //感觉应该使用for? 17 //使用正则表达式:RegExp(指定索引关键字)test(索引字符串中的指定值) 18 var _p = new RegExp("!"); 19 var _bool = _p.test(str); 20 if(_bool==true) 21 { 22 document.write("有特殊字符"); 23 } 24 else 25 { 26 document.write("没有特殊字符"); 27 } 28 } 29 30 _user("zhang!shuai"); 31 </script> 32 </head> 33 <body> 34 35 </body> 36 </html>
===================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>7号第7题</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 function _row() 12 { 13 //上半部分 14 for(var i=9;i>=2;i--){ 15 for(var j=1;j<=i;j++){ 16 document.write(i); 17 } 18 document.write("<br/>"); 19 20 } 21 for(var i=1;i<10;i++){ 22 for(var j=1;j<=i;j++){ 23 document.write(i); 24 } 25 document.write("<br/>"); 26 27 } 28 } 29 _row(); 30 </script> 31 </head> 32 <body> 33 34 </body> 35 </html>
======================================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>合并数组</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 </head> 11 <body> 12 <script type="text/javascript"> 13 //使用concat()方法来合并数组; 14 var arr_0 = new Array(3); 15 arr_0[0] = "A"; 16 arr_0[1] = "B"; 17 arr_0[2] = "C"; 18 19 var arr_1 = new Array(3); 20 arr_1[0] = "D"; 21 arr_1[1] = "E"; 22 arr_1[2] = "F"; 23 24 document.write(arr_0.concat(arr_1)); 25 </script> 26 </body> 27 </html>
=================================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>数组合并成字符串</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 //使用join()方法 括号内是以什么方式连接在一起 12 var arr = new Array("a","b","c"); 13 document.write(arr.join()+"</br>"); 14 document.write(arr.join("")+"</br>"); 15 document.write(arr.join(".")); 16 </script> 17 </head> 18 <body> 19 20 </body> 21 </html>
================================
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>Array对象属性</title> 6 <meta name="keywords" content="关键字列表" /> 7 <meta name="description" content="网页描述" /> 8 <link rel="stylesheet" type="text/css" href="" /> 9 <style type="text/css"></style> 10 <script type="text/javascript"> 11 /* 12 拥有三个对象属性: 13 1、constructor 返回对创建此对象的数组函数的引用 14 2、length 设置或返回数组中的元素数目 15 3、prototype 使您有能力向对象添加属性和方法 16 */ 17 //constructor 属性 例子一 18 /* 19 var test = new Array(); 20 if(test.constructor==Array) 21 { 22 document.write("This is a Array"); 23 } 24 if(test.constructor==Boolean) 25 { 26 document.write("This is a Boolean"); 27 } 28 if(test.constructor==Date) 29 { 30 document.write("This is a Date"); 31 } 32 if(test.constructor==String) 33 { 34 document.write("This is a String"); 35 } 36 */ 37 </script> 38 </head> 39 <body> 40 41 </body> 42 </html>
第二十一天到二十三天学习笔记