JS教程（二）

最新推荐文章于 2024-07-26 21:32:33 发布
@Within
最新推荐文章于 2024-07-26 21:32:33 发布
阅读量473
点赞数
分类专栏：前端 # JS 文章标签：前端 JS
本文链接：https://blog.csdn.net/qq_41264674/article/details/82183073
版权
前端同时被 2 个专栏收录
9 篇文章 0 订阅
订阅专栏
5 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="demox">
    JavaScript 能够直接写入 HTML 输出流中：
</p>

<script>
    document.write("<h1>This is a heading</h1>");
    document.write("<p>This is a paragraph.</p>");
    function myFunction() {
        x = document.getElementById("demox");  // 找到元素
        x.innerHTML = "Hello JavaScript!"; // 改变内容
        x.style.color="#ff0000";          // 改变样式
    }
</script>

<p>
    您只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<button type="button" onclick="alert('Welcome!')">点击这里</button>
<button type="button" onclick="myFunction()">点击</button>
<p>请输入数字。如果输入值不全是数字或输入字符长度大于等于8，浏览器会弹出提示框。</p>

<input id="demo1" type="text">

<script>
    function myFunction1()
    {
        var x=document.getElementById("demo1").value;
        if(x==""||isNaN(x)||x.length>=8)
        {
            alert("不全是数字或输入字符长度大于等于8，在范围内请输入数字");
        }
        else{
            alert("success");
        }
    }
</script>

<button type="button" onclick="myFunction1()">点击这里</button>
<p></p>
<button onclick="myFunction2()">消失</button>

<script>
    function myFunction2()
    {
        document.write("糟糕！文档消失了。");
    }
</script>

<br/>
<script>
    var person={
        firstname : "Bill",
        lastname  : "Gates",
        id        :  5566
    };
    document.write(person.lastname + "<br />");
    document.write(person["id"] + "<br />");
</script>


<script>
    person=new Object();
    person.firstname="Bill";
    person.lastname="Gates";
    person.age=56;
    person.eyecolor="blue";
    document.write(person.firstname + " is " + person.age + " years old."+ "<br />");

    var message="Hello World!";
    var x=message.length;
    document.write(x+ "<br />");
    var x=message.toUpperCase();
    document.write(x+ "<br />");

    document.write(1+ "<br />");
</script>

<p>点击这个按钮，来调用带参数的函数。</p>

<button onclick="myFunction4('Bill Gates','CEO')">点击这里</button>
<button onclick="myFunction4('Bob','Builder')">点击这里</button>
<p></p>
<script>
    function myFunction4(name,job)
    {
        alert("Welcome " + name + ", the " + job);
    }
</script>
<p id="demo2"></p>
<script>
    function myFunction5()
    {
        var x=5;
        return x;
    }
    var a=myFunction5();
    document.write(a+ "<br />");
    document.getElementById("demo2").innerHTML=myFunction5();

</script>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>

<p id="demo3"></p>

<script>
    function myFunction10(a,b)
    {
        return a*b;
    }

    document.getElementById("demo3").innerHTML=myFunction10(4,3);
</script>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>

<p id="demo4"></p>

<script>
    function myFunction6(a,b)
    {if (a>b)
    {
        return;
    }
        return a*b;
    }

    document.getElementById("demo4").innerHTML=myFunction6(4,3);
</script>

<p>如果时间早于 12:00，会获得问候 "Good day"。</p>

<button onclick="myFunction7()">点击这里</button>

<p id="demo5"></p>

<script>
    function myFunction7()
    {
        var x="";
        var time=new Date().getHours();
        if (time<12)
        {
            x="Good day";
            alert('Welcome!');
        }
        else if(time<20){
            alert("hahahah，GoodEvening。");
        }else{
            alert("hahahah，请二十点之前再来");
        }
        document.getElementById("demo5").innerHTML=x;
    }
</script>
<p>点击下面的按钮来显示今天是周几：</p>

<button onclick="myFunction8()">星期按钮</button>

<p id="demo6"></p>

<script>
    function myFunction8()
    {
        var x;
        var d=new Date().getDay();
        switch (d)
        {
            case 0:
                x="Today it's Sunday";
                break;
            case 1:
                x="Today it's Monday";
                break;
            case 2:
                x="Today it's Tuesday";
                break;
            case 3:
                x="Today it's Wednesday";
                break;
            case 4:
                x="Today it's Thursday";
                break;
            case 5:
                x="Today it's Friday";
                break;
            case 6:
                x="Today it's Saturday";
                break;
        }
        document.getElementById("demo6").innerHTML=x;
        alert(x);
    }
</script>

<p>点击下面的按钮，会显示出基于今日日期的消息：</p>

<button onclick="myFunction9()">点击这里</button>

<p id="demo7"></p>

<script>
    function myFunction9()
    {
        var x;
        var d=new Date().getDay();
        switch (d)
        {
            case 6:
                x="Today it's Saturday";
                break;
            case 0:
                x="Today it's Sunday";
                break;
            default:
                x="Looking forward to the Weekend";
        }
        document.getElementById("demo7").innerHTML=x;
        alert(x)
    }
</script>

<script>
    cars=["BMW","Volvo","Saab","Ford"];
    for (var i=0;i<cars.length;i++)
    {
        document.write(cars[i] + "<br>");
    }
</script>

<p>点击下面的按钮，将代码块循环五次：</p>
<button onclick="myFunction11()">点击这里</button>
<p id="demo11"></p>

<script>
    function myFunction11()
    {
        var x="";
        for (var i=0;i<5;i++)
        {
            x=x + "The number is " + i + "<br>";
        }
        document.getElementById("demo11").innerHTML=x;
        alert(x);
    }
</script>

<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction12()">点击这里</button>
<p id="demo12"></p>

<script>
    function myFunction12()
    {
        var x;
        var txt="";
        var person={fname:"Bill",lname:"Gates",age:56};

        for (x in person)
        {
            txt=txt + person[x];
        }

        document.getElementById("demo12").innerHTML=txt;
        alert(txt);
    }
</script>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction13()">点击这里</button>
<p id="demo13"></p>

<script>
    function myFunction13()
    {
        var x="",i=0;
        while (i<5)
        {
            x=x + "The number is " + i + "<br>";
            i++;
        }
        document.getElementById("demo13").innerHTML=x;
    }
</script>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction15()">点击这里</button>
<p id="demo15"></p>

<script>
    function myFunction15()
    {
        var x="",i=0;
        do
        {
            x=x + "The number is " + i + "<br>";
            i++;
        }
        while (i<0)
        document.getElementById("demo15").innerHTML=x;
    }
</script>

<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的步进。</p>
<button onclick="myFunction14()">点击这里</button>
<p id="demo14"></p>

<script>
    function myFunction14()
    {
        var x="",i=0;
        for (i=0;i<10;i++)
        {
            if (i==3)
            {
                continue;
            }
            x=x + "The number is " + i + "<br>";
        }
        document.getElementById("demo14").innerHTML=x;
    }
</script>

<script>
    var txt="";
    function message1()
    {
        try
        {
            alddert("Welcome guest!");
        }
        catch(err)
        {
            txt="本页有一个错误。\n\n";
            txt+="错误描述：" + err.message + "\n\n";
            txt+="点击确定继续。\n\n";
            alert(txt);
        }
    }
</script>
</head>

<input type="button" value="查看消息" onclick="message1()" />

<script>
    function myFunction17()
    {
        try
        {
            var x=document.getElementById("demo19").value;
            if(x=="")    throw "值为空";
            if(isNaN(x)) throw "不是数字";
            if(x>10)     throw "太大";
            if(x<5)      throw "太小";
            if(x>=5&&x<=10) throw "正确";
        }
        catch(err)
        {
            var y=document.getElementById("mess");
            y.innerHTML="结果：" + err + "。";
            alert(err);
        }
    }
</script>

<h1>请输入 5 到 10 之间的数字：</h1>
<p>开始：</p>
<input id="demo19" type="text">
<button type="button" onclick="myFunction17()">测试输入值</button>
<p id="mess"></p>

</body>
</html>