信管117225魏宝民实训第一天

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>点击某个元素,更改该元素的样式</title>
    <style type="text/css">
        h1 {
            color:rgb(27, 12, 240);
        }
        h2 {
            color:rgb(247, 210, 2);
        }
        h3 {
            color:rgb(0, 252, 252)
        }
    </style>
</head>
<body>
    <div>
    <h1 id="id1" onclick="myFunction1()">这是h1标题!</h1>
    <h2 id="id2" onclick="myFunction2()">这是h2标题!</h2>
    <h3 id="id3" onclick="myFunction3()">这是h3标题!</h3>
    </div>
    <script>
        function myFunction1() {
            document.getElementById('id1').style.color='red';
        }
        function myFunction2() {
            document.getElementById('id2').style.color='black';
        }
        function myFunction3() {
            document.getElementById('id3').style.color='pink';
        }        
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js获取输入框中的vlaue值</title>
    <style type="text/css">
        .div1 {
            position:absolute;  
            margin:100px 400px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <h3>js获取输入框中的vlaue值</h3>
        <form>
            <label>
                输入信息:
                <input id="study" value="" type="text" />
            </label>
            <input type="button" id="btn" value="获取" onclick="myFunction()" />    
        </form>
    </div>
    <script>
        function myFunction() {
            var v=document.getElementById("study").value;
            alert("获取的对象value:"+v);
        }        
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>九九乘法表</title>
    <style>
        table {
            border-collapse:collapse;
        }
    </style>
</head>
<body>
    <script>
        document.write('<table class="table" border="1"/>');
        for(var x=1;x<=9;x++){
            document.write('<tr>');
            for(var y=1;y<=x;y++){
                document.write('<td>'+x+'x'+y+'='+(x*y)+'</td>');
            }
            document.write('</tr>');
        }
        document.write('</table>');
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/Klay_Thompson/article/details/92730380