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>
实现效果:
你一定已经学会了前端网页计算机的制作了吧!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- mysql xml转换json(Mysql将查询结果集转换为JSON数据的实例代码)
- php加密平台(PHP7实现和CryptoJS的AES加密方式互通示例AES-128-ECB加密)
- js怎么防抖(JS防抖节流函数的实现与使用场景)
- vue切换图片效果(Vue.js实现图片切换功能)
- js的showModalDialog的用法
- js里咋样设置css里面的属性(css不常见属性之pointer-events的使用方法)
- js中Attribute和Property区别
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- js使用canvas(JavaScript canvas实现七彩时钟效果)
- js编写简单网页计算器(js实现网页计算器)
- js如何将json字符串转换为json对象
- js扫雷小游戏源代码(原生js实现简单贪吃蛇小游戏)
- js验证身份证号
- extjs xtype的使用
- js怎么上传压缩图片(如何用JS有效的压缩图片)
- js函数声明和函数表达式的区别
- 于正又推女性古装大剧 杨蓉乔欣演女配,两位女主成 重头戏(于正又推女性古装大剧)
- 乔欣古装女主戏获热度 作为女主,却没吃到红利(乔欣古装女主戏获热度)
- 爱情是什么(爱情是什么最经典的话)
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
热门推荐
- javascript 自带格式化时间(JavaScript内置日期、时间格式化时间实例代码)
- mysql数据库与表的基本操作总结(Mysql、Oracle中常用的多表修改语句总结)
- docker启动项目需要tomcat吗(docker安装tomcat并部署Springboot项目war包的方法)
- 云服务器的巧妙用法(云服务器的技术是如何实现的?)
- mysql时间存储如何选择(MySQL如何使用时间作为判断条件)
- linuxpasswd用法(Linux passwd 命令的使用)
- js实现网页特效(利用原生js模拟直播弹幕滚动效果)
- centos7docker部署(CentOS 7下设置Docker代理Linux下Systemd服务的环境变量配置)
- teamcenter常见问题(TeamCenter12登陆报404/503问题解决方案)
- vue3.0 自定义组件(Vue 3.0自定义指令的使用入门)