源代码之网页版计算器（js）

最新推荐文章于 2025-04-05 20:39:41 发布

Serendipity***

最新推荐文章于 2025-04-05 20:39:41 发布

阅读量1.5k

点赞数 2

分类专栏：前端 web 文章标签： js css javascript html css3

本文链接：https://blog.youkuaiyun.com/qq_44394562/article/details/117425960

版权

web 同时被 2 个专栏收录

10 篇文章

订阅专栏

前端

8 篇文章

订阅专栏

今天给大家分享一个网页版计算器的源码，需要的可以拿走哦~~
在这里插入图片描述
HTML：

<!DOCTYPE html>
<html>
<head>
<title>js蓝色网页计算器</title>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

<div id="btn">
	<input type="text" name="" id="view"  value="0">
	<ul>
		<li>±</li>
		<li>(</li>
		<li>)</li>
		<li>+</li>
	</ul>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>-</li>
	</ul>
	<ul>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>*</li>
	</ul>
	<ul>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>/</li>
	</ul>
	<ul>
		<li>C</li>
		<li>0</li>
		<li>.</li>
		<li >=</li>
	</ul>
</div>

<script type="text/javascript" src="js/jisuanqi.js"></script>

</body>
</html>

js：

window.onload = function(){//浏览器加载完毕时执行
	clickBtn();
}
var i = 1;//约束小数点
var j = 1;//约束左括号
var k = 1;//约束右括号
function clickBtn(){//单击按钮
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById("view")) return false;

	var li = document.getElementsByTagName("li");//获取按钮元素节点
		for(var i=0;i<li.length;i++){
		li[i].onclick = function(){//单击相应按钮
			keyClick(this);
		}
	}
}
var shu = "";//定义一个字符串
function xianshi(name){
	if(!document.getElementById) return false;

	var view = document.getElementById("view");
	// alert(view.value.charAt(view.value.length-1));
	shu += name;//进行字符串拼接
	view.value = shu;//显示
	}
function yunsuan(){
	if(!document.getElementById) return false;

	var view = document.getElementById("view");
	var jieguo = eval(view.value);
	/*eval 函数允许 JScript 源代码的动态执行。
		eval("var mydate = new Date();");
	  slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
		用于删除单个字符  view.value.slice(0,view.vlaue.length-1);
	*/
	view.value = jieguo;//显示结果
	shu = jieguo;//将结果值存到变量中
}
function qingping(){
	if(!document.getElementById) return false;

	var view = document.getElementById("view");
	view.value = "0";//显示0
	shu = "";//并将字符串清空
}

function keyClick(li){//对每个按钮进行处理
	if(!document.getElementById) return false;

	var view = document.getElementById("view");//获取显示
	if(li.firstChild.nodeValue=="C"){//如果单击"C"
		i=1;
		qingping();//进行清屏操作
	}else if(li.firstChild.nodeValue=="±"){//单击±按钮执行操作
		if(isNaN(view.value)){
			//什么都不执行
		}else{
		view.value = 0 - view.value;
		}
	}else if(li.firstChild.nodeValue=="0"){//单击0执行操作
		if(view.value=="0"){
			//什么都不执行
		}else{
			xianshi(li.firstChild.nodeValue);
		}
	}else if(li.firstChild.nodeValue==")"){//单击)执行操作
		if(view.value.charAt(view.value.length-1)=="+"){
			xianshi("0"+li.firstChild.nodeValue);
		}else{
			xianshi(li.firstChild.nodeValue);
		}
	}else if(li.firstChild.nodeValue=="."){//单击.执行操作
		/*var ss = document.getElementById("input");
			var n = ss.value.indexOf(".");
			if(n>0){alert('只能输入一位数小数点');*/
			/*
			charAt() 返回在指定位置的字符。*/
		if(i==0){
			//什么都不执行
		}else{
			i=0;
			if(view.value == 0||view.value.charAt(view.value.length-1)=="+"||view.value.charAt(view.value.length-1)=="-"||view.value.charAt(view.value.length-1)=="*"||view.value.charAt(view.value.length-1)=="/"){
				xianshi("0.");
			}else{
				xianshi(li.firstChild.nodeValue);
			}
		}
		// this.firstChild.nodeValue.match(".")
	}else if(li.firstChild.nodeValue=="+"||li.firstChild.nodeValue=="-"||li.firstChild.nodeValue=="*"||li.firstChild.nodeValue=="/"){//单击运算符号执行操作
		if(view.value == 0||view.value.charAt(view.value.length-1)=="("){
			i=1;
		xianshi("0"+li.firstChild.nodeValue);
		}else{
			if(view.value.charAt(view.value.length-1)=="+"||view.value.charAt(view.value.length-1)=="-"||view.value.charAt(view.value.length-1)=="*"||view.value.charAt(view.value.length-1)=="/"){
				//什么都不执行
			}else{
				i=1;
				xianshi(li.firstChild.nodeValue);
			}
		}
	}else if(li.firstChild.nodeValue=="="){//单击等号执行操作
		yunsuan();//进行运算
	}else{//单击数字按钮执行操作
		xianshi(li.firstChild.nodeValue);//单击按钮进行显示
	}
}

css：

#view{
	text-align: right;
	padding: 0px 5px;
	border-radius: 10px;
	margin: 12px 7px;
	width: 370px;
	height: 75px;
	border: 2px solid #ccc;
	font-size: 2em;
	color: #999;
	outline: none;
}
div{border-radius: 20px;
	width: 400px;
	height: 580px;
	background-color: rgb(125,185,222);
	margin: 0 auto;
}
ul{
	padding: 0px;
	margin: 0px;
	margin-left: 17px;
}
ul li{
	font-weight: bold;
	background-color: rgb(46,169,223);
	font-size: 2em;
	border-radius: 20px;
	margin: 4px 4px 4px 4px;
	line-height: 86px;
	text-align: center;
	width: 84px;
	height: 84px;
	list-style: none;
	float: left;
	box-shadow: 2px 2px 1px #555;
}
ul li:hover{
	color: #fff;
	background-color: rgb(106,76,156);
	box-shadow: -2px -2px 1px #555;
}