本文實例講述了javascript實現簡單的可隨機變色網頁計算器。分享給大家供大家參考,具體如下:
該程序能實現簡單的加、減、乘、除、求余,頁面還添加了隨機變換顏色的功能。
運行效果圖如下:

完整實例代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> Day 2 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script> function calculator(){ var selection=document.form.selection.value; var numb1=document.form.number1.value; var numb2=document.form.number2.value; var relnum=""; switch(selection){ case "+": relnum=parseFloat(numb1)+parseFloat(numb2); break; case '-': relnum=numb1 - numb2; break; case '*': relnum=numb1 * numb2; break; case '/': if(numb2==0) alert("wrong input! "); relnum=numb1 / numb2; break; case '%': relnum=numb1 % numb2; break; } document.form.result.value=relnum; } function sound(){ document.all.sound.src="clock.wav"; } function changeBgcolor(){ var bgc=document.getElementById("idbgc"); var rand=""; for(var i=0;i<6;i++){ rand+=Math.round(Math.random()*9) } bgc.style.backgroundColor='#'+rand; } </script> </HEAD> <BODY bgcolor="aliceblue" id="idbgc"> <h1>simple web calculator</h1> <form name="form" action=""> <input type=text name="number1" style="width:80px "> <select name="selection"> <option value='+'> + <option> <option value='-'>-<option> <option value='*'>*<option> <option value='/'>/<option> <option value='%'>%<option> </select> <input type=text name="number2" style="width:80px "> <input type="button" value=" = " onclick="calculator(),changeBgcolor()"> <input type=text name="result" style="width:80px "><br> <input type="reset" value="reset" onclick="changeBgcolor()"> </form> </BODY></HTML>PS:這里再為大家推薦兩款本站的在線計算器,都是采用js實現,且功能強大,相信對于大家深入了解JavaScript數學運算及web設計有所幫助:
在線標準計算器:
http://tools.VeVB.COm/jisuanqi/jsq
在線科學計算器:
http://tools.VeVB.COm/jisuanqi/jsqkexue
更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript數組操作技巧總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答