javascript实现编写网页版计算器

本篇主要记录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下
话不多说,代码如下:
首先是html的代码:

利用js实现网页版计算器 - 锐客网

【javascript实现编写网页版计算器】接下来是css样式代码:
* {margin: 0px; padding: 0px; }.clearfix:before, .clearfix:after {content: ''; display: block; }.clearfix:after {clear: both; }.clearfix {_zoom: 1; }input {display: block; }.container {width: 240px; height: 400px; border: 2px solid #eb4509; margin: 100px auto; }.fl {float: left; }.fr {float: right; }input {width: 60px; height: 60px; border: 1px solid #000; float: left; background: #ddd; font-size: 24px; color: #eb4509; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }.math input {float: none; }input.zero {width: 120px; }#num {width: 180px; }#cal #math {width: 60px; }.result {width: 100%; height: 100px; line-height: 100px; border: none; background-color: #dfdfdf; font-size: 30px; float: none; outline: none; text-align: right; padding-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

最后上js代码:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读