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

今天给大家分享一个网页版计算器的源码，需要的可以拿走哦~~

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";//显示0shu = "";//并将字符串清空
}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;
}

源代码之网页版计算器（js）相关推荐

JavaScript原生-网页版计算器
由于无聊看电脑上的系统软件翻到了计算器这个功能于是无聊就无聊吧,就简单写一下这个计算器的功能吧.这个网页版计算器基本功能都有吧,但是不是很完全,仅供参考. 首先是网页计算器的样式部分不想手写直接复制 ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
Spring Boot入门（9）网页版计算器
介绍在写了前八篇Spring Boot项目的介绍文章后,我们已经初步熟悉了利用Spring Boot来做Web应用和数据库的使用方法了,但是这些仅仅是官方介绍的一个例子而已. 本次分享将介绍 ...
用计算机弹暖暖数字代码,奇迹暖暖网页版计算器
<远征>即将推出衣橱系统或将成为网游版奇迹暖暖双十一狂欢刚刚落幕,这几天的状态都将在等快递.拆快递中度过,而你剁手而来的衣服,是否需要一个大大的衣帽间呢? 谁才是虎牙直播中流砥柱骚男 ...
php编网页版计算器,php编程实现简单的网页版计算器功能示例
本文实例讲述了php编程实现简单的网页版计算器功能.分享给大家供大家参考,具体如下: 如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础知识来做的网页版计算器,功能只有&qu ...
php编网页版计算器,php实现简单的网页版计算器功能的方法
这篇文章主要介绍了php编程实现简单的网页版计算器功能,涉及php简单表单操作与数值运算相关实现技巧,需要的朋友可以参考下如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础 ...
php编网页版计算器,php 简单网页计算器的完整代码
这篇文章主要为大家详细介绍了php 简单网页计算器的完整代码,具有一定的参考价值,可以用来参考一下. 对php实现的一个简单的网页计算器代码感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! ...
WEB网页版计算器（HTML、CSS、JavaScript实现）
划重点!!! (兄弟们只需要建一个test的html文件.file的CSS文件和test1的js文件,将对应的代码粘贴进去可以运行啦~) 一.效果截图: 功能: 1.实现简单的四则运算. ...
小米商城网页版（js+css）
js: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

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

源代码之网页版计算器（js）相关推荐

最新文章

热门文章