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>```
  • 相关阅读:
    CSS:关于CSS Hack
    JS数据交互:动态从数据库中获取数据填充Select
    Oracle数据库—— 事务处理与并发控制
    Java 实现任意N阶幻方的构造
    Java 实现奇数阶幻方的构造
    Web前端开发笔试&面试_03
    任意多边形的几何变换
    关于网站劫持
    mysql 出现Host 'localhost' is not allowed to connect to this MySQL server 错误
    mysql 导入表数据中文乱码
  • 原文地址:https://www.cnblogs.com/xing--/p/12739240.html
Copyright © 2011-2022 走看看