我们先来看下运行后的效果：
接下来我们分享给大家全部代码：
<!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代码以及样式大家可以在需要用到的时候灵活变换，感谢你对的支持。
© 版权声明
THE END
暂无评论内容