JS学习2. 简单的实例代码_js学习简单demo-CSDN博客

本文链接：https://blog.csdn.net/danie_w/article/details/17041829

根据W3School上的js教程，做的一些例子。

html：

<!DOCTYPE html>
<html>
    
    <body>
        
        <script Language="JavaScript" src="first.js">
        </script>
        
        <!--添加一个button按钮，当点击时弹出alert()函数-->
        <button type="button" οnclick="alert('Welcome!')">Click here</button>
        
        <!--通过定义方法改变html内容-->
        <p id="demo">this is html DOM</p>
        <button type="button" οnclick="myFunction()">Will change</button>
        
        <!--改变html图像-->
        <img id="myimage" οnclick="changeImage()" src="res/eg_bulboff.gif">
        
        <!--改变html样式-->
        <p id="demo2"><span style="#000000">js 能改变 html 元素样式</span></p>
        <button type="button" οnclick="changeStyle()">Change e's style</button>
        
        <!--输入验证-->
        <input id="input" type="text">
        <button type="button" οnclick="checkInput()">Check this</button>
                
    </body>
    
</html>

js：

function myFunction(){
    <!--document.getElementById("id")。这个方法是HTML DOM中定义的-->
        
    x = document.getElementById("demo");
    x.innerHTML="Hi, had been changed^^ use myFunction() method";
}

/**
*   改变html图像的方法
* 使用getElementById获取图像id
* 然后使用element.src.match("res name") 来与当前图像匹配是否相同
* 例子的意思是加入现在灯是亮的状态时，换成关灯的图像；当不是亮的状态
* 时，换成亮灯的图片资源
*/
function changeImage(){
    
    element = document.getElementById("myimage");
    
    if(element.src.match("bulbon"))
    {
        element.src="/res/eg_bulboff.gif";
    }
    else
    {
        element.src="/res/eg_bulbon.gif";
    }
}

/**
* 改变html元素样式
*/
function changeStyle(){
    x = document.getElementById("demo2");
    
    x.style.color = "#ff0000";
}

/**
*   输入验证
* isNaN(var x) 是检测非特殊数字的方法，
* 加入x为纯粹数字的话，返回false，反之则是true
*/
function checkInput(){
    var x = document.getElementById("input").value;
    if(x=="" || isNaN(x))
    {
        alert(isNaN(x));
    }
}

document.write("<h1>this is a heading</h1>");
document.write("<p>this is a paragraph</p>");