纯js代码实现简单计算器_javascript技巧

本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢。具体如下:
运行效果截图如下:

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
 <title> new document </title>
 <script type="text/javascript">
  function count(){
    var txt1  = parseInt( document.getElementById('txt1').value);//获取第一个输入框的值
    var txt2  = parseInt( document.getElementById('txt2').value);//获取第二个输入框的值
    var select = document.getElementById('select').value;//获取选择框的值
    var result = '';
    switch (select)
     {
      case '+':
        result = txt1 + txt2;
        break;
      case '-':
        result = txt1 - txt2;
        break;
      case '*':
        result = txt1 * txt2;
        break;
      case '/':
        result = txt1 / txt2;
        break;
     }
     document.getElementById('fruit').value = result;//设置结果输入框的值
  }
 </script>
 </head>
 <body>
  <input type='text' id='txt1' />
  <select id='select'>
    <option value='+'>+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type='text' id='txt2' />
  <input type='button' value=' = ' onclick = "count()" /> <!--通过 = 按钮来调用创建的函数,得到结果-->
  <input type='text' id='fruit' />
 </body>
</html>

复制粘贴上方代码即可实现简单的计算器功能,希望本文所述对大家学习javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
计算器
javascript简单计算器、javascript 计算器、javascript计算器代码、javascript简易计算器、javascript制作计算器,以便于您获取更多的相关知识。

时间: 2024-10-30 22:44:24

纯js代码实现简单计算器_javascript技巧的相关文章

纯JS代码实现气泡效果_javascript技巧

就不给大家多文字说明了.给大家梳理下关键步骤. 关键步骤: 1.引入js文件 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src='js/jquery.thoughtBubble.js'></script> 2.在需要使用气泡效果的地方 <div i

js当月水电气简单计算器_javascript技巧

水:起度 止度 单价 附加 电:起度 止度 单价 附加 气:起度 止度 单价 附加 说明:输入各项后,在页面任意空白处点击鼠标,页面自动计算一次结果! 名称 起度(吨/度/方) 止度(吨/度/方) 数量(吨/度/方) 单价(元) 附加金额(元) 总金额(元) 水             电             气             合计(元)   [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

js的表单操作 简单计算器_javascript技巧

代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

分享两段简单的JS代码防止SQL注入_javascript技巧

1.URL地址防注入: //过滤URL非法SQL字符 var sUrl=location.search.toLowerCase(); var sQuery=sUrl.substring(sUrl.indexOf("=")+1); re=/select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|;|>|<|%/i; if(re.test(sQuery)) { alert("请勿

js实现简单计算器_javascript技巧

参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html

js复制内容到剪贴板代码,js复制代码的简单实例_javascript技巧

如下所示: <script type="text/JavaScript"> function jsCopy(){ var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </script> <textarea id="conte

纯JavaScript代码实现文本比较工具_javascript技巧

先上效果图: 代码如下所示: 把源码保存为html格式的文件就可以直接运行了 <!doctype html> <html> <head> <title>文本比较工具</title> <style type="text/css"> *{padding:px;margin:px;} html,body{ overflow-y: hidden; } .edit_div{ border: px solid #CCCCCC;

15位和18位身份证JS校验的简单实例_javascript技巧

一.身份证号码的结构和表示形式 1.号码的结构 根据[中华人民共和国国家标准GB11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码. 2.地址码 表示编码对象常住户口所在县(市.旗.区)的行政区划代码,按GB/T2260的规定执行. 3.出生日期码 表示编码对象出生的年.月.日,按GB/T7408的规定执行,年.月.日代码之间不用分隔符. 4.顺序

JavaScript程序开发之JS代码放置的位置_javascript技巧

JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?下面来看一下. 一般来说有两种方式,写在界面上和使用.js文件. 1.1界面上的Head部分 可以直接放在head标签内,如下代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>testPage</title> <script type=&quo