JS网页交互实例-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

JS是一种脚本语言

1.JS实现HTML输出

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <script type="text/javascript">
    document.write("JS实现HTML输出");
    </script>
</body>
</html>

2.JS实现对事件作出反应

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <button type="button" onclick="alert('点击了按钮')">按钮</button>
</body>
</html>

3.JS改变HTML内容

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <p id="changeContent">原本输出的内容</p>
    <script type="text/javascript">
    function changeHTMLContent()
    {
        //找到元素(很明显，本例子的元素是p)
        x=document.getElementById("changeContent");
        //改变的内容
        x.innerHTML="这是替换的内容";
        //改变颜色
        x.style.color = "#00ff00";
    }
    </script>
    <button type="button" onclick="changeHTMLContent()">按钮</button>
</body>
</html>

4.JS验证输入

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
</head>
<body>
    <p>验证输入的是否为数字，如果不为数字，弹出提示框提示</p>
    <input id="test" type="text">
    <script type="text/javascript">
    function check()
    {
        var x = document.getElementById("test").value;
        if (x == "" || isNaN(x)) 
            {
                alert("请输入数字");
            };
    }
    </script>
    <button type="button" onclick="check()">点击测试</button>
</body>
</html>

转载于:https://my.oschina.net/u/2312022/blog/544903