jQuery/javascript实现简单网页计算器

 1 <html>
 2 <head>
 3 <meta charset="utf-8">
 4 <title>jQuery实现</title>
 5 <script src="jquery.js"></script>
 6 
 7 <style type="text/css">
 8     table{background-color:pink;width:300px;height:200px;}
 9     td{text-align:center;}
10 </style>
11 
12 <script language="javascript">
13     $("document").ready(function(){
14         $("#b1").click(function(){
15             var num1=$("#num1").val();
16             var num2=$("#num2").val();
17             var num3=eval(num1)+eval(num2);
18             $("#num3").val(num3);
19             
20         });
21         
22         $("#b2").click(function(){
23             var num1=$("#num1").val();
24             var num2=$("#num2").val();
25             var num3=eval(num1)-eval(num2);
26             $("#num3").val(num3);
27         });
28         
29         $("#b3").click(function(){
30             var num1=$("#num1").val();
31             var num2=$("#num2").val();
32             var num3=eval(num1)*eval(num2);
33             $("#num3").val(num3);
34         });
35         
36         $("#b4").click(function(){
37             var num1=$("#num1").val();
38             var num2=$("#num2").val();
39             var num3=eval(num1)/eval(num2);
40             $("#num3").val(num3);
41         });
42     });
43 </script>
44 </head>
45 <body>
46 <center>
47 <form action="" method="post">
48     <table border="1px">
49         <tr>
50             <td>数字1:</td>
51             <td><input type="text" id="num1"/></td>
52         </tr>
53         <tr>
54             <td>数字2:</td>
55             <td><input type="text" id="num2"/></td>
56         </tr>
57         <tr>
58             <td>结果:</td>
59             <td><input type="text" id="num3"/></td>
60         </tr>
61         <tr>
62             <td colspan="4">
63                 <input type="button" value="加" id="b1"/>
64                 <input type="button" value="减" id="b2"/>
65                 <input type="button" value="乘" id="b3"/>
66                 <input type="button" value="除" id="b4"/>    
67             </td>
68         </tr>
69     </table>
70 </form>
71 <center>
72 </body>
73 </html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>九九乘法表</title>        <style type="text/css">table{background-color:pink;color:red;}</style>
</head>
<body><h1>计算器</h1><table border="1" align="center">    <tr><td>数值1:<input type="text" name="num1" id="num1"/></td></tr><tr><td>数值2:<input type="text" name="num2" id="num2"/></td></tr><tr><td>结&nbsp;&nbsp;果:<input type="text" name="num3" id="num3"/></td></tr><tr><td colspan="4"><input type="button" value="加法" style="color:blue;" οnclick="add()"/><input type="button" value="减法" style="color:blue;" οnclick="reduce()"/><input type="button" value="乘法" style="color:blue;" οnclick="multiplication()"/><input type="button" value="除法" style="color:blue;" οnclick="division()"/></td>    </tr></table><script language="javascript">function add(){var num1=document.getElementById("num1").value;var num2=document.getElementById("num2").value;if(parseInt(num1)==num1){var num1=parseInt(num1);}else{var num1=parseFloat(num1);num1=parseFloat(num1.toFixed(2));}if(parseInt(num2)==num2){var num2=parseInt(num2);}else{var num2=parseFloat(num2);num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/}document.getElementById("num3").value=num1+num2;}function reduce(){var num1=document.getElementById("num1").value;var num2=document.getElementById("num2").value;if(parseInt(num1)==num1){var num1=parseInt(num1);}else{var num1=parseFloat(num1);num1=parseFloat(num1.toFixed(2));}if(parseInt(num2)==num2){var num2=parseInt(num2);}else{var num2=parseFloat(num2);num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/}document.getElementById("num3").value=num1-num2;}function multiplication(){var num1=document.getElementById("num1").value;var num2=document.getElementById("num2").value;if(parseInt(num1)==num1){var num1=parseInt(num1);}else{var num1=parseFloat(num1);num1=parseFloat(num1.toFixed(2));}if(parseInt(num2)==num2){var num2=parseInt(num2);}else{var num2=parseFloat(num2);num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/}document.getElementById("num3").value=num1*num2;}function division(){var num1=document.getElementById("num1").value;var num2=document.getElementById("num2").value;if(parseInt(num1)==num1){var num1=parseInt(num1);}else{var num1=parseFloat(num1);num1=parseFloat(num1.toFixed(2));}if(parseInt(num2)==num2){var num2=parseInt(num2);}else{var num2=parseFloat(num2);num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/}document.getElementById("num3").value=num1/num2;
        }</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/283681.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AC日记——Paint Pearls hdu 5009

Paint Pearls 思路&#xff1a; 离散化dp剪枝&#xff1b; dp是个n方的做法&#xff1b; 重要就在剪枝&#xff1b; 如果一个长度为n的区间&#xff0c;有大于根号n种颜色&#xff0c;还不如一个一个涂&#xff1b; 来&#xff0c;上代码&#xff1a; #include <cstdio> …

CSS缩写总结

1、16进制的色彩值&#xff0c;如果每两位的值相同&#xff0c;可以缩写一半。如&#xff1a; color: #ffffff > color: #fffcolor: #aabbcc > color: #abc2、边框语法糖 边框&#xff1a; border: width style color; > border: (边宽) (样式) (颜色); 如&#xff1a…

雷军招人反被3句话问懵:当我在面试牛人的时候,牛人也在面试我

来 源&#xff5c;环球人力资源智库&#xff08;GHRlib&#xff09; 作 者&#xff5c;Black “你做过手机吗&#xff1f;” “没做过。” “你认识中移动老总王建宙吗&#xff1f;” “不认识。” “你认识富士康老板郭台铭吗&#xff1f;” “我认识他&#xff0c;他不认识我…

【jQuery系列之插件】jQuery插件---exselect实现联动

<!DOCTYPE HTML> <html> <head><meta charset"utf-8"><title>cxSelect 联动下拉菜单 </title><style>body{background:#ddd;font:14px/1.7 tahoma,\5fae\8f6f\96c5\9ed1,sans-serif;}fieldset{margin:2em 0;}fieldset leg…

C# 11 中的 required members

C# 11 中的 required membersIntro在 C# 11 中引入了一个新的特性 —— Required Members&#xff0c;引入了一个新的 required 关键词&#xff0c;可以用来表示字段或者属性在类型初始化的时候必须要进行初始化&#xff0c;这一特性也进一步的改进了可空引用类型的用法。Sampl…

架构师速成4.6-软技能和硬技能

架构师速成4.6-软技能和硬技能 在投职和面试的过程中。雇主一般会查看求职者的两种技能&#xff1a;硬技能与软技能。 硬技能就是可以通过培训或可以easy量化的技能。硬技能包含以下这些&#xff1a; 熟练的外语能力文凭或证书打字速度计算机程序编写能力而软技能。则是较难量化…

Netty1:初识Netty

为什么使用Netty Netty是业界最流行的NIO框架之一&#xff0c;它的健壮性、功能、性能、可定制性、可扩展性在同类框架中都是首屈一指的&#xff0c;它已经得到了成百上千的商用项目的证明。对于为什么使用Netty这个话题&#xff0c;我们先看一下使用原生的NIO有什么缺点&#…

互联网大佬简史:马云/雷军/罗永浩/刘强东...

燃财经&#xff08;ID:rancaijing&#xff09;原创 作者 | 杜枫 编辑 | 魏佳中国互联网的发展&#xff0c;是一部由大佬撑起的奋斗史&#xff0c;也是一部由大佬主演的打脸史。和传统行业不同&#xff0c;互联网行业日新月异&#xff0c;从业者趋于年轻。马云唱起了摇滚&#x…

Windows 11 新版 22621.575 和 22622.575 推送:照片、URL、文件资源管理器

面向 Beta 频道的 Windows 预览体验成员&#xff0c;微软推送了 Windows 11 预览版 Build 22621.575 和 22622.575。 目前 Beta 频道 Windows 11 预览版分为两组进行测试&#xff0c;通过两组 Windows 预览体验成员的使用数据和反馈&#xff0c;以更好的测试新功能的可靠性。Wi…

linux mysql5.6 安装

2019独角兽企业重金招聘Python工程师标准>>> 1、gcc yum install gcc gcc-c ncurses-devel perl 2、cmake安装 wget http://www.cmake.org/files/v2.8/cmake-2.8.10.2.tar.gz tar -xzvf cmake-2.8.10.2.tar.gz cd cmake-2.8.10.2 ./bootstrap ; make ; make insta…

学习进度条第十周

第十周 所花时间 15小时 代码量 500行左右 博客量 1 了解到的知识点 学习安卓开发的环境配置&#xff0c;进行简单的开发。重行复习了数据结构的部分算法转载于:https://www.cnblogs.com/liulitianxia/p/6822919.html

基于DeepConvLSTM的传感器信号分类

随机智能手机的普及&#xff0c;在日常生活中&#xff0c;大多数人在做任何事情的时候&#xff0c;都会随身携带手机。如果开启手机中的传感器&#xff0c;当用户运动时&#xff0c;就可以采集大量的用户信息&#xff0c;根据这些信息&#xff0c;就可以判断当前用户的运动模式…

Python常用的12个GUI框架

Graphical User Interface&#xff0c;简称 GUI&#xff0c;又称图形化用户接口&#xff0c;所谓的GUI编程&#xff0c;指的是用户不需要输入代码指令&#xff0c;只通过图形界面的交互就可以操作软件功能。 1.Tkinter 一个轻量级的跨平台图形用户界面&#xff08;GUI&#xff…

PHP下操作Linux消息队列完成进程间通信的方法

2019独角兽企业重金招聘Python工程师标准>>> 来源:http://www.jb51.net/article/24353.htm 关于Linux系统进程通信的概念及实现可查看&#xff1a;http://www.ibm.com/developerworks/cn/linux/l-ipc/   关于Linux系统消息队列的概念及实现可查看&#xff1a;htt…

.NET 7 发布的最后一个预览版Preview 7, 下个月发布RC

微软在2022年8月9日 发布了.NET 7 Preview 7[1]&#xff0c;这是它在11月10日 RTM 之前进入发布候选阶段之前的最后预览版。预览版 7 已在 Visual Studio 17.4 预览版 1 中进行了测试&#xff0c;该预览版也于也与 VS 2022 v17.3 版本一起发布。对于预览版7&#xff0c;开发团队…

2022年全球职业教育行业发展报告

职业教育丨研究报告 核心摘要&#xff1a; 职业教育是职业学校教育与职业培训组成的有机整体&#xff0c;行业参与者除教育培训机构与受训学生外&#xff0c;还涉及企业雇主、行业协会、政府等多方&#xff0c;各群体共同构成密不可分的产业生态。 宏观而言&#xff0c;职业…

C++中STL的一些用法的补充

1 清空vector中的所有元素并释放内存&#xff1a; 1 vector<int*> xx; 2 for(int it0;it!xx.size();it) 3 { 4 delete xx[it]; 5 } 6 xx.clear(); 转载于:https://www.cnblogs.com/jinzhipeng/p/6825585.html

实战Cacti网络监控(1)——基础安装配置

实验环境&#xff1a; 物理主机 redhat7.0 内核版本 3.10.0-123.el7.x86_64 虚拟机 redhat6.5 内核版本 2.6.32-431.el6.x86_64 server10.example.com 172.25.254.10 所需软件包&#xff1a; cacti-0.8.8h.tar.g…

HTTP 3.0为什么彻底放弃TCP

从HTTP/1.0开始&#xff0c;一直到HTTP/2&#xff0c;不管应用层协议如何改进&#xff0c;TCP一直以来都是HTTP协议的基础&#xff0c;主要是因为他能提供可靠连接。 但是&#xff0c;从HTTP 3.0开始&#xff0c;这个情况就有所变化了。 因为&#xff0c;在最新推出的HTTP 3.0中…

《ASP.NET Core 6框架揭秘》实例演示[13]:日志的基本编程模式

《ASP.NET Core 6框架揭秘实例演示[11]&#xff1a;诊断跟踪的几种基本编程方式》介绍了四种常用的诊断日志框架。其实除了微软提供的这些日志框架&#xff0c;还有很多第三方日志框架可供我们选择&#xff0c;比如Log4Net、NLog和Serilog 等。虽然这些框架大都采用类似的设计&…