html+js+css实现计算器功能
2017-09-22 21:10
1131 查看
html+js+css实现计算器功能
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="" ="utf-8"> <link rel="stylesheet" type="text/css" href="./css/a.css"> <script type=text/javascript src="./js/b.js"></script> </head> <title>caculator</title> </head> <body onload="onload"> <div id="main"> <div class="jieguo"> <input type="text" id="screenname" name="screenname" class="screen" value="" onfocus="jsp(this)"> </div> <div class="keys"> <div class="key1"> <input type="button" id="AC" onclick="clearNum()" value="AC" class="buttons"> <input type="button" id="←" onclick="tuiGe()" value="←" class="buttons"> <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons"> <input type="button" id="÷" onclick="jsq(this.id)" value="÷" class="buttons" style="background-color: #ffbb66"> </div> <div class="key2"> <input type="button" id="7" onclick="clearNum()" value="7" class="buttons"> <input type="button" id="8" onclick="tuiGe()" value="8" class="buttons"> <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons"> <input type="button" id="×" onclick="jsq(this.id)" value="×" class="buttons" style="background-color: #ffbb66"> </div> <div class="key3"> <input type="button" id="4" onclick="clearNum()" value="4" class="buttons"> <input type="button" id="5" onclick="tuiGe()" value="5" class="buttons"> <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons"> <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="background-color: #ffbb66"> </div> <div class="key4"> <input type="button" id="1" onclick="clearNum()" value="1" class="buttons"> <input type="button" id="2" onclick ="tuiGe()" value="2"class="buttons"> <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons"> <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons" style="background-color: #ffbb66"> </div> <div class="key5"> <input type="button" id="0" onclick="jsq(this.id)" value="0" class="buttons"> <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons" style="width: 100px;height: 50px;"> <input type="button" id="=" onclick="eva()" value="=" class="buttons" style="width: 100px;height: 50px;background-color: #ffbb66"> </div> </div> </div> </body> </html>
a.css
body,html,.key{ margin: 0px; padding: 0px; } #main{ margin-left: 35%; } .jieguo input{ width: 400px; height: 40px; top: 500px; text-align: center; border-radius: 8px; text-align: center; } .keys{ margin-left: 0; width: 400px; } .key1 input{ width: 100px; height: 50px; float: left; margin-left: 0px; background-color: #AAAAAA; border:1px solid black; } .key2 input{ width: 100px; height: 50px; float: left; margin-left: 0px; background-color: #DDDDDD; border:1px solid black; } .key3 input{ width: 100px; height: 50px; float: left; padding: 0px,auto; background-color: #DDDDDD; border:1px solid black; } .key4 input{ width: 100px; height: 50px; float: left; margin-left: 0px; background-color: #DDDDDD; border:1px solid black; } .key5 input{ width: 200px; height: 50px; background-color: #DDDDDD; float: left; margin-left: 0px; border:1px solid black; }
b.js
var numresult; var str; var input ; function onclicknum(nums) { input = document.getElementById("screenname"); input.value= input.value + nums; } function onclickclear() { input = document.getElementById("screenname"); input.value= ""; } function onclickresult() { input = document.getElementById("screenname"); numresult = eval(input.value); input.value= numresult; } function onclickback() { input = document.getElementById("screenname"); str=input.value.substring(0,input.value.length-1); document.getElementById("screenname").value=str; }
下面放两张例子图
完整代码下载的链接:点击下载
相关文章推荐
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- html+css+js 实现计算器
- html+css+js实现xp window界面及有关功能
- html+css+js实现扁平风格网页计算器
- html+css+js实现xp window界面及有关功能
- html+css+js实现xp window界面及有关功能
- html+css+js实现抽奖功能
- js html实现计算器功能
- html+css实现选项卡功能
- 网页版计算器的实现(js实现计算功能)
- js仿百度切换皮肤功能(html+css)
- JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
- 前端 css+js实现返回顶部功能
- JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
- Zend Studio 上 安装使用Aptana插件(html,css,js代码提示功能)
- 计算器完整版html+css+js
- js div+css 实现tab功能
- HTML+CSS+JS实现轮播效果
- 利用ActiveX实现本地文件夹选择功能(JS,HTML)
- “代码雨”js+css+html实现