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;width: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>
