HTML表单和CSS属性以及DOM实现网页版计算器

简介: 本文讲解:HTML表单和CSS属性以及DOM实现网页版计算器

 image.gif编辑

 

目录

1、效果展示

2、源码

2.1HTML+CSS源码

2.2JS源码

3、CSS属性

3.1width、height属性

3.2font-size属性

3.3margin属性

3.4padding属性

3.5background-color属性

3.6border属性

3.7border-radius属性

3.8text-align属性

4、DOM

4.1根据id获取元素

4.2根据name获取元素

4.3根据类名获取元素

4.4根据css选择器获取元素

image.gif编辑

1、效果展示

加法:image.gif编辑

减法:image.gif编辑

乘法:image.gif编辑

除法:

image.gif编辑 除数为0:

image.gif编辑


2、源码

2.1HTML+CSS源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="cal.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .cal {
        width: 400px;
        background-color: skyblue;
        margin: 50px auto;
        border-radius: 10px;
      }
      .cal h1 {
        background-color: rebeccapurple;
        height: 60px;
        line-height: 60px;
        border-radius: 10px 10px 0  0;
        text-align: center;
        color: azure;
      }
      .from-control {
        padding: 25px 50px;
      }
      .form-control label {
        text-align: right;
      }
      .form-control,input {
        padding: 5px 10px;
        height: 20px;
        border: 1px black;
        border-radius: 5px;
      }
      .form-control,button{
        width: 67px;
        height: 32px;
        font-size: 25px;
        border-radius: 5px;
        border: none;
        background-color: forestgreen;
      }
      .result {
        height: 25px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="cal">
      <h1>COUNTER</h1>
      <div class="from-control">
        <label>NumberOne</label>
        <input type="text" id="num1"/>
      </div>
      <div class="from-control">
        <label>NumberTwo</label>
        <input type="text" id="num2"/>
      </div>
      <div class="from-control">
        <button id="plus">+</button>
        <button id="reduce">-</button>
        <button id="mul">*</button>
        <button id="dev">/</button>
      </div>
      <div class="from-control">
        <label >RESULT</label>
        <input type="text" class="result"/>
      </div>
    </div>
  </body>
</html>

image.gif


2.2JS源码

window.addEventListener('load',function(){
  document.querySelector('#plus').onclick = function() {
    cal('+');
  }
  document.querySelector('#reduce').onclick = function() {
    cal('-');
  }
  document.querySelector('#mul').onclick = function() {
    cal('*');
  }
  document.querySelector('#dev').onclick = function() {
    cal('/');
  }
  function cal(symbom) {
    let num1 = document.getElementById('num1').value;
    let num2 = document.getElementById('num2').value;
    let result = document.querySelector('.result');
    if(symbom == '/') {
      if(num2 == 0) {
        result.value = "除数不能为零";
      }else {
        result.value = num1 / num2;
      }
    }else {
      result.value = eval(num1 + symbom + num2);
    }
  }
})

image.gif


3、CSS属性

3.1width、height属性

width设置宽度,height设置高度。

<body>
    <input type="button" value="按钮"/>
  </body>

image.gif

原始的按钮大小:

image.gif编辑 经过width、height修饰后:

<style>
    #but{
      height: 60px;
      width: 100px;
    }
  </style>
  <body>
    <input type="button" value="按钮" id="but"/>
  </body>

image.gif

image.gif编辑


3.2font-size属性

font-size是设置字体大小大小的属性,它的常见单位为px。如,将一段话的字体设置为30px:

<style>
    .title {
      font-size: 30px;
    }
  </style>
  <body>
    <a class="title">这是一段话</a>
  </body>

image.gif

经过font-size修饰后:

image.gif编辑


3.3margin属性

margin属性是修饰边距的一个属性,margin拥有四个参数值。因此,有四种边距情况。

情况1

margin:10px,15px,20px,30px;

image.gif

    • 上外边距是 10px
    • 右外边距是 15px
    • 下外边距是 20px
    • 左外边距是 30px

    情况2

    margin:20px,30px,15px

    image.gif

      • 上外边距是 20px
      • 右外边距是 30px
      • 下外边距是 15px

      情况3

      margin:10px,20px

      image.gif

        • 上外边距是 10px
        • 右外边距是 20px

        情况4

        margin:50px

        image.gif

          • 四个边距都是 50px

          我们拿四个边距的情况来展示效果:

          <style>
              .ty {
                margin:50px ;
              }
            </style>
            <body>
              <div class="ty">
                <label>这是一个label:</label>
                <input type="text" />
              </div>
            </body>

          image.gif

          image.gif编辑


          3.4padding属性

          上面我们知道了margin是设置外边距的,那么内边距是由padding来修饰的,也是有四种情况:

          情况1

          padding:10px,5px,15px,20px;

          image.gif

            • 上内边距是 10px
            • 右内边距是 5px
            • 下内边距是 15px
            • 左内边距是 20px

            情况2

            padding:10px,5px,15px;

            image.gif

              • 上内边距是 10px
              • 右内边距和左内边距是 5px
              • 下内边距是 15px

              情况3

              padding:10px,5px;

              image.gif

                • 上内边距和下内边距是 10px
                • 右内边距和左内边距是 5px

                情况4

                padding:100px;

                image.gif

                  • 上、下、左、右内边距是 100px

                  我们情况4来举例:

                  <style>
                      .test {
                        padding: 50px;
                      }
                    </style>
                    <body>
                      <table border="1">
                        <tr><td class="test"></td></tr>
                      </table>
                    </body>

                  image.gif

                  效果显示:

                  image.gif编辑


                  3.5background-color属性

                  background-color属性实现的效果就是背景颜色,如将一段文本的背景颜色设置为天蓝色:

                  <style>
                      .title {
                        background-color: skyblue;
                      }
                    </style>
                    <body>
                      <a class="title">这是一段话</a>
                    </body>

                  image.gif

                  显示效果:

                  image.gif编辑


                  3.6border属性

                  border属性是修饰边框的一个属性,我们可以设置边框的大小以及边框的颜色。语法为:border: 大小 solid 颜色;如果我们只有大小没有solid值的话,默认颜色为黑色。

                  <style>
                      .ty {
                        border: 2px solid red;
                      }
                    </style>
                    <body>
                      <label>这是一个label:</label>
                      <input type="text" class="ty"/>
                    </body>

                  image.gif

                  image.gif编辑


                  3.7border-radius属性

                  border-radius属性是修饰边框的“圆润程度”也就是为元素添加圆角边框,语法为:border-radius: 大小;如将一个边框设置圆角边框为10px程度。

                  <style>
                      .ty {
                        border-radius: 10px;
                      }
                    </style>
                    <body>
                      <label>这是一个label:</label>
                      <input type="text" class="ty"/>
                    </body>

                  image.gif

                  效果显示:image.gif编辑


                  3.8text-align属性

                  text-align属性是用来规定文本对齐方式的,对齐方式有left左对齐、center居中对齐、right右对齐。其中left左对齐是默认的对齐方式。

                  居中对齐

                  <style>
                      .test {
                        text-align: center;
                      }
                    </style>
                    <body>
                      <h1 class="test">这是一个标题</h1>
                    </body>

                  image.gif

                  效果显示:

                  image.gif编辑

                  右对齐

                  <style>
                      .test {
                        text-align: right;
                      }
                    </style>
                    <body>
                      <h1 class="test">这是一个标题</h1>
                    </body>

                  image.gif

                  效果展示:image.gif编辑


                  4、DOM

                  4.1根据id获取元素

                  document.getElementById是根据id来获取元素的,如下代码展示:

                  <body>
                      <div>
                        <label>Number:</label>
                        <input type="text" id="num1"/>
                      </div>
                      <div>
                        <button id="but">按钮</button>
                      </div>
                      <script>
                        document.getElementById('but').onclick = function() {
                          let num = document.getElementById('num1').value;
                          console.log(num);
                        } 
                      </script>
                    </body>

                  image.gif

                  当我输入55后,再点击按钮控制台就输出了55:

                  image.gif编辑

                  因此,在上述代码中document.getElementById后面加上.onclick代表着点击这个按钮就做出相应的操作,加上.value代表着获取这个id所对应的值。


                  4.2根据name获取元素

                  document.getElementByName是根据name来获取元素

                  <body>
                      <p>请选择你的兴趣爱好(多选):</p>
                      <input type="checkbox" name="sports" value="拳击"/>拳击
                      <input type="checkbox" name="sports" value="柔术"/>柔术
                      <input type="checkbox" name="sports" value="摔跤"/>摔跤
                      <input type="checkbox" name="sports" value="散打"/>散打
                      <script>
                        var sports = document.getElementsByName('sports');
                        console.log(sports[0]);
                        console.log(sports[1]);
                      </script>
                    </body>

                  image.gif

                  上述代码中,我们通过document.getElementsByName('sports')获取到了拳击和柔术这两个表单元素:

                  image.gif编辑


                  4.3根据类名获取元素

                  document.getElementByClassName是根据class来获取元素

                  <body>
                      <div>
                        <p class="person1">阿珍</p>
                        <p class="person2">阿强</p>
                      </div>
                      <script>
                        let person1 = document.getElementsByClassName('person1');
                        console.log(person1[0]);
                      </script>
                    </body>

                  image.gif

                  image.gif编辑


                  4.4根据css选择器获取元素

                  document.querySelector是根据css选择器来获取元素的,如下方代码:

                  <body>
                      <div class="mma">拳击</div>
                      <div class="mma">柔术</div>
                      <div class="mma">摔跤</div>
                      <script>
                        //第一个div
                        let firstdiv = document.querySelector('.mma');
                        console.log(firstdiv);
                        //所有的div
                        let alldiv = document.querySelectorAll('.mma');
                        console.log(alldiv);
                      </script>
                    </body>

                  image.gif

                  image.gif编辑


                  本编博文主要是对HTML中表单以及CSS属性加上JS中的DOM的一些讲解,文章中详细讲解了各个知识点的实现效果及用法。大家下来了一定要自己尝试去敲代码,只有我们实现了一些页面才能很好的理解这个知识点以及怎样实现某个效果。文章有也多处知识点未实现页面效果大家也可以自行测试一番,感受一下这些知识点的实现效果,加油!

                  image.gif编辑

                  本期博客到这里就结束啦,感谢您的阅读。如有收获还请给博主点个小小的关注,咱们下期再见。

                  相关文章
                  |
                  4天前
                  |
                  XML JavaScript 前端开发
                  DOM 属性列表(命名节点图 Named Node Map)
                  这段内容介绍了如何使用JavaScript操作XML文档中的DOM属性。通过`getElementsByTagName`获取元素后,`attributes`属性返回一个命名节点图(Named Node Map),表示元素的属性列表,该列表会自动更新。示例代码展示了加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,然后利用`getNamedItem()`方法获取&quot;category&quot;属性的值并输出,同时显示属性数量。
                  |
                  4天前
                  |
                  XML JavaScript 前端开发
                  XML DOM - 属性和方法
                  XML DOM通过属性(如nodeName、nodeValue、parentNode、childNodes和attributes)和方法提供编程接口,让开发者用JavaScript等语言以节点方式交互XML。属性描述节点信息,方法执行操作,如删除节点。
                  |
                  4天前
                  |
                  移动开发 HTML5
                  HTML5/CSS3粒子效果进度条代码
                  HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
                  19 0
                  HTML5/CSS3粒子效果进度条代码
                  |
                  4天前
                  |
                  JavaScript
                  DOM 属性列表(命名节点图 Named Node Map)
                  这段内容介绍了DOM中的`attributes`属性,它返回元素节点的属性节点列表,形成一个命名节点图。这个列表自动更新,当属性增删时反映变化。示例代码展示了如何加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,然后使用`getNamedItem()`方法获取&quot;category&quot;属性的值并显示属性数量。输出为&quot;cooking&quot;和&quot;1&quot;。
                  |
                  4天前
                  |
                  移动开发 前端开发 JavaScript
                  :掌握移动端开发:HTML5 与 CSS3 的高效实践
                  :掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
                  27 1
                  |
                  4天前
                  |
                  XML JavaScript 前端开发
                  XML DOM - 属性和方法
                  XML DOM 提供编程接口,让开发者用JavaScript等语言操作XML文档。接口包含属性和方法,属性如nodeName、nodeValue、parentNode和childNodes,用于查询节点信息;方法如getElementsByTagName、appendChild和removeChild,执行增删操作。示例中,JavaScript代码`txt=xmlDoc.getElementsByTagName(&quot;title&quot;)[0].childNodes[0].nodeValue`从books.xml获取第一个&lt;title&gt;元素的文本内容,赋值给变量txt。
                  |
                  4天前
                  |
                  缓存 移动开发 前端开发
                  【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
                  【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
                  |
                  4天前
                  |
                  前端开发 JavaScript 开发者
                  【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
                  【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。