JS计算器

最新推荐文章于 2023-09-18 09:54:05 发布
最新推荐文章于 2023-09-18 09:54:05 发布
阅读量447 收藏
点赞数
分类专栏： 课堂笔记 文章标签： button input function server table class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tlljhj/article/details/7322441
版权
 <style type="text/css">
        .style1 {
            width: 23%;
            height: 296px;
            background-color:Black;
        }
        #txt_Result
        {
            height: 26px;
            width: 191px;
            text-align:right;
            font-size:large;
        }
        input
        {
            width:50px;
            height:25px;
            }
    </style>
    <script type="text/javascript">
        var n;   //保存点击运算符前输入框中数字
        var o;   //存储对应运算符

        function s(obj) { //数字键对应事件
            var txt = document.getElementById("txt_Result");
            
            if (txt.value.indexOf('.') > -1 && obj == '.') {
                return false;
            }
            txt.value += obj;
        }
        function c(op) {  //运算符（+，-，*，%）对应事件
            n = document.getElementById('txt_Result').value;
            document.getElementById('txt_Result').value = "";
            o = op.value;
        }
        function qc() {    //清除键对应事件
            document.getElementById('txt_Result').value = "";
            n = "";
            o = "";
        }
        function e() { //等号对应事件
            var s = document.getElementById('txt_Result');
            if (o == '+') {
                s.value =parseFloat(s.value) + parseFloat(n);
            }
            else if (o == '-') {
                s.value = parseFloat(n) - parseFloat(s.value);
            }
            else if (o == '*') {
                s.value = parseFloat(s.value) * parseFloat(n);
            }
            else {
                s.value = parseFloat(n) / parseFloat(s.value);
            }
            n = "";
            o = "";
        }
        function b() { //退格键对应事件
            var s = document.getElementById('txt_Result');
            s.value = s.value.substring(0, s.value.length - 1);
        }
        function ds() {    //求倒数键对应事件
            var s = document.getElementById('txt_Result');
            s.value = 1 / parseFloat(s.value);
        }
        function square() {   //平方键对应事件
            var s = document.getElementById('txt_Result');
            s.value = parseFloat(s.value) * parseFloat(s.value);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
    
        <table class="style1">
            <tr>
                <td colspan="4">
                    <input id="txt_Result" type="text" /></td>
            </tr>
            <tr>
                <td>
                    <input id="Button1" type="button" value="7" οnclick="s('7')"/></td>
                <td>
                    <input id="Button2" type="button" value="8" οnclick="s('8')"/></td>
                <td>
                    <input id="Button3" type="button" value="9" οnclick="s('9')"/></td>
                <td>
                    <input id="Button4" type="button" value="←" οnclick="b()"/></td>
            </tr>
            <tr>
                <td>
                    <input id="Button8" type="button" value="4" οnclick="s('4')"/></td>
                <td>
                    <input id="Button7" type="button" value="5" οnclick="s('5')"/></td>
                <td>
                    <input id="Button6" type="button" value="6" οnclick="s('6')"/></td>
                <td>
                    <input id="Button5" type="button" value="+" οnclick="c(this)"/></td>
            </tr>
            <tr>
                <td>
                    <input id="Button9" type="button" value="1" οnclick="s('1')"/></td>
                <td>
                    <input id="Button10" type="button" value="2" οnclick="s('2')"/></td>
                <td>
                    <input id="Button11" type="button" value="3" οnclick="s('3')"/></td>
                <td>
                    <input id="Button12" type="button" value="-" οnclick="c(this)"/></td>
            </tr>
            <tr>
                <td>
                    <input id="Button16" type="button" value="0" οnclick="s('0')"/></td>
                <td>
                    <input id="Button15" type="button" value="." οnclick="s('.')"/></td>
                <td>
                    <input id="Button14" type="button" value="=" οnclick="e()"/></td>
                <td>
                    <input id="Button13" type="button" value="*" οnclick="c(this)"/></td>
            </tr>
            <tr>
                <td>
                    <input id="Button17" type="button" value="1/x" οnclick="ds()"/></td>
                <td>
                    <input id="Button18" type="button" value="x2" οnclick="square()"/></td>
                <td>
                    <input id="Button19" type="button" value="Clear" οnclick="qc()"/></td>
                <td>
                    <input id="Button20" type="button" value="%" οnclick="c(this)"/></td>
            </tr>
        </table>
tlljhj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 计算器
allway2的博客
06-02 7246
在本教程中，我们将创建一个简单的JavaScript 计算器。该计算器能够对 2 个或 2 个以上的数字进行加减乘除。计算器可以成为日常生活中非常有用的应用程序。您可以使用计算器来计算您的购物账单、计算您的贷款、执行简单的数学计算等。一般来说，我们有两种类型的计算器，一种是科学计算器，另一种是简单计算器。科学计算器用于执行复杂的数学计算，如平方根、平方、立方、对数、三角函数等。而简单的计算器用于执行简单的数学计算，如加法、减法、乘法和除法。我们将在本文中使用 HTML、CSS 和 JavaScript 逐步
javascript计算器
王者生辉的博客
08-10 466
代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var strs = ""; function OnClick(obj) { var str = obj.innerText; var numInput = docume
javascript简易计算器
最新发布
a17783481239的博客
09-18 2333
查看历史记录
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
JavaScript实现计算器
wangshiyi13的博客
07-18 5374
使用JavaScript编写了一个简易的计算器，基本与手机计算器一致。
js计算器
weixin_58456310的博客
11-28 417
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> </head> <style type="text/css"> .alldiv{ border: solid 1px #0000FF; width: 300px; ...
JS实现计算器
qq_45921597的博客
09-25 2253
【代码】JS实现计算器。
javascript实现计算器
anan的博客
01-05 9337
       首先说明一下为什么发这篇文章，因为今天早晨看到一篇类似的文章，我看了他的源码，发现实在太啰嗦了，于是便准备把这篇文章发出来！        其实使用javascript的函数来实现计算器可以说是练习javascript的一个好方法，虽然我的代码可...
js计算器_js计算器_
10-02
JavaScript计算器是一种常见的网页交互元素，它使用JavaScript编程语言来实现基本的算术运算。这个项目包含HTML、CSS和JS三个主要部分，分别负责计算器的结构、样式和功能逻辑。 首先，我们从HTML文件开始。HTML...
JavaScript计算器
12-06
在JavaScript计算器项目中，CSS可以用来设置计算器的外观，包括按钮的大小、颜色、边框、间距，以及显示屏的样式等。通过选择器（如ID选择器、类选择器）和盒模型属性（如margin、padding、border），可以精确地调整...
HTML+JAVAScript计算器
12-01
HTML+JavaScript计算器是一种基于网页的计算工具，利用HTML（超文本标记语言）构建用户界面，JavaScript处理用户交互和计算逻辑。在这个项目中，HTML用于创建计算器的布局和按钮，而JavaScript则赋予这些按钮功能，...
js计算器插件
06-01
【标题】"js计算器插件"所指的是一款基于JavaScript编程语言开发的计算器应用程序，它通常被设计为网页上的一个交互式组件，用于执行基本的数学运算。这种计算器插件可以使网页更加动态和用户友好，尤其适用于教育、...
JS弹出窗口全屏
tlljhj的专栏
03-07 7352
〈script language="javascript"〉 　　function winopen(targeturl){ 　　newwin=window.open("","","scrollbars") 　　if (document.all){ 　　     newwin.moveTo(0,0) 　　     newwin.resizeTo(screen.availWidth
datagrideview下拉列表显示数据
tlljhj的专栏
02-28 2372
1.在DataGridView中添加一个隐藏列，用来与数据源字段绑定：隐藏列.DataPropertyName = 数据源.列名;      2. 用一个DataTable建立实际值和显示值的映射：      DataTable dtRelation = new DataTable();     dtRelation.Columns.Add("Code",typeof(byte));
仿京东网导航列表
tlljhj的专栏
10-25 1699
导航列表： .my_left_category{ width:210px; font-size:12px; font-family:arial,sans-serif; letter-spacing:2px; } .my_left_category h1{ background-image:url(http://www.webjx.com/files/100709/1_185326.
ASP.NET webservice，查询天气预报，手机号码等
tlljhj的专栏
12-21 1332
web服务： 添加方法： [WebMethod]//必须有 public int Add(int a,int b) {     returna+b; } public Data GetStudent() {    string str=System.ConigurationManager.    using(SqlConnection cnn=new SqlConnection
gridview控件使用代码绑定数据
tlljhj的专栏
11-24 1152
string str = System.Configuration.ConfigurationManager.ConnectionStrings["studentConnectionString"].ConnectionString;         using (SqlConnection sqlcnn = new SqlConnection(str))         {
ASP.NET主题和皮肤
tlljhj的专栏
11-05 1041
asp.net的服务器端控件提供了多种样式的设计，如果对每个控件都单独设置，是比较繁琐的事情，所以微软也提供了针对这些服务器端控件的样式管理，其实也可以通过css来控制部分服务器端控件的样式，比如textbox，如果用普css就是对input进行样式控制，但对于gridview或者日历控件等，css文件无法灵活的控制，这就需要微软专门为服务器端控件提供的主题和皮肤。  主题和皮肤的使用方法：
站点导航
tlljhj的专栏
11-29 907
treeview站点导航： 网站导航的种类：常用属性和方法： enableclientscript：节点的展开与合并？（true） expandepth：数据绑定时默认时展开的多少节点 showcheckboxes：是否显示复选框 collapseimageurl： showlines：是否显示节点线 lineimagesfolder： selectednodechanged：选中

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值