开源达人复习js写的一些案例demo,熟能生巧!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="nr1">一个段落1。</p>
    <p id="nr2">一个段落2。</p>
    <button type="button" onclick="myfun()">anniu</button>

    <script>
        function myfun() {
            //这是注释 单行注释
            document.getElementById('nr1').innerHTML = '改变1';
            document.getElementById('nr2').innerHTML = '改变2';
            /*
             *这是多行注释
             */
        }
    </script>


</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="nr1">一个段落1。</p>
    <p id="nr2">一个段落2。</p>
    <button type="button" onclick="myfun()">anniu</button>

    <script>
        function myfun() {
            //这是注释 单行注释 防止执行代码。
            //document.getElementById('nr1').innerHTML = '改变1';
            document.getElementById('nr2').innerHTML = '改变2';
            /*
             *这是多行注释
             */
        }
    </script>


</body>

</html>
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h1 id="myH1"></h1>
<p id="myP"></p>
<script>
/*
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
*/
</script>
<p><strong>注意:</strong>注释块不会被执行。</p>

</body>
</html>
    <script>
        var a;
        a = 111;
        document.write(a);
        a = 222;
        document.write(a);
    </script>
    <div id="nr">111111111</div>
    <script>
        var a;
        var time = new Date().getHours();
        if (time < 20) {
            a = '1111';
            alert(time);
        }
        document.getElementById('nr').innerHTML = '1111111';
    </script>
<body>

    <div id="nr">11111</div>
    <script>
        var a = Math.random(); //返回一个浮点数
        var b = document.getElementById('nr');

        if (a > 0.5) {
            b.innerHTML = "22222";
        } else {
            b.innerHTML = "33333";
        }
    </script>


</body>
<body>

    <script>
        var a;
        var b = new Date().getDay();

        switch (b) {
            case 1:
                a = "今天星期1";
                break;
            case 2:
                a = "今天星期2";
                break;
            case 3:
                a = "今天星期3";
                break;
        }

        document.write(a);
    </script>


</body>
JavaScript 消息框
<body>

    <button onclick="myf()">an</button>
    <script>
        function myf() {
            alert('1111');
        }
    </script>


</body>
换的提示框
<body>
    
    <button onclick="myf()">an</button>
    <script>
        function myf() {
            alert('11afdda \n sfadsf11');
        }
    </script>


</body>
确认框

<body>


    <button onclick="myf()">an</button>
    <div id="nr">1111</div>
    <script>
        function myf() {
            var a;
            var b = confirm('确定');
            if (b == true) {
                document.getElementById('nr').innerHTML = "确定";
            } else {
                document.getElementById('nr').innerHTML = "取消";
            }
        }
    </script>


</body>

发表评论