3.方法声明
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> //js中注释和java类似 //单行注释/* */多行注释 // 声明无参无返回值方法 function fn1(){ alert("fn1执行!"); } //调用方法 和java一样 // fn1(); // 声明有参无返回值 function fn2(name,age){ alert(name+":"+age); } // fn2("刘备",18) // 声明无参有返回值方法 function fn3(){ return "疫情赶紧过去吧!"; } var s = fn3(); console.log(s) ; // 声明有参有返回值 function fn4(x,y){ return x*y; } var result = fn4(5,9); console.log(result); // 第二种声明方法的格式 var fn5 = function(){ alert("fn5执行!"); } fn5(); </script> </body> </html>
显示效果
4.页面相关方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="按钮" onclick="myfn()"/> <input type="text" id="i1"/> <div id="d1">这是div</div> <script type="text/javascript"> //点击按钮时执行此方法 function myfn(){ //通过元素id获取元素对象 var d = document.getElementById("d1"); // 获取div中的文本内容 // alert(d.innerText) // d.innerText="修改完成!"; // 通过id得到文本框 var i = document.getElementById("i1") // 修改文本框的值 // i.value="abc"; // 把文本框里面的值取出给到div d.innerText = i.value; } </script> </body> </html>
显示效果
5.平方练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="i1"/> <input type="button" value="平方" onclick="myfn()"/> <div id="d1"> </div> <script type="text/javascript"> function myfn(){ var d = document.getElementById("d1"); var i = document.getElementById("i1"); if(isNaN(i.value)){/* 是NaN不是数 */ d.innerText="输入错误!"; }else{/* 是数 */ d.innerText = i.value*i.value; } } </script> </body> </html>
显示效果
6.计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="i1" /> <input type="text" id="i2" /><br> <input type="button" value="加" onclick="fn5(1)" /> <input type="button" value="减" onclick="fn5(2)" /> <input type="button" value="乘" onclick="fn5(3)" /> <input type="button" value="除" onclick="fn5(4)" /> <hr /> <div id="mydiv"> </div> <script type="text/javascript"> function fn1() { /* var d = document.getElementById("mydiv"); var i1 = document.getElementById("i1"); var i2 = document.getElementById("i2"); */ mydiv.innerText = i1.value * 1 + i2.value * 1; } function fn2() { mydiv.innerText = i1.value - i2.value; } function fn3() { mydiv.innerText = i1.value * i2.value; } function fn4() { mydiv.innerText = i1.value / i2.value; } function fn5(x) { //判断是否是数值 if (isNaN(i1.value) || isNaN(i2.value)){ mydiv.innerText = "输入错误"; return; //结束当前方法 } switch (x) { case 1: mydiv.innerText = i1.value*1 + i2.value*1; break; case 2: mydiv.innerText = i1.value-i2.value; break; case 3: mydiv.innerText = i1.value*i2.value; break; case 4: mydiv.innerText = i1.value/i2.value; break; } } </script> </body> </html>
显示效果
