js做一个简单的计算器

最新推荐文章于 2024-04-29 21:35:15 发布

码路老默007

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量968

点赞数 1

分类专栏：不常用功能文章标签： javascript css html

本文链接：https://blog.csdn.net/2201_75705263/article/details/129910707

版权

不常用功能专栏收录该内容

5 篇文章 0 订阅

订阅专栏

给自己做一个计算器酷！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<style type="text/css">
						*{
							margin: 0;
							padding: 0;
						}
						div{
							width: 300px;
							border: 1px solid #666;
							margin: 0 auto;
							text-align: center;
						}
						textarea{
							/* 取消右下角标识，禁止拖拽 */
							resize: none;
							width: 100%;
							border: 0;
							outline: 0;
							border-bottom: 1px solid #666;
							height: 100px;
							font-size: 35px;
						}
						button{
							width: 30%;
							height: 50px;
							margin: 2px 0px;
						}
					</style>
	</head>
	<body>
		<div>
					<textarea id="txt" readonly></textarea>
					<button>1</button>
					<button>2</button>
					<button>3</button>
					<button>4</button>
					<button>5</button>
					<button>6</button>
					<button>7</button>
					<button>8</button>
					<button>9</button>
					<button>0</button>
					<button>.</button>
					<button>+</button>
					<button>-</button>
					<button>*</button>
					<button>/</button>
					<button>%</button>
					<button>C</button>
					<button>=</button>
				</div>
	</body>
	<script type="text/javascript">
		//获取所有的button元素
				var btns=document.getElementsByTagName("button");
				//遍历循环所有的元素
				for(var i=0;i<btns.length;i++){
					//给没有btn加上按钮
					btns[i].onclick=function(){
						//如果点击了C按钮，那么就清空
						if(this.innerHTML=="C"){
							txt.innerHTML="";
							//如果点击了=号，就按照代码计算
						}else if(this.innerHTML=="="){
							txt.innerHTML=eval(txt.innerHTML)
						}else{
							//其他所有点的按钮就按照字符串拼接就行
							txt.innerHTML+=this.innerHTML
						}
					}
				}	
			</script>
</html>