zoukankan      html  css  js  c++  java
  • 第六次学习

    1.学习前端的第十二天

    用时:一天
    学习内容:js的基本语法
    学习目标:基本完成
    

    点对应加减乘除按钮的时候,将两个输入框中的数字做对应的算术,并将结果显示在id为result的p标签内。

    <html>
    <head>
        <meta charset="UTF-8">    
        <title>IFE ECMAScript</title>
    </head>
    <body>        
        <input id="first-number" type="number" value="0" placeholder="第一个数字">
        <input id="second-number" type="number" value="0" placeholder="第二个数字">
        <button id="add-btn">加</button>
        <button id="minus-btn">减</button>
        <button id="times-btn">乘</button>
        <button id="divide-btn">除</button>
        <p id="result">运算结果</p>
        <script>
        document.getElementById("add-btn").onclick = function(){
        	var result = parseFloat(document.getElementById("first-number").value) + parseFloat(document.getElementById("second-number").value);
        	document.getElementById("result").innerHTML = result;
        }
        document.getElementById("minus-btn").onclick = function()
        {
        	var result = document.getElementById("first-number").value - document.getElementById("second-number").value;
        	document.getElementById("result").innerHTML = result;
        }
        document.getElementById("times-btn").onclick = function(){
        	var result = document.getElementById("first-number").value * document.getElementById("second-number").value;
        	document.getElementById("result").innerHTML = result;
        }
        document.getElementById("divide-btn").onclick = function()
        {
        	var result = document.getElementById("first-number").value / document.getElementById("second-number").value;
        	document.getElementById("result").innerHTML = result;
        }
        </script>
    </body>
    </html>```
  • 相关阅读:
    使用MacPorts配置PHP开发环境(PHP54+PHP FPM+NGINX+MYSQL55)
    freebsd make 常用命令(非原创)
    可以通过以下步骤生成一个简单的证书:
    Javascript相关的一些碎裂的记忆
    中兴EBG2100路由器固件
    一些javascript内容
    freebsd 记事之PHP环境搭建
    vue3 中使用 vite 时的报错
    Vite2.0 按需引入Element Plus
    移动端横屏
  • 原文地址:https://www.cnblogs.com/xing--/p/12739240.html
Copyright © 2011-2022 走看看