案例练习

2019-02-26 15:48:30 作者：互联网

1.案例一 :在末尾添加节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在末尾添加节点</title>
</head>
<body>
    <ul id="ulid">
        <li>关关雎鸠</li>
        <li>在河之洲</li>
        <li>窈窕淑女</li>
        <li>君子好逑</li>
    </ul>
    <br/>
    <input type="button" value="add" onclick="add1();" />
    <script type="text/javascript">
    function add1(){
        //获取到ul标签
    var ul1 = document.getElementById("ulid");
    //创建标签
    var li1 = document.createElement("li");
    //创建文本
    var text1 = document.createTextNode("5555");
    //把文本加入到li下面
    li1.appendChild(text1);
    //把li加入到ul下面
    ul1.appendChild(li1);
    }
    </script>
</body>
</html>

点击前:

点击后:

2.案例二:动态显示时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例二动态显示时间</title>
    <style type="text/css">
    #times{
        width: 190px;
        height: 120px;
        border: 1px solid rgba(91,92,93);
        padding-top: 80px;
        padding-left: 10px;
    }
     </style>
</head>
<body>
    <div id="times"></div>
    <script type="text/javascript">
        function getDate(){
        //获取当前时间
        var date = new Date();
        //转换成字符串形式
        var d1 = date.toLocaleString();
        //获取div
        var div = document.getElementById("times");
        div.innerHTML=d1;
        }
        //使用定时器实现每一秒写一次时间
        setInterval("getDate();",1000)
    </script>
</body>
</html>

3.案例三下拉列表左右选择分析

待续.....

标签：练习,li,案例,li1,var,div,document
来源： https://www.cnblogs.com/zjm1999/p/10437764.html