JavaScript day-04

//demo1制作简单轮播图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
    border: 1px solid red;
    width: 218px;
    height: 218px;
    margin: 50px auto;
}

img {
    width: 218px;
    height: 218px;
}

.show {
    display: inline-block;
}

.hide {
    display: none;
}
</style>
<script type="text/javascript">
    //页面加载后
    window.onload = function(){
        lunbo();
    }
    var id;
    //轮播
    var n = 0;//轮播次数
    function lunbo(){
        //启动定时器
        id = setInterval(function(){
            n++;
            //获取所有图片
            var imgs = document.getElementsByTagName("img");
            //将所有图片隐藏
            for(var i=0;i<imgs.length;i++){
                imgs[i].className = "hide";
            }
            //将下一张图片显示
            var index = n%imgs.length;
            imgs[index].className = "show";
        },2000);
    }
    //停止
    function stop(){
        clearInterval(id);
    }
</script>
</head>
<body>
    <!-- 
        hover不是事件,是伪类选择器!
        onmouseover是鼠标悬停事件.
        onmouseout是鼠标离开事件.
     -->
    <div onmouseover="stop();" onmouseout="lunbo();">
        <img src="../images/IMG_20191113_114502.JPG" /> <img
            src="../images/IMG_20191112_235308.JPG" class="hide" /> <img
            src="../images/IMG_20191113_114502.JPG" class="hide" /> <img
            src="../images/IMG_20191112_235308.JPG" class="hide" /> <img
            src="../images/IMG_20191113_114502.JPG" class="hide" /> <img
            src="../images/IMG_20191112_235308.JPG" class="hide" />
    </div>
</body>
</html>

//demo2DOM操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    ul{
        list-style-type: none;
    }
</style>
<script type="text/javascript">
    window.onload = function(){
        //1.根据ID查询节点
        //document.getElementById();
        //2. 根据标签名查询节点
        //document.getElementsByTagName();参考day08demo1
        //3.根据层次查询节点
        //查询某个节点的亲戚(父亲,孩子,兄弟)
        //1)查询父亲
        var gz = document.getElementById("gz");
        var ul = gz.parentNode;
        console.log(ul);
        //2)查询孩子
        //包括空格(了解即可)
        console.log(ul.childNodes);
        //只含元素(重点掌握)
        console.log(ul.getElementsByTagName("li"));
        //3)查询兄弟
        //某节点.父亲.孩子们[i]
        var jms = gz.parentNode.getElementsByTagName("li")[4];
        console.log(jms);
        console.log(gz.parentNode.getElementsByTagName("li")[4]);
        //4.根据名称(name)查询节点
        //一般用于查询一组单选/多选
        var radios = document.getElementsByName("sex");
    }
</script>
</head>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li id="gz">广州</li>
        <li>深圳</li>
        <li>佳木斯</li>
        <li>廊坊</li>
    </ul>
    <p>
        <input type="radio" name="sex" checked/>男
        <input type="radio" name="sex"/>女
    </p>
</body>
</html>

//demo3DOM操作2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function f1(){
        //创建新了li(空的)
        var li = document.createElement("li");
        //给此li设置内容
        li.innerHTML = "铁岭";
        //再将它追加到ul下
        var ul = document.getElementById("city");
        ul.appendChild(li);
    }
    function f2(){
        //创建新的li
        var li = document.createElement("li");
        //设置内容
        li.innerHTML = "贵港";
        //追加
        var ul = document.getElementById("city");
        ul.insertBefore(li,document.getElementById("gz"));
    }
    function f3(){
        //获取要删除元素的父亲
        var ul = document.getElementById("city");
        //获取要删除的元素
        var gz = document.getElementById("gz");
        //通过父亲删除孩子
        ul.removeChild(gz);
    }
</script>
</head>
<body>
    <p>
        <input type="button" value="追加" onclick="f1();"/>
        <input type="button" value="插入" onclick="f2();"/>
        <input type="button" value="删除" onclick="f3();"/>
    </p>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li id="gz">广州</li>
        <li>深圳</li>
        <li>佳木斯</li>
        <li>廊坊</li>
    </ul>
</body>
</html>

//demo4关联多选框小案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script  type="text/javascript">
    var cities    
    window.onload = function(){
        <!--模拟查询所有城市-->
        cities = [
            ["石家庄","保定","廊坊"],
            ["广州","东莞","佛山"],
            ["南宁","桂林","玉林"]
        ];
    }
    function chg(){
        //lert(1);
        //获取省份下拉选
        var sel1 = document.getElementById("province");
        /* alert(sel1.value); */
        //获取选中省份的序号
        var n = sel1.value;
        //获取该省份所对应的城市
        var pcities = cities[n];
        //删除旧城市(从后往前删)
        var sel2 = document.getElementById("city");
        //获取option
        sel2.innerHTML = "<option>请选择</option>";
    //    var options = sel2.getElementsByTagName("option");
    //    for (var i = options.length-1; i > 0; i--) {
        //    sel2.removeChild(options[i]);
    //    }
        //追加新城市
        if(pcities){
            for (var i = 0; i < pcities.length; i++) {
                var option = document.createElement("option");
                option.innerHTML = pcities[i];
                sel2.appendChild(option);
            }
        }
    }
</script>
</head>
<body>
    省:
    <select onchange="chg();" id="province">
        <option value="-1">请选择</option>
        <option value="0">河北省</option>
        <option value="1">广东省</option>
        <option value="2">广西省</option>
    </select>
    市:
    <select id="city">
        <option>请选择</option>
    </select>
</body>
</html>

 

posted @ 2020-05-13 20:56  two_q  阅读(135)  评论(0)    收藏  举报