本文摘自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如何实现简易计算器的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
一起来聊聊jquery、javascript与js三者间的区别
同源策略是什么意思
js中substring、slice与substr的区别有哪些?
用js+html5实现的小游戏-- 捕鱼达人游戏
了解js中!/+/-/~ function() {/*...*/}()是什么意思
浏览器的事件循环
原生js和js的区别是什么
js实现统计字符出现的次数并去重的方法
js怎么传一个对象
实例详解js数组方法slice()的用法
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何实现简易计算器