前端开发之JavaScript HTML DOM实战篇

 

实战案例一：

　　“灯泡发光”　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScript案例之点亮灯泡</title>
    <style type="text/css">
        img{
            width:100px;
            height:180px;
            margin:50px 50%;
        }

    </style>
</head>
<body>
    <img id="myLight" onclick="changeImage()" src="images/pic_bulboff.gif" title="点击灯泡发光或关闭" >
    <script>
        function changeImage(){
            element = document.getElementById("myLight");
            if(element.src.match('bulbon')){
                element.src="images/pic_bulboff.gif";
            } else{
                element.src="images/pic_bulbon.gif";
            }
        }
    </script>
</body>
</html>
View Code

 

实战案例二：

　　模态框 -- 点击页面按钮，弹出模态框，弹出后可取消显示，恢复开始界面。

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>模态框</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        html,body{
            height:100%;
        }
        #box{
            width:100%;
            height:100%;
            background:rgba(0,0,0,.2);// 依次是红，绿，蓝，透明度（0到1）
        }
        #content{
            position:relative;
            top:150px;
            width:400px;
            height:200px;
            line-height:200px;
            text-align:center;
            color:greenyellow;
            background-color: #3e8f3e;
            margin:0 auto;
        }
        #span1{
            position:absolute;
            background-color: #66afe9;
            top:0;
            right:0;
            width:25px;
            height:25px;
            line-height:25px;
            text-align:center;
            color:white;
        }
    </style>
    <body>
        <button id="btn" style="margin:10px 45%;width:60px;height:25px;">弹出</button>
        <div class="container" >
            <p style="color:rebeccapurple;margin-left:40%;">点击上方按钮，弹出模态框</p>
        </div>

    </body>
    <script type="text/javascript">
        var btn = document.getElementById("btn"); // 获取按钮元素
        var dom_div = document.createElement("div"); // 创建div节点
        var dom_p = document.createElement("p"); // 创建p节点
        var dom_span = document.createElement("span"); // 创建span节点
        // 设置id和设置文本
        dom_div.id = "box";
        dom_p.id = "content";
        dom_p.innerHTML = "模态框成功弹出";
        dom_span.id = "span1";
        dom_span.innerHTML ="X";

        dom_div.appendChild(dom_p);// 将新建的p节点添加到新建的div上
        dom_p.appendChild(dom_span);// 将span节点添加到p节点上

        btn.onclick = function(){
            // 向body动态添加一个div
            btn.parentNode.insertBefore(dom_div,btn);
        }
        dom_span.onclick = function(){
            // 点击模态框中的“X”取消显示
            dom_div.parentNode.removeChild(dom_div);
        }
    </script>
</html>
View Code

 

实战案例三：

　　“点击有惊喜” -- 点击桌面的方框，每点击一次会切换不同的显示，最后切换回初始界面。　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>点击有惊喜</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:300px;
            height:200px;
            margin:200px auto;
            background: red;
            border:1px solid greenyellow;
            text-align: center;
            line-height:200px;
            font-size:18px;
            color:royalblue;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        点击有惊喜！
    </div>
</body>
<script type="text/javascript">
    var dom_box = document.getElementsByClassName("box")[0];
    var n = 0;
    dom_box.onclick = function(){
        n++;
        if(n%3==1){
            dom_box.style.background="yellow";
            dom_box.innerText = "上当了吧！Too young too simple";
        }
        else if(n%3==2){
            dom_box.style.background="blue";
            dom_box.innerText = "上当了吧！Too young too simple";
        }
        else{
            dom_box.style.background="red";
            dom_box.innerText = "点击继续！";
        }
    }

</script>
</html>
View Code

 

实战案例四：

　　通过HTML、CSS和javascript制作一个简单的留言板。

　　可写留言，将留言加入列表，逐条删除留言，统计留言数目。　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>留言板</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            background: #d4ffc0;
        }
        h1{
            margin-left:350px;
            margin-top:50px;
            color: #99c2ff;
            font-family: "Adobe 楷体 Std R";
        }

        textarea{
            margin-left:350px;
            margin-top:20px;
            border: 1px solid palegreen;
            position:relative;
        }
        input{
            width:60px;
            height:20px;
            text-align: center;
        }
        button{
            width:60px;
            height:20px;
        }
        ul{
            margin-left:350px;
            margin-top:20px;
            list-style:none;
        }
        ul li span{
            margin-left: 100px;
            cursor: pointer;
        }
         ul li span:hover{
             color:red;
         }
    </style>
</head>
<body>
    <h1>欢迎来到留言板</h1>
    <div id="box">

    </div>
    <textarea id="msg" placeholder="此处写留言"></textarea>
    <input type="button" id="btn" value="留言" >
    <button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
    var dom_ul = document.createElement("ul"); // 创建节点
    var dom_box = document.getElementById("box");// 获取节点
    dom_box.appendChild(dom_ul);//添加子节点

    var dom_btn = document.getElementById("btn");// 获取节点
    var dom_msg = document.getElementById("msg");// 获取节点
    var count = 0; // 统计留言条数
    dom_btn.onclick = function(){
        var dom_li = document.createElement("li");// 创建节点
        var li_msg = document.getElementsByTagName("li");// 通过节点获取内容
        console.log(li_msg);
        // 设置内容
        dom_li.innerHTML = dom_msg.value + "<span alt='删除'>x</span>";
        if(li_msg.length == 0){
            dom_ul.appendChild(dom_li); // 将留言添加到无序列表中
            count++; // 留言数目加1
        }
        else{
            dom_ul.insertBefore(dom_li,li_msg[0]);//将留言添加到无序列表已有的留言最前面
            count++;// 留言数目加1
        }
        dom_msg.value = ""; // 清空输入框内的留言
        var dom_span = document.getElementsByTagName("span");// 获取节点元素
        for(var i=0;i<dom_span.length;i++){
            dom_span[i].onclick = function(){
                dom_ul.removeChild(this.parentNode);// 删除li节点，this表示span节点
                count--;
            }
        }

    }
    function sum(){
        alert("你一共发布了"+count+"条留言！");
    }
</script>
</html>
View Code

 

实战案例五：

　　选项卡　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>选项卡</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        #box{
            width:600px;
            margin:100px auto;
            border:1px solid palegreen;
        }
        ul li{
            width:150px;
            height:40px;
            background-color: #cbf0ff;
            text-align: center;
            line-height: 40px;
            font-size:15px;
            float:left;

        }
         li.active{
            background-color: #8f83ff;
             font-size:18px;
        }
        p{
            width:600px;
            height:300px;
            background-color: #96ff27;
            line-height: 300px;
            text-align: center;
            font-size:30px;
            font-family: Arial;
            display: none;
        }
        p.active{
            background-color: #8f83ff;
            display:block;
            color: #86ff9c;
        }

    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">人物</a></li>
            <li><a href="#">风景</a></li>
            <li><a href="#">建筑</a></li>
        </ul>
        <p class="active">显示首页</p>
        <p>显示人物</p>
        <p>显示风景</p>
        <p>显示建筑</p>
    </div>
</body>
<script type="text/javascript">
    var box_li = document.getElementsByTagName("li");
    var p_content = document.getElementsByTagName("p");
    for(var i=0;i<box_li.length;i++){
        box_li[i].index = i;
        box_li[i].onclick = function(){
            for(var j=0;j<p_content.length;j++){
                box_li[j].className = "";
                p_content[j].className = "";
            }
            this.className = "active"; // this表示当前点击的li节点
            p_content[this.index].className = "active";
        }
    }
</script>
</html>
View Code

 

实战案例六：

　　仿淘宝搜索栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>仿淘宝搜索框</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .search{
            position:relative;
        }
        input{
            width:300px;
            height:30px;
            border:1px solid deepskyblue;
            border-radius:5px;
            margin-top:30px;
            margin-left:300px;
            display:block;
            outline: none;
        }
        label{
            /*margin-left:310px;*/
            top:4px;
            left:310px;
            font-size:16px;
            color: #8489ff;
            position:absolute;

        }
    </style>
</head>
<body>
    <div class="search">
        <input type="search" id="text" />
        <label for="txt" id="msg">你好，天猫</label>
    </div>
</body>
<script type="text/javascript">
    var dom_text = document.getElementById("text");
    var dom_msg = document.getElementById("msg");
    // 检测到用户输入时
    dom_text.oninput = function(){
        if(this.value==""){
            dom_msg.style = "block";
        }
        else{
            dom_msg.style.display = "none";
        }
    }
</script>
</html>
View Code

 

实战案例七：

　　匀速运动的”小广告“ --- 点击按钮 ，使”广告“运动起来，并设置为运动一定时间后消失（提示：使用定时器）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>匀速运动</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        button{
            width:80px;
            height:30px;
            border:1px solid cornflowerblue;
            border-radius:10px;
            background-color: transparent;
        }
        button:hover{
            background-color: #99a3ff;
        }
        #box{
            width:150px;
            height:100px;
            background-color: #acffe5;
            top:50px;
            left:0;
            position:absolute;
            text-align: center;
            line-height: 100px;
            color: #d693ff;
        }
    </style>
</head>
<body>
    <button id="btn_run">点击运动</button>
    <div id="box">
        我会匀速运动额！
    </div>

</body>
<script type="text/javascript">
    var dom_btn = document.getElementById("btn_run");
    var dom_box = document.getElementById("box");
    var count = 0;
    var time = null;
    dom_btn.onclick = function(){
        time = setInterval(function(){
            count += 1;
            if(count>1000){
                clearInterval(time);
                dom_box.style.display = "none";
            }
            dom_box.style.left = count+"px";
        },20)
    }
</script>
</html>
View Code

 

实战案例八：

　　10秒后关闭广告！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        body{
            width:100%;
            height:100%;
        }
        img{
            position:fixed;
        }
       #left{
            left:0;
        }
        #right{
            right:0;
        }
        p{
            text-align:center;
            font-size:20px;
        }
        span{
            color:firebrick;
        }
    </style>
</head>
<body>
    <img src="./images/beautiful.gif" id="left">
    <img src="./images/adver2.jpg" id="right">
    <p id="p1">广告倒计时<span>10s</span></p>
</body>
<script type="text/javascript">
    window.onload = function(){
        var dom_adver1 = document.getElementById("left");
        var dom_adver2 = document.getElementById("right");
        var dom_p = document.getElementById("p1");
        var count = 10;
        var time = null;
        time = setInterval(function() {
            if (count <= 1) {
                clearInterval(time);
                dom_adver1.style.display = "none";
                dom_adver2.style.display = "none";
            }
            count--;
            dom_p.innerHTML = "广告倒计时" +"<span>"+ count + "s"+"</span>";
        },1000)
    }

</script>
</html>
View Code

 

实战案例九：

　　页面滚动示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>滚动条</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        #wrap{
            margin:100px auto;
            width:512px;
            height:300px;
            border:1px solid yellowgreen;
            overflow: hidden;
            position:relative;
        }
        #wrap span{
            height:150px;
            width:100%;
            position:absolute;
        }
        .m_up{
            top:0;
        }
        .m_down{
            bottom:0;
        }
        #box{
            top:0;
            bottom:0;
            height:1200px;
            width:100%;
            position:absolute;
            background-color: #fecfff;
        }
        .p1{
            height:400px;
            background-color: #ffdabc;
            text-align: center;
            line-height: 400px;
            font-size:30px;
        }
        .p2{
            height:400px;
            background-color: #abff8a;
            text-align: center;
            line-height: 400px;
            font-size:30px;
        }
        .p3{
            height:400px;
            background-color: #78dbff;
            text-align: center;
            line-height: 400px;
            font-size:30px;
        }
    </style>
</head>
<body>

    <div id="wrap">
        <div id="box">
            <p class="p1" >我是第一页</p>
            <p class="p2" >我是第二页</p>
            <p class="p3" >我是第三页</p>
        </div>
        <span class="m_up" id="up"></span>
        <span class="m_down" id="down"></span>
    </div>

</body>
<script type="text/javascript">
    var dom_up = document.getElementById("up");
    var dom_down = document.getElementById("down");
    var dom_box = document.getElementById("box");
    var count = 0;
    var time = null;
    dom_up.onmouseover = function(){
        clearInterval(time);
        time = setInterval(function(){
            count -= 3;
            count > -900 ? dom_box.style.top = count+"px":clearInterval(time);
        },30)
    }
    dom_down.onmouseover = function(){
        clearInterval(time);
        time = setInterval(function(){
            count += 3;
            count < 0 ? dom_box.style.top = count+"px":clearInterval(time);
        },30)
    }
View Code

 

实战案例十：

　　轮播图动画（图片大小为1920*1080，可以换成自己喜欢的，如大小与我的不同，修改一下图片复位时时的数值，还有记得位置也要修改额！）　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        ul{
            list-style: none;
        }
       .box{
            width:1920px;
            height:1080px;
            margin:100px auto;
            overflow: hidden;
            position:relative;
        }
        .box ul{
            width:300%;
            position:absolute;
            top:0;
            left:0;
        }
        ul li{
            float:left;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="images/pic1.png"></li>
            <li><img src="images/pic2.jpg"></li>
            <li><img src="images/pic3.png"></li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    // 设置自动播放
    var dom_box = document.getElementsByClassName("box")[0];
    var dom_ul = dom_box.children[0];
    var num = 0;// 图片左侧运动的位置
    var timer = null;
    timer = setInterval(autoPlay,30);
    // 函数具体声明
    function autoPlay(){
        num -= 10; // 每30ms向左移动10px
        num < -3840 ? num=0:num; // 总共3张图片，每张图片宽度为1920，所以当第三张左侧贴到边框左侧时，图片位置复位
        dom_ul.style.left = num+"px"; // 不断无序列表修改位置
    }
    // 鼠标移到图片上，停止移动
    dom_box.onmouseover = function(){
        clearInterval(timer); // 清理定时器
    }
    dom_box.onmouseout = function(){
        timer = setInterval(autoPlay,40);// 重新设置定时器
    }

</script>
</html>
View Code

 

　　

 

未完，待续...

posted @ 2018-08-21 18:30  暮光微凉  阅读(763)  评论(0)  编辑  收藏  举报