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"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 5 <title>函数及其使用</title> 6 <script type="text/javascript"> 7 //指定单价和数量 ，返回计算后的金额, 8 //函数定义放在head中，在页面加载之前读取；放在body中，加载完整个页面之后读取；如果定义之前读取错。 9 function amount(price, number) 10 { 11 var sum = price * number; 12 alert("单价乘以数量的金额是" + sum); 13 return sum; 14 } 15 //通过自定义函数屏蔽鼠标和键盘相关事件 16 function maskingKeyboard() 17 { 18 if (event.keyCode === 8)//判断是否为退格键 19 { 20 event.keyCode = 0; 21 event.returnValue = false; 22 alert("当前设置不允许使用退格键！"); 23 } 24 if (event.keyCode === 13)//判断是否为回车键 25 { 26 event.keyCode = 0; 27 event.returnValue = false; 28 alert("当前设置不允许使用回车键！"); 29 } 30 if (event.keyCode === 116)//判断是否为回车键 31 { 32 event.keyCode = 0; 33 event.returnValue = false; 34 alert("当前设置不允许使用F5刷新 键！"); 35 } 36 //判断是否为ALT+方向键左 或方向键右 37 if (event.altKey && ((event.keyCode === 37) || (event.keyCode === 39)))//判断是否为ALT+方向键左 38 { 39 event.returnValue = false; 40 alert("当前设置不允许使用alt+左右键！"); 41 } 42 if (event.ctrlKey && event.keyCode === 78)//判断是否为ctrl+N键 43 { 44 event.returnValue = false; 45 alert("当前设置不允许使用ctrl+N键！"); 46 } 47 if (event.shiftKey && event.keyCode === 121)//判断是否为shift+F10键 48 { 49 event.returnValue = false; 50 alert("当前设置不允许使用shift+F10键！"); 51 } 52 } 53 function rightKey() 54 { 55 if (event.button === 2)//判断是否为ALT+方向键左 56 { 57 event.returnValue = false; 58 alert("当前设置不允许鼠标右键！"); 59 } 60 } 61 //嵌套函数 62 var numc = 5; 63 function addNew(numa, numb) 64 { 65 function innerAdd() 66 { 67 alert("参数的加和为:" + (numa + numb + numc)); 68 } 69 return innerAdd(); 70 } 71 //递归函数 72 73 function tenFactorial(numd) 74 { 75 if (numd <= 1) { 76 return 1; 77 } 78 else { 79 return(tenFactorial(numd - 1) * numd); 80 } 81 } 82 function clockon() { 83 var now = new Date(); 84 var year = now.getFullYear(); 85 var month = now.getMonth() + 1; 86 var date = now.getDate(); 87 var day = now.getDay();//星期几？ 88 var hour = now.getHours(); 89 var minu = now.getMinutes(); 90 var sec = now.getSeconds(); 91 var week; 92 if (month < 10) 93 month = "0" + month; 94 if (date < 10) 95 date = "0" + date; 96 if (hour < 10) 97 hour = "0" + hour; 98 if (minu < 10) 99 minu = "0" + minu; 100 if (sec < 10) 101 sec = "0" + sec; 102 var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); 103 var time = year + "年" + month + "月" + date + "日 " + arr_week[day] + " " + hour + ":" + minu + ":" + sec; 104 // alert(time); 105 if (document.all) 106 { 107 bgclock.innerHTML = "系统公告：[" + time + "]"; 108 // bgclock.innerHTML="<span style='color:red'>Hi</span>"; 109 //火狐、谷歌不支持innerHTML取值，以后学js 110 } 111 var timer = setTimeout("clockon(bgclock)", 1000); 112 } 113 //自动生成验证码： 114 function randomCode(ncode) { 115 var result = ""; 116 if (ncode == 0) 117 { 118 alert("please input number!"); 119 } 120 else { 121 for (r = 1; r <= parseInt(ncode); r++) 122 { 123 result = result + (parseInt(Math.random() * 10)).toString(); 124 } 125 alert(result); 126 } 127 } 128 </script> 129 130 </head> 131 <body onkeydown="maskingKeyboard()" onLoad="clockon(bgclock)"> 132 hello,world! 133 <br/> 134 <div style="background:pink;500px;height:800px;padding: 10px;"> 135 <from name="form1" action="" method="post" id="form1"> 136 <div id="bgclock" style="height:20px;"></div> 137 <table style="border:2px solid red;padding:10px;"> 138 <tr> 139 <th colspan="2" bgcolor="AliceBlue">划整为零——函数及其使用</th> 140 </tr> 141 <tr > 142 <td> 143 <input name="price" type="text" id="price" value="80"/> 144 </td> 145 <td> 146 <input name="number" type="text" id="number" value="30"/> 147 </td> 148 </tr> 149 <tr> 150 <td> 151 事件中调用函数： 152 </td> 153 <td> 154 <script type="text/javascript"> 155 var number = document.getElementById("number").value; 156 var price = document.getElementById("price").value; 157 document.onmousedown = rightKey; 158 </script> 159 <input name="submit" type="button" class="" 160 onClick="amount(document.getElementById('price').value, document.getElementById('number').value);" value="单价数量总价"/> 161 </td> 162 </tr> 163 <tr> 164 <td>超链接调用函数：</td> 165 <td><a href="javascript:amount(price,number)">单价数量总价</a> 166 </td> 167 </tr> 168 <tr> 169 <td> 170 函数中参数的使用： 171 </td> 172 <td> 173 <!--定义函数时指定的参数叫形参，调用函数实际传递的参数叫实参，形参、实参一一对应--> 174 <input name="submit" type="button" class="" value="总价=单价*数量" 175 onClick="amount(document.getElementById('price').value, document.getElementById('number').value); 176 ;"/> 177 </td> 178 </tr> 179 <tr> 180 <td> 181 使用函数的返回值return： 182 </td> 183 <td> 184 <!--将需要返回的值赋值给变量，最后将此变量返回。return语句 --> 185 <input name="submit" type="button" class="" value="返回值乘以3？" onClick="amount(amount(price, number), 3);"/> 186 </td> 187 </tr> 188 <tr> 189 <td align="center" colspan="2"> 190 <b>几种特殊的函数</b> 191 </td> 192 </tr> 193 <tr> 194 <td colspan="2"> 195 页面中不允许右键，不允许alt+左右键，不允许shift+F10，不允许ctrl+N； 196 </td> 197 </tr> 198 <tr> 199 <td align="center" colspan="2"> 200 <b>js中的内置函数</b 201 </td> 202 </tr> 203 <tr> 204 <td colspan="2"> 205 <script type="text/javascript"> 206 /* 207 * parseInt()函数 208 */ 209 var num1 = "123.345abc"; 210 var num2 = "abc123"; 211 document.write("1.使用parseInt()函数：</br>"); 212 document.write("123.345abc转化结果为:" + parseInt(num1) + "<br>"); 213 document.write("abc123转化结果为:" + parseInt(num2) + "<br><br>"); 214 /* 215 * parseFloat()函数/isNaN()函数 216 */ 217 var num3 = "123.4567abc"; 218 document.write("2.使用parseInt()函数/isNaN()函数：</br>"); 219 document.write("123.4567abc转换结果为:" + parseFloat(num3) + "<br>"); 220 document.write("abc123转化结果后是否为NaN:" + isNaN(parseInt(num2)) + "<br><br>"); 221 /* 222 * isFinite()函数 223 */ 224 document.write("3.使用isFinite()函数：</br>"); 225 document.write("1/0计算结果是否无穷大:" + isFinite(1 / 0) + "<br>"); 226 /* 227 * enCodeURL()函数 228 */ 229 document.write("4.使用encodeURI()函数：</br>"); 230 document.write("转换为网络资源地址:" + encodeURI("http://127.0.0.1/save.html?name=测试") + "<br><br>"); 231 /* 232 * deCodeURL()函数 233 */ 234 document.write("4.使用encodeURI()函数：</br>"); 235 document.write("将网格资源转换为字符串为:" + decodeURI("http://127.0.0.1/save.html?name=%E6%B5%8B%E8%AF%95") + "<br>"); 236 </script> 237 </td> 238 </tr> 239 <tr> 240 <td colspan="2" align="center"><b>嵌套函数的使用:即函数中嵌套函数</b></td> 241 242 </tr> 243 <tr> 244 <td> 245 调用函数addNew(10,10)，加全局变量numc=5 246 </td> 247 <td> 248 <input name="submit" type="button" class="" value="10+10+5" onClick="addNew(10, 10);"/> 249 </td> 250 </tr> 251 <tr> 252 <td colspan="2" align="center"><b>递归函数的使用:即函数在自身函数体内调用自己</b></td> 253 254 </tr> 255 <tr> 256 <td> 257 10的阶乘(n>1)：f(n)=n*f(n-1) 258 </td> 259 <td> 260 <!-- <input name="submit" type="button" class="" value="10！" onClick="tenFactorial(1);"/>--> 261 <script type="text/javascript"> 262 document.write(tenFactorial(5)); 263 </script> 264 </td> 265 </tr> 266 <tr> 267 <td colspan="2" align="center"><b>通过自定义函数实时显示系统时间：</b></td> 268 </tr> 269 <tr> 270 <td> 271 现在时刻是：(按钮可弹alert,注释掉了) 272 </td> 273 <td> 274 <input name="submit" type="button" class="" value="时间" onClick="clockon();"/> 275 </td> 276 </tr> 277 <tr> 278 <td colspan="2" align="center"><b>生成随机验证码：</b></td> 279 </tr> 280 <tr> 281 <td> 282 请输出要生成几位的随机码？ 283 <input type="text" id="random" value="" ></input> 284 </td> 285 <td> 286 <input name="submit" type="button" value="验证码" onClick="randomCode(document.getElementById('random').value);"/> 287 </td> 288 </tr> 289 </table> 290 </form> 291 </div> 292 </body> 293 </html>