AI编程助手
AI免费问答

如何用javascript实现计算器功能

王林   2021-11-03 17:13   4368浏览 原创
用javascript实现计算器功能的方法:【function init(){ var num=document.getElementById("num"); num.value=0; var btn_num1; var fh; ...】。

本文操作环境:windows10系统、javascript 1.8.5、thinkpad t480电脑。

想必大家在学习编程语言的过程中都曾写过计算器功能,比如使用php、java、python等语言。那么你有没有使用过javascript实现过计算器功能呢?其实原理都是一样的,让我们一起来看看吧!

HTML代码:

nbsp;html>


	<title>js计算器</title><link><script>
</script><!-- 1个文本框10个数字....20个按钮 --><div>
	<form>
	<div>
		<input>
</div>
	</form>
	<div>
		<input><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input>
</div>
</div>

`

JS代码:

function init(){
	var num=document.getElementById("num");
	num.value=0;
	var btn_num1;
	var fh;
	num.disabled="disabled";
	// var n1=document.getElementById("n1");
	// n1.οnclick=function(){
	// }
	var oButton=document.getElementsByTagName("input");
	for(var i=0;i<obutton.length obutton if num.value="this.value;" var switch case btn_num1="num.value*1;//=parseInt(num.value)这个也可以,后面的话需要改为number" fh="+" break init_baidu alert function n='n+".";' return window.location.href="http://www.baidu.com"><p>CSS代码:<br></p>
<pre class="brush:css;toolbar:false">*{
	margin:0px;
	padding:0px;
}
div{
	width:170px;
}
#div1{
	top:60px;
	left: 100px;
	position:absolute;
}
input[type="button"]{
	width:30px;
	margin-right: 5px;
}
input[type="text"]{
	width:147px;
	text-align: right;
	background-color:white;
	border:1px solid;
	padding-right:1px;
	box-sizing:content-box;
}
input[type="button"]:hover{/*//伪类和按钮的使用*/
	background-color:white;
	border:1px solid;
}

推荐学习:javascript视频教程

Java免费学习笔记:立即学习
解锁 Java 大师之旅:从入门到精通的终极指南

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。