我們先來看下運行后的效果：
接下來我們分享給大家全部代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> <style type="text/css"> /*計算器的style*/ .jisuanqi { width: 270px; height: 200px; border: 1px solid black; list-style-type: none; background: #C9E495; margin: 10px 0px 10px 0px; } .jisuanqi span { width: 20px; height: 10px; margin-right: 5px; } .jisuanqi input { margin-bottom: 5px; } [name=yunsuanfu] { width: 50px; height: 30px; margin-left: 10px; } /*一元二次函數求根style*/ .box { width: 300px; height: 200px; border: 1px solid black; text-align: center; background: #C9E495; } .box input { margin-bottom: 10px; } </style> <script type="text/javascript"> //計算10-100之和 function Sum(){ var i=0; for (var j=10;j<=100;j++){ i+=j; } document.getElementById("count").value=i; } //判斷是否閏年 function Runnian() { var year = document.getElementById("year").value; if (year==""){ alert("請先輸入年份"); } else if (year<=0){ alert("請輸入大于0的年份"); } else if ((year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){ document.write(year+"是閏年"+"/n"); document.write("<a href=''>返回重新輸入</a>") } else{ document.write(year+"不是閏年"+"/n"); document.write("<a href=''>返回重新輸入</a>") } } //計算器1 function Calculate (){ var sum=0; var num1 = parseFloat(document.getElementById("text1").value); var num2 = parseFloat(document.getElementById("text2").value); var sel = document.getElementById("select").value; switch(sel){ case "+":sum=num1+num2;break; case "-":sum=num1-num2;break; case "*":sum=num1*num2;break; case "/":sum=num1/num2;break; default:sum="請輸入數字選擇運算符";break; } document.getElementById("jieguo").value = sum; } //計算器2 function Cal(count){ var sum; var num1 = parseFloat(document.getElementById("text3").value); var num2 = parseFloat(document.getElementById("text4").value); switch(count){ case "+":sum=num1+num2;break; case "-":sum=num1-num2;break; case "*":sum=num1*num2;break; case "/":sum=num1/num2;break; } document.getElementById("result").value = (sum.toFixed(2)); } //計算一元二次函數根 function hanshu(){ var a=parseFloat(document.getElementById("txta").value); var b=parseFloat(document.getElementById("txtb").value); var c=parseFloat(document.getElementById("txtc").value); var d=b*b-4*a*c var r1=(-b+Math.sqrt(d))/(2*a); var r2=(-b-Math.sqrt(d))/(2*a); document.getElementById("txt1").value=(r1.toFixed(2)); document.getElementById("txt2").value=(r2.toFixed(2)); } </script> </head> <body> <!--第1題計算10到100之和--> <input type="button" value="計算" onClick="Sum()" > <input type="text" id="count" value="單擊計算10-100之和"> <!--第2題判斷是否為閏年--> <p></p> <div>判斷是否為閏年：</div> <input type="search" id="year" maxlength="4"> <input type="button" value="計算" onClick="Runnian()"> <!--第三題計算器--> <p></p> <input type="text" id="text1" size="5"> <select id="select"> <option value="">選擇運算符</option> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="text2" size="5"> <input type="button" value=" = " onClick = "Calculate()"> <input type="text" id="jieguo"> <!--計算器--> <div class="jisuanqi"> <h2>購物簡易計算器</h2> <li><span>第一個數</span> <input type="search" id="text3"> </li> <li><span>第二個數</span> <input type="search" id="text4"> </li> <li> <input type="button" value=" + " name="yunsuanfu" onClick="Cal('+')"> <input type="button" value=" - " name="yunsuanfu" onClick="Cal('-')"> <input type="button" value=" × " name="yunsuanfu" onClick="Cal('*')"> <input type="button" value=" ÷ " name="yunsuanfu" onClick="Cal('/')"> </li> <li><span>計算結果</span> <input type="search" id="result"> </li> </div> <div class="box"> <h3>分別輸入abc求根</h3> <input type="text" size="3" value="" id="txta"> <input type="text" size="3" value="" id="txtb"> <input type="text" size="3" value="" id="txtc"> <br /> <input type="button" value="求根" onClick="hanshu()"> <br /> <input type="text" size="7" id="txt1"> <input type="text" size="7" id="txt2"> </div> </body> </html> 其中的JS代碼以及樣式大家可以在需要用到的時候靈活變換，感謝你對武林網的支持。
新聞熱點
疑難解答
