JS处理一些简单计算题
程序员文章站
2023-10-11 14:55:45
我们先来看下运行后的效果：
接下来我们分享给大家全部代码：
我们先来看下运行后的效果：
接下来我们分享给大家全部代码：
<!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代码以及样式大家可以在需要用到的时候灵活变换，感谢你对的支持。