校内实训第一天

最新推荐文章于 2019-06-23 23:10:02 发布

EMP颠覆者

最新推荐文章于 2019-06-23 23:10:02 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/rumple49/article/details/92608396

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-collapse: collapse;
        }

        table td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div>
    <h2>1、通过js获取输入框中的vlaue值</h2>
    <input type="text" id="theText"/>
    <p id="textOut"></p>
    <h2>2、点击某个元素，更改该元素的样式</h2>
    <p id="changeP">点击变色</p>
    <h2>3、互换变量值</h2>
    <div id="dv">

    </div>
    <h2>4、乘法口诀</h2>
    <table id="theTable"></table>
</div>
<script>
    //1 通过js获取输入框中的vlaue值
    var textObj = document.getElementById("theText");
    var textOutObj = document.getElementById("textOut");
    textObj.onkeyup = function () {
        textOutObj.innerText = textObj.value;
    };
    //2 点击某个元素，更改该元素的样式
    var changePObj = document.getElementById("changeP");
    changePObj.onclick = function () {
        this.style.backgroundColor = "yellow";
    };
    //3 互换变量值
    var a = 1;
    var b = 2;
    var dvObj = document.getElementById("dv");
    var oldDataObj = document.createElement("p");
    oldDataObj.innerText = "原来的值：a-" + a + " b-" + b;
    a = a + b;
    b = a - b;
    a = a - b;
    var newDataObj = document.createElement("p");
    newDataObj.innerText = "变换后的值：a-" + a + " b-" + b;
    dvObj.appendChild(oldDataObj);
    dvObj.appendChild(newDataObj);
    //4 乘法口诀
    var theTableObj = document.getElementById("theTable");
    for (var i = 1; i <= 9; i++) {
        var trObj = document.createElement("tr");
        for (var j = 1; j <= i; j++) {
            var tdObj = document.createElement("td");
            tdObj.innerText = i + "*" + j + "=" + (i * j);
            trObj.appendChild(tdObj);
        }
        theTableObj.appendChild(trObj);
    }
</script>
</body>
</html>

EMP颠覆者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
校内实训第一天

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table { border-collapse: collapse...
复制链接

扫一扫