javaScript项目案例

最新推荐文章于 2024-05-19 09:58:12 发布

小青头

最新推荐文章于 2024-05-19 09:58:12 发布

阅读量4.4w

点赞数 102

分类专栏：前端学习文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/xgy123xx/article/details/81089787

版权

前端学习专栏收录该内容

23 篇文章 6 订阅

订阅专栏

javaScript项目案例

储备知识，感觉玩dom主要是玩document这个类

1.Dom操作

在js中所有标签都属于节点。dom是一个倒着的树，树根为html标签

创建节点

createElement():传入标签类型,创建一个结点
示例：var oP = document.createElement('p');

获取节点

这些都是位于document的方法

函数	功能
getElementById()	通过标签id获得节点
getElementByClassName()	通过标签class名获得节点(注意：获得的class数组)
getElementByTagName()	通过标签类型获得节点(注意：获得的是标签数组)

常用的节点方法

这个都是节点的方法

函数	功能	示例
appendChild()	将传入节点加入到标签中	`oDiv.appendChild('oP');`
getAttribute()	获取标签属性	`oA.getAttribute('href');`
setAttribute()	设置标签属性	`oA.setAttribute('href','https://www.baidu.com');`
removeAttribute()	删除标签属性	`oA.removeAttribute('href');`
removeChild()	删除节点下的标签	`oDiv.removeChild(oP);`

设置节点内容

innerHTML:将内容解析HTML脚本写入标签内
示例：oP.innerHTML = i <strong>love</strong> you

innerText:将内容以文本的形式写入标签内
示例：oP.innerHTML = i love you

注意：innerHTML可以解析标签，innerText将内容原封不动的填入标签内

设置元素id:oP.id='op1';
设置类名class:oP.className='para1';

设置style属性

示例：oP.style.backgroundColor = 'blue';
注意：style属性内的用-表示的，在js中全部变为驼峰式写法，而且设置属性要用引号引起来

例如设置字体大小
在css中：font-size = 16px;
在js中：oP.style.fontSize = '16px';

2.项目案例

2.1用js在网页上写一个hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写一个hello world</title>
</head>
<body>

</body>
<script type="text/javascript">
    var oP = document.createElement('p');
    var body = document.getElementsByTagName('body');
    oP.innerHTML = 'hello world';
    body[0].appendChild(oP);
</script>
</html>

2.2模态框案例

其实，就是运用btn.onclick将单击事件的函数改为新的匿名函数。单击一次，就调用一次对象下面的onclick方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        html,body{
            height: 100%;
        }
        #wrapper{
            width:100%;
            height: 100%;
            background-color: rgba(0,0,0,.3);
        }
        #p1{
            position: relative;
            top:150px;
            width:400px;
            height: 200px;


            text-align: center;
            line-height: 200px;

            margin:auto;
            background-color: white;
        }
        #span1{
            position: absolute;
            right: 0;
            top:0;

            width: 30px;
            height: 30px;

            font-size: 20px;
            line-height: 30px;
            text-align: center;

            color: #ffffff;
            background-color: red;

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

        <button id="btn">点我一下</button>
</body>
<script type="text/javascript">
    /*思路：
    * 1.创建一个div盒子，设置好属性
    * 2.添加p标签和span标签，分别设置好位置，分别插入到div标签里
    * 3.定义button单击事件
    * */


    var oDiv = document.createElement('div'); //创建一个盒子
    var oP = document.createElement('p');
    var oSpan = document.createElement('span');
    var btn = document.getElementById('btn');
    var body = document.getElementsByTagName('body');

    btn.onclick = function () {


        oP.innerText = 'This is True music';
        oSpan.innerText = 'X';

        oDiv.appendChild(oP);
        oP.appendChild(oSpan);

        oDiv.id = 'wrapper';
        oP.id = 'p1';
        oSpan.id = 'span1';

        body[0].insertBefore(oDiv,btn);
    }

    oSpan.onclick = function(){
        body[0].removeChild(oDiv);
    }


</script>
</html>

2.3点击有惊喜

这个例子，主要就是用计数器记录点击次数，每点击一次标签，就会调用一次该函数，计数器加1，从而控制标签颜色和文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击有惊喜呦</title>
    <style type="text/css">
        *{
            padding:0;
            margin: 0;
        }
        #surprised{
            width:400px;
            height: 200px;

            font-size: 30px;
            text-align: center;
            line-height: 200px;

            margin: 20px auto;
            color: white;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="surprised">
        点击有惊喜呦！！！
    </div>
</body>
<script type="text/javascript">
    var oDiv = document.getElementById('surprised');
    var clickTimer = 0;
    oDiv.onclick = function () {
        switch(clickTimer % 4){
            case 1:
                this.style.backgroundColor = 'green'; //this在这里就是指当点击事件的对象oDiv
                this.innerText = '再次点击试试';
                break;
            case 2:
                this.style.backgroundColor = 'orange';
                this.innerText = '哈哈，骗你的';
                break;
            case 3:
                this.style.backgroundColor = 'red';
                this.innerText = '真的没了！！！';
                break;
            default:
                this.style.backgroundColor = 'blue';
                this.innerText = '点击有惊喜呦！！！';
        }
        clickTimer++;
    }
</script>
</html>

2.4制作一个简易留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style type="text/css">
    </style>

</head>
<body>
<h1>简易留言板</h1>
<div class="wrapper">
    <ul id="words"></ul>
</div>
<textarea id="msg"></textarea>
<button id="btn1">留言</button>
<button id="btn2" onclick="sum()">统计</button>
</body>
<script type="text/javascript">
    //ul 是用来存储留言记录
    var ul = document.getElementById('words');
    var msg = document.getElementById('msg');
    var btn1 = document.getElementById('btn1');
    var btn2 = document.getElementById('btn2');
    var liCount = 0; //用来记录留言数目的
    btn1.onclick = function () {
        if(!msg.value){
            alert('留言板里没有内容')
        }else{
            /*将留言插入顶部的具体方法
            *1.判断ul中有无元素，没有则使用append，有则使用insertbefore
            * 2.插入信息同时插入一个span标签，用来设置关闭按钮
            * */
            var li = document.createElement('li');
            li.innerHTML = msg.value + '&nbsp;&nbsp;<span>X</span>';
            if(liCount == 0)
            {
                ul.appendChild(li);
                liCount++;
            }else{
                ul.insertBefore(li,ul.childNodes[0]);
                liCount++;
            }
            msg.value = '';
        }
        oSpans = document.getElementsByTagName('span');
        for(var i = 0;i < oSpans.length;i++){
            oSpans[i].onclick = function(){
                ul.removeChild(this.parentNode);
                liCount--;
            }
        }

    };
    function sum() {
        alert('一共有'+liCount+'条信息');
    }


</script>
</html>

通过这个简易留言板例子，
第一，不要取消margin，padding，否则h1标题没有内边距，很难看；
第二，设置span标签点击事件必须在btn1按钮内，因为js里面代码是从上向下执行的，btn.onclick就是添加调用方法；如果直接把span这段代码放在下面，因为刚开始没有spans标签，也就没有执行这段代码。要是放在btn的onclick里面，每次调用时，就会自动给每个span添加一个调用方法

2.5制作选项卡

这个例子主要是用了，将三个p标签隐藏起来，只显示含active类的标签，通过js点击事件，切换p标签之间的显隐达到目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100%;
        }
        .wrapper{
            width: 600px;
            border: 1px solid red;
            margin: 30px auto;
        }
        ul{
            list-style: none;
            overflow: hidden;   /*注意要清除浮动*/
        }
        ul a{
            display: block;
            text-decoration: none;

            width:200px;
            height: 50px;

            text-align: center;
            line-height: 50px;

            color: black;
        }
        ul li{
            float: left;
            background-color: rgba(0,0,0,.3);
        }
        p{
            width: 600px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            display: none;
        }
        ul li.active{
            background-color: #ffffff;
        }
        p.active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li class="active"><a href="#" >首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">热卖</a></li>
        </ul>
        <p id="home" class="active">首页内容</p>
        <p id="news">新闻内容</p>
        <p id="hotPurchase">热卖内容</p>
    </div>
</body>
<script type="text/javascript">
    var lis = document.getElementsByTagName('li');
    var ps = document.getElementsByTagName('p');
    for(var i = 0;i < lis.length;i++){
        lis[i].index = i;   //这个用来记录每个标签的遍历位置，不用this，这里this指代的应该是window
        lis[i].onclick = function () {
            /*思路
            * 1.清除所有标签上的active
            * 2.将单击的li和p标签都添加active属性
            * */
            //清空class
            for(var j = 0;j < lis.length;j++){
                lis[j].className = '';
                ps[j].className = '';
            }
            //注意：这有个坑，不能跳！！！不能用遍历的i，要用this下的属性index
            this.className = 'active';
            ps[this.index].className = 'active';
        }
    }
</script>
</html>

这里要注意，在378行不能用i来代表标签的索引，(因为i的值在不断变化,遍历结束时，这里i最终值为4，即当触发单击事件时，获取的i的值为4，而不是当初遍历中i的值)。他们得到i都是引用哦，不是一个纯数字。

2.6淘宝搜索框制作

这个例子主要用到了input和label两个标签，以及js的oninput来实现的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝搜索框</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .wrapper{
            width: 800px;
            margin: 30px auto;
        }
        ul{
            list-style: none;
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 150px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #fff;
        }
        li a{
            text-decoration: none;
            color: red;
        }
        li.active{
            background-color: red;

        }
        li.active a{
            color: #ffffff;
        }

        .search{
            margin: 20px 0;
            position: relative;
        }
        #txt{
            display: block;
            outline: none;
            width: 800px;
            height: 50px;
            position: absolute;
            border:3px solid orange;
            border-radius: 10px;
        }
        #lab{
            display: block;
            position: absolute;
            top:15px;
            left:30px;
            font-size: 20px;
            color: rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li class="active"><a href="#">宝贝</a></li>
            <li><a href="#">天猫</a></li>
            <li><a href="#">店铺</a></li>
        </ul>
        <div class="search">
            <input type="text" id="txt">
            <label for="txt" id="lab">请输入要购买的商品</label>
        </div>
    </div>
</body>
<script type="text/javascript">
    var lis = document.getElementsByTagName('li');
    for(var i = 0;i < lis.length;i++){
        lis[i].onclick = function () {
            for(var j = 0;j < lis.length;j++){
                lis[j].className = '';
            }
            this.className = 'active';

        }
    }
    
    var txt = document.getElementById('txt');
    var lab = document.getElementById('lab');
    //oninput函数功能是，当点击输入框时触发的事件
    txt.oninput = function () {
        if(this.value == ''){  //这里this指代的是txt
            lab.style.display = 'block';
        }
        else
        {
            lab.style.display = 'none';
        }
    }

</script>
</html>

刚开始，测试时候，发现输入框无法输入；后来仔细检查了一遍，发现his.value == ''写成了his.value = ‘’，导致每次输入时，都会给输入框自动赋值空字符

2.7动态时间制作

这里主要用了setInterval定时器函数,每隔一秒执行一次函数，这个函数作用是获得最新时间，写入p标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态时间制作</title>
</head>
<body>

</body>
<script type="text/javascript">
    var oP = document.createElement('p');
    var body = document.getElementsByTagName('body');
    body[0].appendChild(oP);
    //创建一个时间对象，得到年月日，时分秒

    setInterval(function(){
        var myDate = new Date();
        var weekday = '天一二三四五六';
        var y = myDate.getFullYear();
        var m = myDate.getMonth() + 1;
        var d = myDate.getDate();  // 获取当前是每个月的第几天
        var wday = myDate.getDay();  // 周天为0,周一为1,周二为2.以此类推;
        var h = myDate.getHours();
        var minu =myDate.getMinutes();
        var s = myDate.getSeconds();
        oP.innerHTML = '今天是 '+ y +' 年 '+m+' 月 '+d+' 日  星期'+ weekday[wday] +' 现在时间：' + h +':'+twoNum(minu)+':'+twoNum(s);
    },1000);

    function twoNum(n){
        return n > 9  ? n:'0'+n;
    }
    
</script>
</html>

注意：获得时间的操作必须写在函数内，否则该变量的值不会更新，只会一直重复写入相同的值
三元表达式
return n > 9 ? n:'0'+n;
等同于

if(n < 9)
{
    return '0'+ n;
}
else {
    return n;
}

2.8匀速运动

通过定时器函数setInterval函数和清除定时器函数clearInterval。两个函数实现的，主要思想时，每执行一次定时器，改变一次left数字达到看上去小方块在移动的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匀速运动案例</title>
    <style type="text/css">
        #diamond{
            width:100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top:50px;
            }

    </style>
</head>
<body>
<button id="btn">运动吧！小方块</button>
<div id="diamond"></div>
</body>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    var dia = document.getElementById('diamond');
    var count = 0;
    btn.onclick = function () {
        time = setInterval(function(){
            //注意这里要带单位px
            count += 10;
            if(count % 800 == 0){
                count = 0;
                clearInterval(time);  //运动到800px关闭定时器
            }
            dia.style.left = count + 'px';
    },10)
    };
</script>
</html>

注意：clearInterval清除定时器函数必须要接受一个值，这个值正是定时器返回的值，count += 10这行代码可以通过改变右值改变小方块运动速度。

2.9设置五秒关闭广告

这个例子主要用了定时器，和固定定位相关的知识，5s秒后自动关闭广告。window.onload这个函数的功能是，加载页面时自动运行相应的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置5s关闭广告</title>
    <style type="text/css">
        img{
           width: 200px;
            height: 800px;
            position: fixed;
            top: 0;
        }
        #pict1{
            right: 0;
        }
        #pict2{
            left: 0;
        }
        p{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <img src="ad-one.jpg" alt=""  id="pict1">
        <img src="ad-two.jpg" alt=""  id="pict2">
    </div>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
</body>
<script type="text/javascript">
    window.onload = function(){
        var imgs = document.getElementsByTagName('img');
        setTimeout(function () {
            imgs[0].style.display = 'none';
            imgs[1].style.display = 'none';
        },5000)
    };

</script>
</html>

难度不大，之后写了个升级版

2.10设置五秒关闭广告(升级版)

设置一个定时器，在网页上显示倒计时后，再显示关闭x，设定单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置5s关闭广告</title>
    <style type="text/css">
        img{
           width: 200px;
            height: 800px;
            position: fixed;
            top: 0;
        }
        /*.pict{*/
            /*position: relative;*/
        /*}*/
        .pict1{
            top: 0;
            left: 0;
        }
        .pict2{
            top: 0;
            right: 0;
        }
        p{
            text-align: center;
            font-size: 30px;
        }
        span{
            position: fixed;
            display: block;
            width: 50px;
            height: 50px;
            text-align: center;
            ;line-height: 50px;
            background-color:rgba(0,0,0,.5);
            z-index: 10;
            color: #ffffff;
        }
        .span2{
            top:750px;
            right: 150px;
        }
        .span1{
            top:750px;
            left: 150px;
        }
    </style>
</head>
<body>
        <div class="pict">
            <span class="span1"></span>
            <img class="pict1" src="ad-one.jpg" alt="">
        </div>
        <div class="pict">
            <span class="span2"></span>
            <img class="pict2" src="ad-two.jpg" alt="">
        </div>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
        <p>性感美女，在线发牌</p>
</body>
<script type="text/javascript">
    window.onload = function(){
        var picts = document.getElementsByClassName('pict');
        var spans = document.getElementsByTagName('span');
        var count = 5;
        time = setInterval(function(){
            if(count == 0){
                for(var i = 0;i < spans.length;i++)
                {
                    spans[i].index = i;
                    spans[i].innerText = 'X';
                    spans[i].onclick = function(){
                        picts[this.index].style.display = 'none';
                    };
                }
                clearInterval(time);
            }
            else{
                spans[0].innerText = count;
                spans[1].innerText = count;
                count -= 1;
            }

        },1000);
    };

</script>
</html>

这里主要注意的地方是，在for循环中如果要设置单击事件，不要用i做索引,所有单击事件中的i是for循环后的值，而不是每次循环的值。

2.11小米滚动

这里主要用overflow用来隐藏图片超过盒子部分。然后通过定位，控制top坐标数值，使其在盒子里垂直移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米滚动</title>
    <style type="text/css">
        #box{
            position: relative;
            margin: 50px auto;
            width: 890px;
            height: 400px;
            overflow: hidden;
        }
        img{
            position: absolute;
        }
        span{
            position: absolute;
            display: block;
            width: 890px;
            height: 200px;
            background-color: transparent;
        }
        #upSpan{
            top:0;
        }
        #downSpan{
            bottom:0;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="ad-one.jpg" alt="" id="img1">
        <span id="upSpan"></span>
        <span id="downSpan"></span>
    </div>
</body>
<script type="text/javascript">
    var downSpan = document.getElementById('downSpan');
    var upSpan = document.getElementById('upSpan');
    var img = document.getElementById('img1');
    var count = 0;
    var time = null;  //注意time要声明变量
    //这个upSpan标签在图片上，让图片向上滚动，top越来越小
    upSpan.onmouseover = function(){
            clearInterval(time);
            time = setInterval(
             function(){
                 count -= 3;//  1334-400  top比最低端的-934px大，就可以继续减小，直到底部
                 count >= -934 ? img.style.top = count + 'px':clearInterval(time);
             }
            ,30)
    };
    //这个downSpan标签在图片下面，让图片向下滚动，top越来越大
    downSpan.onmouseover = function(){
        clearInterval(time);    //注意，这里必须要清空定时器，否则两个定时器一起运行会引起冲突
        time = setInterval(
         function(){
             count += 3;
             //向下滚，top数值越来越大，直到最顶端0
             count < 0 ? img.style.top = count + 'px':clearInterval(time);
         }
        ,30)
    };

</script>
</html>

这里注意的地方是，每次调用onmouseover时，要清除之前的定时器，防止干扰下次操作。而且图片移动到顶端和低端，要注意好终止坐标的位置。

2.12无缝轮播图

这个案例主要运用盒子和ul之间定位，通过定时器，让标签left坐标不断减小，达到ul向左移动的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝轮播图</title>
    <style type="text/css">
        *{
            padding:0;
            margin: 0;
        }
        .wrapper{
            position: relative;
            width: 800px;
            height: 300px;
            margin:40px auto;
            background-color: red;
            overflow: hidden;
        }
        ul{
            width: 200%;
            position: absolute;
            top:0;
            left: 0;
            list-style: none;
        }
        ul li{
            float: left;
        }
        img{
            height: 300px;
            width: 400px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <ul id="picts">
        <li><img src="ad-one.jpg" alt=""></li>
        <li><img src="ad-two.jpg" alt=""></li>
        <li><img src="ad-three.jpg" alt=""></li>
        <li><img src="ad-four.jpg" alt=""></li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var ul = document.getElementById('picts');
    var count = 0;
    var time = null;
    function pictureMove(){
        count -= 1;
        if(count <= -800){
            count = 0;
        }
        ul.style.left = count + 'px';
    }
    time = setInterval(pictureMove,10);

    ul.onmousemove = function(){
        clearInterval(time);
    };
    ul.onmouseout = function () {
        time = setInterval(pictureMove,10);
    }
</script>
</html>

这里有几个注意点是，ul标签宽度肯定要比盒子宽，这样可以使里面所有li标签浮动时，不会有li标签被挤到下一层去。onmousemove效果是鼠标移动到标签上执行的函数，onmouseout效果是鼠标移除标签时执行的函数。这里还要注意一点是，标签移到最右端要有个判断，让其坐标归0，从头开始再次移动

小青头

关注

102
点赞
踩
732

收藏

觉得还不错? 一键收藏
11
评论
javaScript项目案例

javaScript项目案例1.Dom操作2.项目案例javaScript项目案例储备知识，感觉玩dom主要是玩document这个类1.Dom操作在js中所有标签都属于节点。dom是一个倒着的树，树根为html标签创建节点 createElement():传入标签类型,创建一个结点示例：var oP = document.createElement...
复制链接

扫一扫