使用html+javascriptt实现的简易四则运算（初学JavaScript笔记）

最新推荐文章于 2023-01-30 00:06:26 发布

黄小二哥

最新推荐文章于 2023-01-30 00:06:26 发布

阅读量663

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dongdongleday/p/6551034.html

版权

今天第一天学javascript，做了个简易的四则运算，提供参考，效果图：

html代码：

<!DOCTYPE html>
<html >
<head >
<meta charset="UTF-8">
<link rel="stylesheet" type = "text/css"  href = "css/1.css">
<title>index</title>
</head>
<body id="a1">
<script type="text/javascript" src = "js/3.js">
</script>
<form>
<p >
 <input id = "1" type="text" size="20px" name="a "  onkeyup="this.value=this.value.replace(/[^\d]/ig,'')"/>
 
 <select id = "c">
        <option id = "jia" value="+">+</option>
        <option id = "jian" value="-">-</option>
        <option id = "cheng" value="*">*</option>
        <option id = "chu" value="/">/</option>     
 </select>
 
 
 <input id = "2" type="text" size="20px" name="b"  onkeyup="this.value=this.value.replace(/[^\d]/ig,'')"/>
 
 =

 <input id = "3" type="text" size="20px" name="result "  onkeyup="this.value=this.value.replace(/[^\d]/ig,'')"/>
 
 <input name = "button" type = "button" value= "点击提交" onclick = "cal()">
 
 </p>
</form>
</body>
</html>

js代码：

function  cal(){
        var numa,numb,cc,sum;
        numa = Number(document.getElementById("1").value);
        numb = Number(document.getElementById("2").value);
        cc = document.getElementById("c").value;
        
        if(cc == "+"){
            sum = numa + numb;
        }else if(cc=="-"){
            sum = numa - numb;
        }else if(cc=="*"){
            sum = numa * numb;
        }else{
            sum = numa / numb;
        }
        document.getElementById("3").value= sum;
        //alert("计算结果："+sum);
        
        //document.write(sum);
    }

转载于:https://www.cnblogs.com/dongdongleday/p/6551034.html

黄小二哥

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用html+javascriptt实现的简易四则运算（初学JavaScript笔记）

今天第一天学javascript，做了个简易的四则运算，提供参考，效果图：html代码：<!DOCTYPE html><html ><head ><meta charset="UTF-8"><link rel="stylesheet" type = "text/css" href = "css/1.css"&g...
复制链接

扫一扫