5 JS互動特效案例實戰

阿新 • • 發佈：2021-06-14

JS互動特效案例實戰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片切換</title>
</head>
<body>
    <!-- 4    1    4 -->
    <img src="images/image01.jpg" id="flower" width="200" height="200">
    <br>
    <button id=" 
prev">上一張</button>
    <button id="next">下一張</button>
    <script type="text/javascript">
        // 1.獲取事件源 需要的標籤
        var flower = document.getElementById('flower');
        var nextBtn = document.getElementById('next');
        var prevBtn  = document.getElementById('prev 
');

        var minIndex = 1,maxIndex = 4; currentIndex = minIndex;
        // 2.監聽按鈕的點選
        nextBtn.onclick = function(){
            if(currentIndex === maxIndex){
                // 到最後一張了
                currentIndex = minIndex;
            }else{
                currentIndex++;
            }
            
            flower.setAttribute( 
'src',`images/image0${currentIndex}.jpg`)
        }

        prevBtn.onclick = function(){
            if(currentIndex === minIndex){
                // 到最後一張了
                currentIndex = maxIndex;
            }else{
                currentIndex--;
            }
            flower.setAttribute('src',`images/image0${currentIndex}.jpg`)
        }

    </script>

</body>
</html>

01 圖片切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顯示和隱藏圖片</title>
</head>
<body>
    <button id="btn">隱藏</button>
    <br>
    <img src="images/img01.jpg" id="new">
    <script type="text/javascript">
        // 1.獲取事件源
        var obtn = document.getElementById('btn');
        var newImg = document.getElementsByTagName('img')[0];
        // var isShow = true;
        // 2.繫結事件
        obtn.onclick = function(){
            // 3.事件驅動程式
            if(obtn.innerHTML === '隱藏'){
                newImg.style.display = 'none';
                obtn.innerHTML = '顯示';
                // isShow = false;
            }else{
                newImg.style.display = 'block';
                obtn.innerHTML = '隱藏';
                // isShow = true;
            }
        }

    </script>
    
</body>
</html>

02 顯示和隱藏圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03 衣服相簿</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 50px;
            height: 50px;
            margin-left: 10px;
            margin-top: 20px;
            border: 2px solid #fff;
        }
        ul li.active{
            border-color: red;
        }

    </style>
</head>
<body>
    <img src="images/1.jpg" id="bigImg">
    <ul>
        <li class="active">
            <a href="">
                <img src="images/1.jpg" width="46"  class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/2.jpg" width="46" class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/3.jpg" width="46" class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/4.jpg" width="46" class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/5.jpg" width="46" class="smallImg">
            </a>
        </li>
    </ul>
    <script type="text/javascript">
        // 1.獲取事件源
        var bigImg  = document.getElementById('bigImg');
        var smallImgs  = document.getElementsByClassName('smallImg');

        for(var i = 0; i < smallImgs.length; i++){
            //2. 遍歷集合，給每個img標籤新增事件
            smallImgs[i].onmouseover = function(){

                // 3.事件處理程式
                // 3.1 在懸浮到每個li標籤之前，先把所有的li標籤的類名都置為空值
                for(var j = 0; j < smallImgs.length; j++){
                    smallImgs[j].parentNode.parentNode.setAttribute('class', '');
                }

                // 3.2修改大圖的src屬性值
                var smallImgSrc = this.getAttribute('src');
                bigImg.setAttribute('src',smallImgSrc);

                // 3.3 給滑鼠懸浮的img標籤的父標籤新增類
                this.parentNode.parentNode.setAttribute('class', 'active');
            }
        }




    </script>
</body>
</html>

03 衣服相簿

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04 關閉小廣告</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #qe_code{
            width: 180px;
            height: 160px;
            margin: 100px auto;
            position: relative;
        }
        #qe_code img{
            position: absolute;
            right: 0;
        }
        #qe_code #close{
            position: absolute;
            width: 18px;
            height: 18px;
            border: 1px solid #e0e0e0;
            text-align: center;
            line-height: 18px;
            cursor: pointer;
            color: #666;
        }
    </style>
</head>
<body>
    <div id="qe_code">
        <img src="images/phone_taobao.png" id="code">
        <span id="close">X</span>
    </div>
    <script type="text/javascript">
        var closeSpan = document.getElementById('close');
        var qe_code = document.getElementById('qe_code');
        closeSpan.onclick = function(){
            qe_code.style.display = 'none';
        }

    </script>
</body>
</html>

04 關閉小廣告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05 圖片切換</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 430px;
            height: 70px;
            padding-top: 430px;
            background: url('images/big_pic1.jpg') no-repeat;
        }
        #box ul li{
            display: inline-block;
            margin-right: 15px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="item1">
                <img src="images/pic1.jpg">
            </li>
            <li id="item2">
                <img src="images/pic2.jpg">
            </li>
            <li id="item3">
                <img src="images/pic3.jpg">
            </li>
            <li id="item4">
                <img src="images/pic4.jpg">
            </li>
            <li id="item5">
                <img src="images/pic5.jpg">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 初學者 小白 書寫的方式
        var item1 = document.getElementById('item1');
        var item2 = document.getElementById('item2');
        var item3 = document.getElementById('item3');
        var item4 = document.getElementById('item4');
        var item5 = document.getElementById('item5');
        var oBox = document.getElementById('box');
        item1.onmouseover = function(){
            oBox.style.background = `url('images/big_pic1.jpg') no-repeat`
        }
        item2.onmouseover = function(){
            oBox.style.background = `url('images/big_pic2.jpg') no-repeat`
        }
        item3.onmouseover = function(){
            oBox.style.background = `url('images/big_pic3.jpg') no-repeat`
        }
        item4.onmouseover = function(){
            oBox.style.background = `url('images/big_pic4.jpg') no-repeat`
        }
        item5.onmouseover = function(){
            oBox.style.background = `url('images/big_pic5.jpg') no-repeat`
        }

    </script>
    
</body>
</html>

05 圖片切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05 圖片切換</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 430px;
            height: 70px;
            padding-top: 430px;
            background: url('images/big_pic1.jpg') no-repeat;
        }
        #box ul li{
            display: inline-block;
            margin-right: 15px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="item1">
                <img src="images/pic1.jpg">
            </li>
            <li id="item2">
                <img src="images/pic2.jpg">
            </li>
            <li id="item3">
                <img src="images/pic3.jpg">
            </li>
            <li id="item4">
                <img src="images/pic4.jpg">
            </li>
            <li id="item5">
                <img src="images/pic5.jpg">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 初學者 小白 書寫的方式
        // 1.獲取事件源
        /*
        var item1 = document.getElementById('item1');
        var item2 = document.getElementById('item2');
        var item3 = document.getElementById('item3');
        var item4 = document.getElementById('item4');
        var item5 = document.getElementById('item5');
        var oBox = document.getElementById('box');
        */
        // 1.獲取事件源
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null;
        }

        function changebgcImg(liId,imgSrc){
            // 2.新增事件
            $(liId).onmouseover = function(){
                // 3.改變背景圖
                $('box').style.background = imgSrc;
            }
        }
        changebgcImg('item1',`url('images/big_pic1.jpg') no-repeat`);
        changebgcImg('item2',`url('images/big_pic2.jpg') no-repeat`);
        changebgcImg('item3',`url('images/big_pic3.jpg') no-repeat`);
        changebgcImg('item4',`url('images/big_pic4.jpg') no-repeat`);
        changebgcImg('item5',`url('images/big_pic5.jpg') no-repeat`);


        /*
        $('item1').onmouseover = function(){
            oBox.style.background = `url('images/big_pic1.jpg') no-repeat`
        }
        $('item2').onmouseover = function(){
            oBox.style.background = `url('images/big_pic2.jpg') no-repeat`
        }
        $('item3').onmouseover = function(){
            oBox.style.background = `url('images/big_pic3.jpg') no-repeat`
        }
        $('item4').onmouseover = function(){
            oBox.style.background = `url('images/big_pic4.jpg') no-repeat`
        }
        $('item5').onmouseover = function(){
            oBox.style.background = `url('images/big_pic5.jpg') no-repeat`
        }
        */


    </script>
    
</body>
</html>

06 圖片切換2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05 圖片切換</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 430px;
            height: 70px;
            padding-top: 430px;
            background: url('images/big_pic1.jpg') no-repeat;
        }
        #box ul li{
            display: inline-block;
            margin-right: 15px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="item">
                <img src="images/pic1.jpg">
            </li>
            <li class="item">
                <img src="images/pic2.jpg">
            </li>
            <li class="item">
                <img src="images/pic3.jpg">
            </li>
            <li class="item">
                <img src="images/pic4.jpg">
            </li>
            <li class="item">
                <img src="images/pic5.jpg">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 1.獲取事件源
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null;
        }
        var items = document.getElementsByClassName('item');
        for(var i = 0;i < items.length; i++){
            var item  = items[i];
            item.index = i+1;
            items[i].onmouseover = function(){
                $('box').style.background = ` url('images/big_pic${this.index}.jpg') no-repeat`;
            }
        }
    </script>
    
</body>
</html>

07 圖片切換完整版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08 百度換膚</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #skin{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('images/skin1.jpg');
            background-position: center 0;
            background-repeat: no-repeat;

        }
        #skin-photo{
            width: 100%;
            height: 100px;
            position: relative;
            z-index: 10
        }
        #skin-photo ul{
            overflow: hidden;
            width: 1200px;
            margin: 0 auto;
            background-color: rgba(255,255,255,.5);
        }
        #skin-photo ul li{
            float: left;
            cursor: pointer;
            height: 120px;
            margin: 10px 0 10px 96px;
        }
        #skin-photo ul li img{
            width: 180px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div id="skin"></div>
    <div id="skin-photo">
        <ul>
            <li>
                <img src="images/skin1.jpg">
            </li>
            <li>
                <img src="images/skin2.jpg">
            </li>
            <li>
                <img src="images/skin3.jpg">
            </li>
            <li>
                <img src="images/skin4.jpg">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 1.獲取對應的圖片
        var  skin = document.getElementById('skin');
        var allItems = document.getElementsByTagName('li');
        for(var i = 0; i < allItems.length; i++){
            allItems[i].index = i + 1;
            allItems[i].onclick = function(){
                skin.style.backgroundImage = ` url('images/skin${this.index}.jpg')`
            }
        }
    </script>
    
</body>
</html>

08 百度換膚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09 千千音樂盒</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #panel{
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 400px;
            padding: 20px;
            margin: 100px auto;
        }
        .panel-footer{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="panel">
            <div class="panel-title">
                <h3>千千音樂盒</h3>
                <hr>
            </div>
            <div class="panel-content">
                <input type="checkbox">漂洋過海來看你 <br>
                <input type="checkbox">一眼萬年<br>
                <input type="checkbox">後來 <br>
                <input type="checkbox">沒那麼簡單 <br>
                <input type="checkbox">如果你要離去 <br>
                <input type="checkbox">戀戀風塵 <br>
                <input type="checkbox">南山南 <br>
                <input type="checkbox">濤聲依舊 <br>
                <input type="checkbox">可惜不是你 <br>
            </div>
            <div class="panel-footer">
                <hr>
                <button id="allSelect">全選</button>
                <button id="cancelSelect">取消選中</button>
                <button id="reverseSelect">反選</button>
            </div>
        </div>
        <script type="text/javascript">
            function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null;
        }
        // 1.獲取所有的複選框
        var inputs = document.getElementsByTagName('input');
        // 2.全選
        $('allSelect').onclick = function(){
            for(var i = 0; i < inputs.length; i ++){
                inputs[i].checked = true;
            }
        }
        // 3.取消選中
        $('cancelSelect').onclick = function(){
            for(var i = 0; i < inputs.length; i ++){
                inputs[i].checked = false;
            }
        }

        // 4.反選
        $('reverseSelect').onclick = function(){
            for(var i = 0; i < inputs.length; i ++){
                inputs[i].checked  =  !inputs[i].checked;
                /*
                if(inputs[i].checked){
                    inputs[i].checked = false;
                }else{
                    inputs[i].checked = true;
                }
                */
            }
        }
        </script>
</body>
</html>

09 千千音樂盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10 表單驗證</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #prompt{
            font-size: 12px;
            color: darkgray;
        }
        #score{
            border: 1px solid darkgray;
        }
        .right{
            background: url('images/right.png') no-repeat 5px center;
            background-size: 15px 15px;
            padding-left: 20px;
            color: lightgreen !important;
        }
        .error{
            background: url('images/error.png') no-repeat 5px center;
            background-size: 15px 15px;
            padding-left: 20px;
            color: red !important;
        }


    </style>
</head>
<body>
    <div id="box">
        <label for='score'>您的成績：</label>
        <input type="text" placeholder="請輸入分數" id="score">
        <span id="prompt">請輸入您的成績</span>
    </div>
    <script type="text/javascript">
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null;
        }
        // input輸入框失去焦點
        $('score').onblur = function(){
            // 1.獲取輸入的內容
            var value = parseFloat(this.value);
            console.log(typeof value);
            // 2.驗證
            console.log(isNaN(value));
            if(isNaN(value)){
                //不是一個數
                $('prompt').innerHTML = '輸入的成績不正確';
                // $('prompt').setAttribute('class', 'error');
                $('prompt').className = 'error';
                this.style.borderColor = 'red';
            }else if(value >= 0 && value <= 100){
                // 合法的
                $('prompt').innerHTML = '輸入的成績正確';
                $('prompt').className = 'right';
                this.style.borderColor = 'lightgreen';
            }else{
                // 超出成績的範圍
                $('prompt').innerHTML = '成績必須在0~100之間';
                $('prompt').className = 'error';
                this.style.borderColor = 'red';
            }
        }

        // input輸入框獲取焦點 恢復原來的狀態
        $('score').onfocus = function(){
            $('prompt').innerHTML = '請輸入您的成績';
            $('prompt').className  = '';
            $('score').style.borderColor = 'darkgray';
            $('score').style.outline = 'none';
            $('score').value = '';

        }

    </script>
</body>
</html>

10 表單驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11 上傳圖片驗證</title>
    <script type="text/javascript">
        // jpg png gif jpeg
        window.onload = function(){
            // 1.獲取標籤
            var file = document.getElementById('file');
            // 2.監聽圖片選擇的變化
            file.onchange = function(){
                // 2.1 獲取上傳的圖片路徑
                var path = this.value;
                //C:\fakepath\01.gif
                // 2.2 獲取.在路徑字串中佔的位置
                var loc = path.lastIndexOf('.');

                // 2.3 截圖 檔案路徑的字尾名
                var suffix = path.substr(loc);
                // 2.4統一轉小寫
                var lower_suffix = suffix.toLowerCase();
                // 2.5 判斷
                if(lower_suffix === '.jpg' ||  lower_suffix === '.png' || lower_suffix === '.jpeg' || lower_suffix === '.gif' ){
                    alert('上傳圖片格式正確');
                }else{
                    alert('上傳圖片格式錯誤');
                }

            }
        }

    </script>
    
</head>
<body>
    <label for="file">上傳圖片格式驗證:</label>
    <input type="file" name="" id="file">

</body>
</html>

11 上傳圖片驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12 隨機驗證碼</title>
    <style type="text/css">
        #code{
            width: 100px;
            height: 100px;
            background-color: #ddd;
            padding: 10px;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
            color: red;
            font-weight: bold;
        }
        input{
            outline: none;

        }
    </style>
</head>
<body>

    <div id="code"></div>
    <input type="text" name="" id="newCode">
    <input type="button" name="" id="validate" value="驗證">

    <script type="text/javascript">

        window.onload = function(){
            // 儲存全域性，與新輸入的驗證碼進行校驗
            var  code;
            // 1.獲取對應的標籤
            var codeDiv = document.getElementById('code');
            var newCodeInput = document.getElementById('newCode');
            var validate = document.getElementById('validate');
            // 載入頁面獲取對應的驗證碼
            creatCode()

            // 獲取min到max之間的整數 (1~100)
            function random(max,min){
                return Math.floor(Math.random() * (max-min) + min);
            }
            function creatCode(){
                // 設定預設的空的字串  
                 code = '';
                // 設定長度 
                var codeLength = 4;
                var randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
                for(var i  = 0; i < codeLength; i++){
                    // 設定隨機範圍 0~36
                    var index = random(0,36);
                    code +=  randomCode[index];
                }
                codeDiv.innerHTML = code;
            }

            // 驗證按鈕校驗
            validate.onclick = function(){
                // 獲取使用者新輸入的驗證碼
                var  newCode = newCodeInput.value.toUpperCase();
                if(newCode === code){
                    // 驗證成功 跳轉對應的網址
                    window.location.href = 'https://www.apeland.cn';
                }else{
                    // 驗證失敗
                    alert('驗證碼不正確,請重新輸入');
                    // 輸入框置空
                    newCodeInput.value = ' ';
                    // 重新獲取驗證碼
                    creatCode();
                }
            }
        }
    </script>
</body>
</html>

12 隨機驗證碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13 發表評論</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #box{
            width: 1000px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 20px;
        }
        #comment{
            width: 80%;
            padding: 10px 10px;
            font-size: 20px;
            outline: none;
        }
        .box_top{
            margin-bottom: 20px;
        }
        #comment_content li{
            border-bottom: 1px dashed #ccc;
            width: 800px;
            color: red;
            line-height: 45px;
        }
        #comment_content li a{
            float: right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box_top">
            <textarea id="comment" cols="100" rows="10" placeholder="請輸入您的評論"></textarea>
            <button id="btn">釋出</button>
        </div>
        <ul id="comment_content">
            
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            // 1.監聽按鈕的點選
            $('btn').onclick = function(){
                // 1.1  獲取使用者輸入的內容
                var content = $('comment').value;
                // console.log(content);
                // 1.2 判斷
                if(content.length === 0){
                    alert('請輸入內容');
                    return;
                }
                // 1.3  建立li標籤插入到ul中
                var newLi = document.createElement('li');
                newLi.innerHTML = `${content}<a href = 'javascript:void(0)'>刪除</a>`;
                // $('comment_content').appendChild(newLi);
                console.log($('comment_content').children);
                $('comment_content').insertBefore(newLi,$('comment_content').children[0]);

                // 1.4 清空輸入框中的內容
                $('comment').value = ' ';

                // 1.5 刪除評論 
                var delBtns = document.getElementsByTagName('a');
                for(var i = 0; i < delBtns.length; i++){
                    delBtns[i].onclick = function(){
                        this.parentNode.remove();
                    }
                }
            };

            function $(id){
                return typeof id === 'string' ? document.getElementById(id) : null;
            }
        }
    </script>
</body>
</html>

13 發表評論

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14 九宮格佈局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            overflow: hidden;
        }
        #wrap .item{
            width: 248px;
            height: 360px;
            font-size: 13px;
        }
        #wrap .item .title{
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .imgContainer{
            width: 248px;
            display: table-cell;
            text-align: center;
        }
         #wrap .item .price{
            color:#ff6700;
            font-size: 18px;
            font-weight: bold;
         }


    </style>
</head>
<body>
<div class="cols">
    <button>3列</button>
    <button>4列</button>
    <button>5列</button>
</div>
<div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_1.jpg" alt="">
            </div>
            <p class="title">純色短袖女春季秋t恤韓版國新款服裝2019潮</p>
            <p class="price">¥69</p>
         </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_2.jpg" alt="">
            </div>
            <p class="title">百搭開春裝女胖mm夏季顯瘦2019新款大碼韓版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_3.jpg" alt="">
            </div>
            <p class="title">婚紗2019新款歐美韓式孕婦婚紗高腰韓版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_4.jpg" alt="">
            </div>
            <p class="title">點上衣很仙的女裝夏2019新款洋氣打底衫</p>
            <p class="price">¥90</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_5.jpg" alt="">
            </div>
            <p class="title">大碼女裝胖MM文藝時尚格子圓點顯瘦連衣裙</p>
            <p class="price">¥78</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_6.jpg" alt="">
            </div>
            <p class="title">2019夏季新款女裝韓版修身顯瘦V領無袖</p>
            <p class="price">¥89</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_7.jpg" alt="">
            </div>
            <p class="title">春季短款小外套女2019春裝春秋新款韓</p>
            <p class="price">¥100</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_8.jpg" alt="">
            </div>
            <p class="title">大碼女裝中長款針織衫春裝胖mm顯瘦</p>
            <p class="price">¥120</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_9.jpg" alt="">
            </div>
            <p class="title">春款韓版2019新款女裝時尚初春兩件套</p>
            <p class="price">¥107</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_10.jpg" alt="">
            </div>
            <p class="title">牛仔外套女短款2019春裝新款女裝韓版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_11.jpg" alt="">
            </div>
            <p class="title">2019夏季新款女裝裙子純色流蘇a字裙</p>
            <p class="price">¥56</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_12.jpg" alt="">
            </div>
            <p class="title">女裝休閒短袖韓版寬鬆2019新款春夏季</p>
            <p class="price">¥76</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_13.jpg" alt="">
            </div>
            <p class="title">棉上衣女裝秋季新款2019早春休閒時尚</p>
            <p class="price">¥45</p>
        </div>
</div>
<script type="text/javascript">
    // 1.獲取標籤
    var btns = document.getElementsByTagName('button');
    var items = document.getElementsByClassName('item');

    // 2.監聽按鈕的點選
    btns[0].onclick = function(){
        
        // 3.迴圈  
       mjj_flex(3);
    }
     btns[1].onclick = function(){
        
        mjj_flex(4)
       
    }
    btns[2].onclick = function(){
        
       mjj_flex(5);
    }

    function mjj_flex(colsNum){
         for(var i = 0; i < items.length; i++){
            items[i].style.float = 'left';
            items[i].parentNode.style.width = (colsNum * items[i].offsetWidth) + 'px'
        }
    }

</script>
    
</body>
</html>

14 九宮格佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14 九宮格佈局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
           position: relative;
        }
        #wrap .item{
            width: 248px;
            height: 360px;
            font-size: 13px;
        }
        #wrap .item .title{
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        .imgContainer{
            width: 248px;
            display: table-cell;
            text-align: center;
        }
         #wrap .item .price{
            color:#ff6700;
            font-size: 18px;
            font-weight: bold;
         }


    </style>
</head>
<body>
<div class="cols">
    <button>3列</button>
    <button>4列</button>
    <button>5列</button>
</div>
<div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_1.jpg" alt="">
            </div>
            <p class="title">純色短袖女春季秋t恤韓版國新款服裝2019潮</p>
            <p class="price">¥69</p>
         </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_2.jpg" alt="">
            </div>
            <p class="title">百搭開春裝女胖mm夏季顯瘦2019新款大碼韓版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_3.jpg" alt="">
            </div>
            <p class="title">婚紗2019新款歐美韓式孕婦婚紗高腰韓版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_4.jpg" alt="">
            </div>
            <p class="title">點上衣很仙的女裝夏2019新款洋氣打底衫</p>
            <p class="price">¥90</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_5.jpg" alt="">
            </div>
            <p class="title">大碼女裝胖MM文藝時尚格子圓點顯瘦連衣裙</p>
            <p class="price">¥78</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_6.jpg" alt="">
            </div>
            <p class="title">2019夏季新款女裝韓版修身顯瘦V領無袖</p>
            <p class="price">¥89</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_7.jpg" alt="">
            </div>
            <p class="title">春季短款小外套女2019春裝春秋新款韓</p>
            <p class="price">¥100</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_8.jpg" alt="">
            </div>
            <p class="title">大碼女裝中長款針織衫春裝胖mm顯瘦</p>
            <p class="price">¥120</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_9.jpg" alt="">
            </div>
            <p class="title">春款韓版2019新款女裝時尚初春兩件套</p>
            <p class="price">¥107</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_10.jpg" alt="">
            </div>
            <p class="title">牛仔外套女短款2019春裝新款女裝韓版</p>
            <p class="price">¥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_11.jpg" alt="">
            </div>
            <p class="title">2019夏季新款女裝裙子純色流蘇a字裙</p>
            <p class="price">¥56</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_12.jpg" alt="">
            </div>
            <p class="title">女裝休閒短袖韓版寬鬆2019新款春夏季</p>
            <p class="price">¥76</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/taobao_13.jpg" alt="">
            </div>
            <p class="title">棉上衣女裝秋季新款2019早春休閒時尚</p>
            <p class="price">¥45</p>
        </div>
</div>
<script type="text/javascript">
    // 1.獲取標籤
    var btns = document.getElementsByTagName('button');
    var items = document.getElementsByClassName('item');

    // 2.監聽按鈕的點選
    btns[0].onclick = function(){
        
        // 3.迴圈  
       mjj_flex(3);
    }
     btns[1].onclick = function(){
        
        mjj_flex(4)
       
    }
    btns[2].onclick = function(){
        
       mjj_flex(5);
    }

    function mjj_flex(colsNum){
         // 第0行第0列   top: row * h         left: col* w
         // 第0行第1列   top: 0 * h         left: 1* w
         // 第0行第2列   top: 0 * h         left: 2* w
         // 第1行第0列   top: 1 * h         left: 0 * w
         // 第1行第1列   top: 1 * h         left: 1 * w
         // 第1行第2列   top: 1 * h         left: 2* w
         // 第2行第0列   top: 2 * h         left: 0* w
         // 第2行第1列   top: 2 * h         left: 0* w
         // 第2行第2列   top: 2 * h         left: 0* w
         for(var i = 0; i < items.length; i++){
                 // 求每個盒子佔得行數和列數      10      3行  1列
                                                                     // 11     3行 2列
                 var row = parseInt(i / colsNum);
                 var col = parseInt(i % colsNum);
                 // 設定盒子定位
                  items[i].style.position = 'absolute';
                  items[i].style.top = (row * items[i].offsetHeight) + 'px';
                  items[i].style.left = (col * items[i].offsetWidth) + 'px';
         }


    }

</script>
    
</body>
</html>

15 九宮格佈局-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16 日期特效</title>
    <style type="text/css">
        *{
                padding: 0;
                margin: 0;
            }
            #date{
                width: 450px;
                height: 300px;
                background-color: darkorange;
                border-radius: 10px;
                margin: 100px auto;
            }
            #nowDate{
                width: 450px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                color: #fff;
                font-size: 26px;
            }
            #day{
                width: 200px;
                height: 200px;
                line-height: 200px;
                background-color: orchid;
                margin: 0 auto;
                text-align: center;
                color:#fff;
                font-weight: bold;
                font-size: 60px;
            }
    </style>
</head>
<body>
<div id="date">
    <p id="nowDate">

    </p>
    <p id="day">

    </p>
</div>
<script type="text/javascript">
    // 1.獲取標籤
    var  nowDate = document.getElementById('nowDate');
    var  day = document.getElementById('day');
    // 用定時器 更新時間的變化
    setInterval(nowNumTime, 10);

    function nowNumTime(){
        var now = new Date();
        var hour  = now.getHours(); //0 ~ 23.   //19
        var minute = now.getMinutes();
        var second = now.getSeconds();
        var year = now.getFullYear();
        var month = now.getMonth();
        var d = now.getDate();
        var week = now.getDay();
        //console.log(week); //索引
        var weeks = ['星期天','星期一','星期二','星期叄','星期肆','星期伍','星期六'];
        // 18 > 12  ? 18-12  : 8
        var temp = '' + (hour > 12 ?  hour - 12 : hour);
        if(hour === 0){
            temp = '12';
        }
        temp  = temp +(minute < 10 ?  ':0': ":")+ minute;
        temp  = temp +(second < 10 ?  ':0': ":")+ second;
        temp = temp + (hour >= 12 ?  ' P.M.': " A.M.");
        temp = `${year}年${month}月${d}日  ${temp} ${weeks[week]}`;
        nowDate.innerHTML = temp;
        day.innerHTML=`${d}`
    }



</script>
</body>
</html>

16 日期特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17 定時器回顧</title>
</head>
<body>
    <button id="start">開啟</button>
    <button id="stop">關閉</button>

    <script type="text/javascript">
        // 1.獲取標籤
        var start = document.getElementById('start');
        var stop = document.getElementById('stop');
        var num = 0,timer = null;
        start.onclick = function(){
            // 使用定時器的時候 先清除定時器 再開啟定時器 防止使用者頻繁性的開啟定時器
            clearInterval(timer);
            timer = setInterval(function(){
                num++;
                console.log(num);
            },1000)
        }    
        stop.onclick  = function(){
            clearInterval(timer);
        }
    </script>
</body>
</html>

17 定時器回顧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18 transform的運用</title>
    <style type="text/css">
        #box{
            width: 50px;
            height: 50px;
            background-color:red;
            /*transform: translate(100px,200px) rotate(10deg) scale(2.0) skew(10deg);*/

        }
    </style>
</head>
<body>
    <button id="btn">形變</button>
    <div id="box"></div>
    <script>
        window.onload = function(){
            var btn = document.getElementById('btn');
            var box = document.getElementById('box');
            var index = 0;
            btn.onclick = function(){
                index++;
                box.style.transform = `translate(${index * 100}px,${index * 50}px) rotate(${index * 10}deg) scale(${index * 1.3})`;
            }
        }
    </script>
    
</body>
</html>

transform的運用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19 數字時鐘案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #clock{
            width: 600px;
            height: 600px;
            background: url('images/clock.jpg') no-repeat;
            position: relative;
        }
        #hour,#minute,#second{
            position: absolute;
            width: 30px;
            height: 600px;
            left: 50%;
            top: 0;
            margin-left: -15px;
        }
        #hour{
            background: url('images/hour.png') no-repeat center center;
        }
        #minute{
            background: url('images/minute.png') no-repeat center center;
        }
        #second{
            background: url('images/second.png') no-repeat center center;
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
    <script type="text/javascript">
        // 1.獲取標籤
        var hour = document.getElementById('hour');
        var minute = document.getElementById('minute');
        var second = document.getElementById('second');

        // 2.開啟定時器 獲取當前時間
        setInterval(function () {
            // 2.1 獲取當前的時間戳
            var now = new Date();
            // 2.2 獲取小時 分鐘 秒
            var s = now.getSeconds();
            var m = now.getMinutes() + s / 60;
            var h = now.getHours() % 12 + m / 60;
            // 2.3 旋轉
            second.style.transform = `rotate(${s * 6}deg)`;
            minute.style.transform = `rotate(${m * 6}deg)`;
            hour.style.transform = `rotate(${h * 30}deg)`;

        }, 10);

    </script>
</body>
</html>

19 數字時終案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20 長圖滾動效果</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #000;
        }
        #box{
            width: 658px;
            height: 400px;
            border: 1px solid #ff6700;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        #box img{
            position: absolute;
            top: 0;
            left: 0;
        }
        #box span{
            position: absolute;
            width: 100%;
            height: 50%;
            left: 0;
            cursor: pointer;
        }
        #box #top{
            top: 0;
        }
        #box #bottom{
            bottom: 0;
        }

    </style>
</head>
<body>
    <div id="box">
        <!-- 658 4066 -->
        <img src="images/timer.jpeg" alt="">
        <span id="top"></span>
        <span id="bottom"></span>
    </div>
    <script type="text/javascript">
        // 1.獲取標籤
        var box = document.getElementById('box');
        var pic = document.getElementsByTagName('img')[0];
        var divTop = document.getElementById('top');
        var divBottom = document.getElementById('bottom');

        // 2.新增事件
        var num = 0,timer = null;
        divTop.onmouseover  = function  () {
            clearInterval(timer);
            //  讓圖片向上滾動
            timer = setInterval(function  () {
                 num -= 10;
                if(num >= -3666){
                    pic.style.top = num + 'px'; 
                }else{
                    clearInterval(timer);
                }
            },50);
        }
        divBottom.onmouseover  = function  () {
            clearInterval(timer);
            //  讓圖片向上滾動
            timer = setInterval(function  () {
                 num += 10;
                if(num <= 0){
                    pic.style.top = num + 'px'; 
                }else{
                    clearInterval(timer);
                }
            },100);
        }
        box.onmouseout = function () {
            clearInterval(timer);
        }

    </script>
</body>
</html>

20 長圖滾動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流星雨</title>
    <canvas id="canvas" style="background:black" width="620" height="340"></canvas>
    <audio style="display:none; height: 0" id="bg-music" preload="auto" src="music/黑客帝國.mp3"></audio>
    <style type="text/css">
body{margin: 0; padding: 0; overflow: hidden;}
</style>
</head>
<body>
    

<script type="text/javascript">
    
    window.onload = function(){
        //獲取圖形物件
        var canvas = document.getElementById("canvas");
        //獲取圖形的上下文
        var context = canvas.getContext("2d");
        //獲取瀏覽器螢幕的寬度和高度
        var W = window.innerWidth;
        var H = window.innerHeight;
        //設定canvas的寬度和高度
        canvas.width = W;
        canvas.height = H;
        //每個文字的字型大小
        var fontSize = 15;
        //計算列
        var colunms = Math.floor(W /fontSize);    
        //記錄每列文字的y軸座標
        var drops = [];
        //給每一個文字初始化一個起始點的位置
        for(var i=0;i<colunms;i++){
            drops.push(0);
        }

        //運動的文字
        var str ="01abcdefghijklmnopqurstuvwxyz";
        //4:fillText(str,x,y);原理就是去更改y的座標位置
        //繪畫的函式
        function draw(){
        //讓背景逐漸由透明到不透明
            context.fillStyle = "rgba(0,0,0,0.05)";
            context.fillRect(0,0,W,H);
            //給字型設定樣式
            //context.font = "700 "+fontSize+"px  微軟雅黑";
            context.font = fontSize + 'px arial';
            //給字型新增顏色
            context.fillStyle ="green";//隨意更改字型顏色
            //寫入圖形中
            for(var i=0;i<colunms;i++){
                var index = Math.floor(Math.random() * str.length);
                var x = i*fontSize;
                var y = drops[i] *fontSize;
                context.fillText(str[index],x,y);
                //如果要改變時間，肯定就是改變每次他的起點
                if(y >= canvas.height && Math.random() > 0.92){
                    drops[i] = 0;
                }
                drops[i]++;
            }
        };

        function randColor(){
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb("+r+","+g+","+b+")";
        }

        draw();
        setInterval(draw,33);
    };

</script>
</body>
</html>