本文摘自PHP中文网,作者V,侵删。
效果图:
首先,我们在body中制作页面需要的这些元素
1 2 3 4 5 6 7 8 9 10 11 12 | <body>
<input type= "text" id= "ipt1" >
<select name= "" id= "slt" >
<option value= "+" >+</option>
<option value= "-" >-</option>
<option value= "*" >*</option>
<option value= "/" >/</option>
</select>
<input type= "text" id= "ipt2" >
<button id= "btn" >=</button>
<input type= "text" id= "ipt3" >
</body>
|
上面的id你可随意起,好用就行。
(推荐教程:javascript教程)
javascript代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <body>
<script>
var inpt1 = document.getElementById( "ipt1" );
var inpt2 = document.getElementById( "ipt2" );
var inpt3 = document.getElementById( "ipt3" );
var selt = document.getElementById( "slt" );
var butn = document.getElementById( "btn" );
butn.onclick = function (){
var t1 = parseFloat(ipt1.value);
var t2 = parseFloat(ipt2.value);
var t3 = parseFloat(ipt3.value);
var endValue;
switch (slt.value){
case "+" :
endValue = t1 + t2;
break ;
case "-" :
endValue = t1 - t2;
break ;
case "*" :
endValue = t1 * t2;
break ;
case "/" :
endValue = t1 / t2;
break ;
default :
endValue = t1 + t2;
break ;
}
inpt3.value = endValue;
}
</script>
</body>
|
相关视频教程推荐:javascript视频教程
以上就是js如何实现简易计算器的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript的bom
es6 filter()方法如何实现?用法介绍
js 移动端的 touch 事件使用
js 编码 5 个不良习惯,如何避免?
js怎么设置div的css
javascript操作dom对象之select(详细解答)
爬虫之 js逆向某验滑动加密(2)
纯js实现3d相册(附源码)
用js快速求出三角形面积
js如何创建字符串数组
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何实现简易计算器