我们先来看下运行后的效果：
接下来我们分享给大家全部代码：
<!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 "https://www.jb51.net/":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 "https://www.jb51.net/":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="计算" > <input type="text" value="单击计算10-100之和"> <!--第2题判断是否为闰年--> <p></p> <div>判断是否为闰年：</div> <input type="search" maxlength="4"> <input type="button" value="计算"> <!--第三题计算器--> <p></p> <input type="text" size="5"> <select> <option value="">选择运算符</option> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="https://www.jb51.net/">/</option> </select> <input type="text" size="5"> <input type="button" value=" = " onClick = "Calculate()"> <input type="text"> <!--计算器--> <div> <h2>购物简易计算器</h2> <li><span>第一个数</span> <input type="search"> </li> <li><span>第二个数</span> <input type="search"> </li> <li> <input type="button" value=" + "> <input type="button" value=" - "> <input type="button" value=" × "> <input type="button" value=" ÷ "> </li> <li><span>计算结果</span> <input type="search"> </li> </div> <div> <h3>分别输入abc求根</h3> <input type="text" size="3" value=""> <input type="text" size="3" value=""> <input type="text" size="3" value=""> <br /> <input type="button" value="求根"> <br /> <input type="text" size="7"> <input type="text" size="7"> </div> </body> </html>
其中的JS代码以及样式大家可以在需要用到的时候灵活变换，感谢你对脚本之家的支持。
您可能感兴趣的文章: