网页制作加法运算

最新推荐文章于 2024-03-08 15:15:01 发布

明外

最新推荐文章于 2024-03-08 15:15:01 发布

阅读量1.8k

点赞数 2

文章标签：网页制作加法

本文链接：https://blog.csdn.net/xmroom/article/details/90678181

版权

###加法运算

这是我写的一个简单的加法运算法则，可以根据这个加法变换出多种，比如加减乘除都能去实现，可以说非常实用。如果有更好的办法或者有什么不懂的问题都可以多多和我交流哟。

##这是设计出来的整体样式预览。

1、首先第一步我们先构思一个想法，这里我用到了百度脑图，把大致的想法归纳一遍，然后去逐步实现。

2、按照上面所说，先创建三个文本框，和两个按钮并给文本框赋值为id、给按钮赋值为onclick。
#####代码如下：

        <input type="text" id="text1"></input>
        <button type="button" onclick="mybutton()">+</button>
        <input type="text" id="text2"></input>
        <button type="button" onclick="mybutton2()">=</button>
        <input type="text" id="text3"></input>

3、然后由于样式问题，需要对文本框以及具体位置做一个定位，和样式的美化说以此时我们应当新建一个div，并给他赋上一个id。
#####代码如下：

    <div id="center">
        <input type="text" id="text1"></input>
        <button type="button" onclick="mybutton()">+</button>
        <input type="text" id="text2"></input>
        <button type="button" onclick="mybutton2()">=</button>
        <input type="text" id="text3"></input>
    </div>

4、给div赋上id之后，此时我们新建一个文件夹，给文本添加样式，注意两个文件夹要用链接样式链接。
#####代码如下：

 <link href="css/style.css" rel="stylesheet">

#text1{
    width: 70px;
    height: 20px;
}
#center{
    text-align: center;
    padding: 100px;
}
#text2{
    width: 70px;
    height: 20px;
}
#text3{
    width: 70px;
    height: 20px;
}

5、具体框架搭好之后，我们开始给三个文本框赋值变量 x，y，z。记住给文本框赋值是要用value哦。
#####代码如下：

            var x = document.getElementById('text1').value;
            var y = document.getElementById('text2').value;
            var z = document.getElementById('text3').value;

6、之后我们就根据不同的需要提供不同的算法计算值。
#####代码如下：

           var z=Number(x)+Number(y);
            document.getElementById('text3').value=z;

7、最后我把所有的代码梳理一遍供大家参考使用，谢谢。
#####代码如下：

<!DOCTYPE HTML>
<HTML>

<head>
    <title></title>
    <link href="css/style.css" rel="stylesheet">
    <script>
        function mybutton2() {
            var x = document.getElementById('text1').value;
            var y = document.getElementById('text2').value;
            var z = document.getElementById('text3').value;
            var z=Number(x)+Number(y);
            document.getElementById('text3').value=z;
        }
    </script>

<body>
    <div id="center">
        <input type="text" id="text1"></input>
        <button type="button" onclick="mybutton()">+</button>
        <input type="text" id="text2"></input>
        <button type="button" onclick="mybutton2()">=</button>
        <input type="text" id="text3"></input>
    </div>
</body>
</head>
</HTML>

###END