简单的计算器
代码语言:html
所属分类:其他
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <title>计算器</title> <meta charset="utf-8"> <style> #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; } #btn { border-radius: 20px; width: 400px; height: 580px; background-color: #999999; margin: 0 auto; } ul { padding: 0px; margin: 0px; margin-left: 17px; } ul li { font-weight: bold; background-color: #cebfbf; 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: #01baff; box-shadow: -2px -2px 1px #555; } </style> </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"> 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; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0