js html实现计算器功能


Posted in Javascript onNovember 13, 2018

本文实例为大家分享了html实现计算器功能的具体代码,供大家参考,具体内容如下

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
 
    var numresult;
    var str;
    function onclicknum(nums)
    {
      str = document.getElementById("nummessege");
      str.value = str.value + nums;
    }
    function onclickclear()
    {
      str = document.getElementById("nummessege");
      str.value = "";
    }
    function onclickresult()
    {
      str = document.getElementById("nummessege");
      numresult = eval(str.value);
      str.value = numresult;
    }
  </script>
 
</head>
<body bgcolor="affff">
  <!--定义按键表格,每个按键对应一个事件触发-->
  <table border="1" align="center" bgColor="#bbff77"
      style="height: 350px; width: 270px">
    <tr>
      <td colspan="4">
        <input type="text" id="nummessege"
            style="height: 90px; width: 350px; font-size: 50px" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="1" id="1" onclick="onclicknum(1)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="2" id="2" onclick="onclicknum(2)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="3" id="3" onclick="onclicknum(3)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="+" id="add" onclick="onclicknum('+')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="4" id="4" onclick="onclicknum(4)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="5" id="5" onclick="onclicknum(5)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="6" id="6" onclick="onclicknum(6)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="-" id="sub" onclick="onclicknum('-')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" value="7" id="7" onclick="onclicknum(7)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="8" id="8" onclick="onclicknum(8)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="9" id="9" onclick="onclicknum(9)"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="*" id="mul" onclick="onclicknum('*')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" value="0" id="0" onclick="onclicknum(0)"
            style="height: 70px; width: 190px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="." id="point" onclick="onclicknum('.')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
      <td>
        <input type="button" value="/" id="division"
            onclick="onclicknum('/')"
            style="height: 70px; width: 90px; font-size: 35px">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="button" value="Del" id="clear"
            onclick="onclickclear()"
            style="height: 70px; width: 190px; font-size: 35px" />
      </td>
      <td colspan="2">
        <input type="button" value="=" id="result"
            onclick="onclickresult()"
            style="height: 70px; width: 190px; font-size: 35px" />
      </td>
    </tr>
  </table>
</body>
</html>

效果图

js html实现计算器功能

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

Javascript 相关文章推荐
javascript Select标记中options操作方法集合
Oct 22 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
javascript实现日期格式转换
Dec 16 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
vue时间格式化实例代码
Jun 13 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 #Javascript
小程序登录态管理的方法示例
Nov 13 #Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 #Javascript
vue代码分割的实现(codesplit)
Nov 13 #Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 #Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 #Javascript
checkbox在vue中的用法小结
Nov 13 #Javascript
You might like
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
php编程每天必学之表单验证
2016/03/01 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python文件路径名的操作方法
2019/10/30 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
django框架auth模块用法实例详解
2019/12/10 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python中@contextmanager实例用法
2021/02/07 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书