js编写简单网页计算器(js实现网页计算器)
类别:编程学习 浏览量:1312
时间:2022-03-29 03:29:35 js编写简单网页计算器
js实现网页计算器如何在利用HTML,css和js的知识制作一个简单的网页计算器呢?
一个计算机中具备了:
- 计算机整体框
- 输入框
- 输入按钮
计算机整体框:
/*设置li样式*/ #showli{ border: solid 1px; border-radius: 5px; width: 350px; height: 400px; text-align: center; margin: auto;/*设置居中*/ margin-top: 50x; background-color: rgb(214, 219, 190); }
输入框:
/*设置输入框样式*/ input[type=text]{ margin-top: 20px; width: 290px; height: 40px; font-size: 20px; }
输入按钮:
/*设置按钮样式*/ input[type=button]{ width: 60px; height: 60px; margin-top: 20px; margin-left: 5px; margin-right: 5px; font-size: 30px; font-weight: bolder; font-family: "楷书"; }
使用js代码对执行对应业务逻辑操作:
<!--声明js代码--> <script> function test(btn){ //获取button按钮对象 var number = btn.value; //执行对应的业务逻辑 switch (number) { case "=": document.getElementById("input").value= eval(document.getElementById("input").value); break; case "c": document.getElementById("input").value=""; break; default: //将按钮的值赋值给input输入框 document.getElementById("input").value+=number; break; } } </script>
使用HTML对计算机进行排版布局:
<body> <li id="showli"> <input type="text" id="input" readonly="readonly"><br> <input type="button" value="1" onclick="test(this)"> <input type="button" value="2" onclick="test(this)"> <input type="button" value="3" onclick="test(this)"> <input type="button" value="4" onclick="test(this)"><br> <input type="button" value="5" onclick="test(this)"> <input type="button" value="6" onclick="test(this)"> <input type="button" value="7" onclick="test(this)"> <input type="button" value="8" onclick="test(this)"><br> <input type="button" value="9" onclick="test(this)"> <input type="button" value="+" onclick="test(this)"> <input type="button" value="-" onclick="test(this)"> <input type="button" value="*" onclick="test(this)"><br> <input type="button" value="0" onclick="test(this)"> <input type="button" value="/" onclick="test(this)"> <input type="button" value="c" onclick="test(this)"> <input type="button" value="=" onclick="test(this)"> </li> </body>
总体代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /*设置li样式*/ #showli{ border: solid 1px; border-radius: 5px; width: 350px; height: 400px; text-align: center; margin: auto;/*设置居中*/ margin-top: 50x; background-color: rgb(214, 219, 190); } /*设置输入框样式*/ input[type=text]{ margin-top: 20px; width: 290px; height: 40px; font-size: 20px; } /*设置按钮样式*/ input[type=button]{ width: 60px; height: 60px; margin-top: 20px; margin-left: 5px; margin-right: 5px; font-size: 30px; font-weight: bolder; font-family: "楷书"; } </style> <!--声明js代码--> <script> function test(btn){ //获取button按钮对象 var number = btn.value; //执行对应的业务逻辑 switch (number) { case "=": document.getElementById("input").value= eval(document.getElementById("input").value); break; case "c": document.getElementById("input").value=""; break; default: //将按钮的值赋值给input输入框 document.getElementById("input").value+=number; break; } } </script> <title>Document</title> </head> <body> <li id="showli"> <input type="text" id="input" readonly="readonly"><br> <input type="button" value="1" onclick="test(this)"> <input type="button" value="2" onclick="test(this)"> <input type="button" value="3" onclick="test(this)"> <input type="button" value="4" onclick="test(this)"><br> <input type="button" value="5" onclick="test(this)"> <input type="button" value="6" onclick="test(this)"> <input type="button" value="7" onclick="test(this)"> <input type="button" value="8" onclick="test(this)"><br> <input type="button" value="9" onclick="test(this)"> <input type="button" value="+" onclick="test(this)"> <input type="button" value="-" onclick="test(this)"> <input type="button" value="*" onclick="test(this)"><br> <input type="button" value="0" onclick="test(this)"> <input type="button" value="/" onclick="test(this)"> <input type="button" value="c" onclick="test(this)"> <input type="button" value="=" onclick="test(this)"> </li> </body> </html>
实现效果:
你一定已经学会了前端网页计算机的制作了吧!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- python pdf文件操作(Python常见读写文件操作实例总结文本、json、csv、pdf等)
- ASP.NET中XML和JSON互转
- 详解JS中你不知道的各种循环测速(详解JS中你不知道的各种循环测速)
- SQL Server中如何将数据导出为XML或Json文件
- js实现图片旋转
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- jsarray操作技巧(JS数组reduce你不得不知道的25个高级用法)
- jspromise原理(JavaScript使用promise处理多重复请求)
- js 定时切换图片(JavaScript定时器实现无缝滚动图片)
- js编写简单网页计算器(js实现网页计算器)
- 用js做一个计算器(使用JS实现简易计算器)
- mysql的json格式解析(mysql json格式数据查询操作)
- js数组的sort排序
- js字符串加密解密
- pythonjson格式化原理(详解pythonstr与json类型转换)
- python编写程序读写数据库(详解js文件通过python访问数据库方法)
- 经度,世界时间腕表的灵魂(世界时间腕表的灵魂)
- 阿里最新财报公布 三季度营收增长3 ,将增加150亿美元回购额度 在美股价小涨(阿里最新财报公布)
- 赵薇时胖时瘦 最近变美少女 原因在这里 躺着就变瘦(赵薇时胖时瘦最近变美)
- 学会这26种姿势,你就可以和兵哥哥切磋了(你就可以和兵哥哥切磋了)
- 吴彦祖陈冠希 恩怨 ,失去曾让他流泪的女友,终遇走过18年真爱(吴彦祖陈冠希恩怨)
- 痴情男神 吴彦祖 与妻子恋爱8年,结婚10年,家庭幸福美满(痴情男神吴彦祖)
热门推荐
- 颜色识别模块抓取物体(Referer原理与图片防盗链实现方法详解)
- nginx给需要转发的链接添加参数(Nginx 根据URL带的参数转发的实现)
- 哪里有云主机租用(云主机租用要注意的事项?)
- laravel数据转换层(laravel通过a标签从视图向控制器实现传值)
- svn代码冲突的解决
- 安装phpstudy注意哪些问题(phpstudy怎么卸载?phpstudy卸载图文教程)
- javascript登录转注册界面(JavaScript实现登录窗体)
- 阿里云服务器可以连接几个面板(阿里云云服务器宝塔面板的安装图文教程详解)
- Oracle TO_CHAR的使用
- html5的canvas图形绘制技术(详解HTML5 Canvas标签及基本使用)