JS小案例总结（JS基础案例）

最新推荐文章于 2023-08-23 16:15:12 发布

秃八哥

最新推荐文章于 2023-08-23 16:15:12 发布

阅读量8k

点赞数 23

分类专栏： JS 文章标签： js 前端 javascript html css

本文链接：https://blog.csdn.net/a_l_f_/article/details/107875098

版权

JS 专栏收录该内容

15 篇文章 8 订阅

订阅专栏

JS小案例总结

JS小案例总结

JS小案例总结

案例一：JS实现tab选项卡功能

描述：纯原生js实现选项卡切换的效果,即当鼠标移入某个选项卡区域时,显示不同的内容。

HTML代码如下：

<body>
    <div id="tabs">
        <div id="options">
            <span class="on">公告</span><span>规则</span><span>论坛</span><span>安全</span><span>公益</span>
        </div>
        <div id="contents">
            <ul style="display: block">
                <li><a href="">阿里苏宁发布"新三体"战略 打造未来十年格局</a></li>
                <li><a href="">高诚信会员无条件信任 200余万广告商品被处罚</a></li>
            </ul>
            <ul>
                <li><a href="">出售假冒商品规则变更 商品发布数量限制变更</a></li>
                <li><a href="">中国质造市场管理规范变更 淘宝网营销规则变更</a></li>
            </ul>
            <ul>
                <li><a href="">淘宝招募卖家志愿者 阿里推出兼职神器</a></li>
                <li><a href="">700家热风淘宝路 是赚钱还是骗子</a></li>
            </ul>
            <ul>
                <li><a href="">淘宝用户必备神器 卖家账户安全9守则</a></li>
                <li><a href="">支付宝实名认证信息 账户没钱也被骗？</a></li>
            </ul>
            <ul>
                <li><a href="">阿里联合公益计划启动 一图看懂联合公益计划</a></li>
                <li><a href="">公益宝贝卖家发票索取 公益机构淘宝开店攻略</a></li>
            </ul>
        </div>
    </div>

</body>

CSS代码如下：

<style>
        body{ background-color: #eee; font-size: 12px;}
        #tabs{ width: 300px; margin: 100px auto; background: #fff; }
        #tabs #options{ height: 30px; line-height: 30px }
        #tabs #options span { width: 60px; text-align: center; display: inline-block; }
        #tabs #options span.on { border-bottom: 2px solid orange; font-weight: bold; }
        #tabs #contents{ padding: 10px 0; }
        #tabs #contents li{ line-height: 20px; padding-left: 15px; }
        #tabs #contents ul{ display: none }
    </style>

JS代码如下：

  <script>
        var spans = document.getElementsByTagName("span");
        var uls = document.getElementsByTagName("ul");
        var len = spans.length;
        for (let i = 0; i < len; i++) {
            spans[i].onmouseover = function () {
                // 1）处理上面的options
                for (let j = 0; j < len; j++) {
                    spans[j].className = "";  // 本质还是操作属性节点
                }
                this.className = "on";
                this.style.cursor = "pointer";
                // 2）处理下面的ul
                for (let j = 0; j < len; j++) {
                    uls[j].style.display = "none";
                }
                uls[i].style.display = "block";
            }
        }
    </script>

案例二：JS实现盒子拖拽功能

描述：鼠标按下并移动，盒子跟着鼠标移动，鼠标离开盒子停止。
HTML代码如下：

<body>
    <div class="box">带我走</div>
</body>

CSS代码如下：

    <style>
        .box{ width: 200px; height: 200px; background-color: pink; position: absolute; top: 0;left: 0; color:#000;}
    </style>

JS代码如下：

<script>
        var box = document.querySelector(".box");
        var divX = 0; // div的x坐标
        var divY = 0; // div的y坐标
        var mouseX = 0; // 鼠标的x坐标
        var mouseY = 0; // 鼠标的y坐标
        box.onmousedown = function (e) {   // 鼠标按下事件
            // 先获取box的位置（相对于body）
            divX = this.offsetLeft;
            divY = this.offsetTop;
            // 再获取鼠标的位置（事件对象获取）
            mouseX = e.clientX;
            mouseY = e.clientY;
        }
        box.onmousemove = function(e){  // 鼠标移动事件
            var disX = e.clientX - mouseX; // 鼠标移动的x距离
            var disY = e.clientY - mouseY;// 鼠标移动的y距离
            // 鼠标移动的距离和盒子移动的距离是一样的
            box.style.left = disX + divX + "px";
            box.style.top = disY + divY + "px"
        }
        box.onmouseup = function (e) {  // 鼠标抬起事件

        }
    </script>-->

案例三：JS实现导航条吸顶效果

描述：当滚动滚动条使导航条到达顶部时，固定导航条的位置在顶部，再向上滚动时，导航条向下。
HTML代码如下：

<body>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<div id="nav">
    导航条
</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>
<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>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>
<p>内容填充</p>

CSS代码如下：

  <style type="text/css">
        #nav {
            background: pink;
<p>内容填充</p>
            height: 40px;
            line-height: 40px;
            width:100%;
        }

        h1 {
            height: 100px;
        }

        .fixed {
            position: fixed;
            top: 0px;
            width: 100%;
        }
    </style>

JS代码如下：

 <script>
        window.onload = function () {
            var nav = document.getElementById("nav");
            var ot = nav.offsetTop; // 导航条相对于body顶部的距离
            window.onscroll = function () {
                var t = document.documentElement.scrollTop;
                // console.log("t--->",t)
                // console.log("ot--->",ot)
                if (t >= ot){
                    nav.className = "fixed"
                }else{
                    nav.className = "";
                }
            }
        }
    </script>

案例四：JS实现图片懒加载结构

描述：当滚动到图片顶部的一部分时开始加载图片。
HTML代码如下:

<body>
<div class="wrapper">
    <h2>图片延迟加载</h2>
    <div class="box">
        <h1>内容填充</h1>
    </div>
    <ul>
        <li>
            <img data-src="images/v1.jpg" alt="" />
            <a href="">电影1</a>
        </li>
        <li>
            <img data-src="images/v2.jpg" alt="" />
            <a href="">电影2</a>
        </li>
        <li>
            <img data-src="images/v3.jpg" alt="" />
            <a href="">电影3</a>
        </li>
        <li>
            <img data-src="images/v4.jpg" alt="" />
            <a href="">电影4</a>
        </li>
        <li>
            <img data-src="images/v5.jpg" alt="" />
            <a href="">电影5</a>
        </li>
    </ul>

    <div class="box">
<h1>内容填充</h1>
    </div>
    <ul>
        <li>
            <img data-src="images/v6.jpg" alt="" />
            <a href="">电影6</a>
        </li>
        <li>
            <img data-src="images/v7.jpg" alt="" />
            <a href="">电影7</a>
        </li>
        <li>
            <img data-src="images/v8.jpg" alt="" />
            <a href="">电影8</a>
        </li>
        <li>
            <img data-src="images/v9.jpg" alt="" />
            <a href="">电影9</a>
        </li>
        <li>
            <img data-src="images/v10.jpg" alt="" />
            <a href="">电影10</a>
        </li>
    </ul>

    <div class="box">
<h1>内容填充</h1>
    </div>
    <ul>
        <li>
            <img data-src="images/v11.jpg" alt="" />
            <a href="">电影11</a>
        </li>
        <li>
            <img data-src="images/v12.jpg" alt="" />
            <a href="">电影12</a>
        </li>
        <li>
            <img data-src="images/v13.jpg" alt="" />
            <a href="">电影13</a>
        </li>
        <li>
            <img data-src="images/v14.jpg" alt="" />
            <a href="">电影14</a>
        </li>
        <li>
            <img data-src="images/v15.jpg" alt="" />
            <a href="">电影15</a>
        </li>
    </ul>
    <div class="box">
<h1>内容填充</h1>
    </div>
</div>
</body>

CSS代码如下：

<style type="text/css">
        * {margin:0; padding:0;}
        ul {list-style:none;}
        .wrapper {width:1000px; margin:100px auto 0;}
        .wrapper h2 {background:#ccc; height:40px; line-height:40px; text-align:center;}

        .box {border:1px solid #ccc; height:550px; margin:10px 0;}

        .wrapper ul {overflow:hidden; border:1px solid #ccc; padding:15px 0;}
        .wrapper li {float:left; width:199px;text-align:center;}
        .wrapper li a {display:block;}
    </style>

JS代码如下：

<script>
        window.onload = function () {
            var imgs = document.getElementsByTagName("img");
            // scroll事件的事件源可以是window也可以是document
            document.onscroll = function () {
                // 获取卷去的高度
                var st = document.documentElement.scrollTop;
                // 获取一屏的高度
                var ch = document.documentElement.clientHeight;
                for (let i = 0; i < imgs.length; i++) {
                    var ot = imgs[i].offsetTop;
                    if (st + ch >= ot+100){
                        // img元素冒出来了
                        imgs[i].src = imgs[i].getAttribute("data-src")
                    }
                }
            }
        }
    </script>

案例五：JS实现简易弹幕功能

描述：在输入框输入内容，实现弹幕功能。
HTML代码如下:

<body>
    <input type="text" id="words" />
    <input type="button" value="走你" id="btn" />
</body>

CSS代码如下：

<style>
        .newList{
            height: 100px;
            overflow: hidden;
            background-color: #ccc;
            position: relative;
        }
    </style>

JS代码如下：

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var words = document.getElementById("words").value;
        var span = document.createElement("span");
        span.innerHTML = words;
        document.getElementById("words").value = ""; // 清空之前的内容
        span.style.position = "absolute";
        span.style.left = "600px";
        span.style.top = Math.floor(document.documentElement.clientHeight * Math.random()) + "px";
        document.body.appendChild(span);
        // 让span动起来
        timer = setInterval(function () {
            span.style.left = parseInt(span.style.left) - 4 + "px";
            // 当span离开了浏览器，需要清空定时器，并销毁span
            if(parseInt(span.style.left) < -1*span.offsetWidth){
                // 删除span
                document.body.removeChild(span)
                // 清空定时器
                clearInterval(timer)
            }
        },50)
    }
</script>

案例六：JS实现自动滚动新闻列表

描述：让列表实现无缝滚动。
HTML代码如下：

<body>
    <div class="newList" id="newList1">
        <div class="newBody">
            <ul>
                <li>一切都是对象</li>
                <li>对象是属性的集合</li>
                <li>对象是由函数创建的</li>
                <li>this无处不在</li>
                <li>this是在调用时才确定</li>
                <li>一切都是对象</li>
                <li>对象是属性的集合</li>
                <li>对象是由函数创建的</li>
                <li>this无处不在</li>
                <li>this是在调用时才确定</li>
                <li>------------------------------------</li>
            </ul>
        </div>
    </div>
</body>

CSS代码如下：

 <style>
        .newList{
            height: 100px;
            overflow: hidden;
            background-color: #ccc;
            position: relative;
        }
    </style>

JS代码如下：

<script>
    // 思路：要给ul进行绝对定位，改变ul的top的值，top值越来越小，top是负值
    //     在定时器中不断改变top的值
    var newList = document.getElementById("newList1");
    var ul = newList.getElementsByTagName("ul")[0];
    var ulHeight = ul.offsetHeight; // ul的height+padding+border   说白了得到了ul的高度
    ul.style.position = "absolute";
    ul.style.top = "0";
    // 无缝滚动
    ul.innerHTML += ul.innerHTML; // 把新闻列表中的li复制一份  添加后ul中
    function go(){
        console.log(Math.abs(parseInt(ul.style.top)))
        let top = Math.abs(parseInt(ul.style.top));
        if (top >= ulHeight){  // 整个新闻列表向上滚动的距离 大于等于 新闻列表的高度
            ul.style.top = "0"; // 立即把top致成0  肉眼看不出来
        }else {
            ul.style.top = parseInt(ul.style.top) - 2 + "px";
        }
    }
    setInterval(go,50)
</script>

以上都是一些基础案例，入门练手！

秃八哥

关注

23
点赞
踩
205

收藏

觉得还不错? 一键收藏
打赏
5
评论
JS小案例总结（JS基础案例）

JS小案例总结JS小案例总结案例一：JS实现tab选项卡功能案例二：JS实现盒子拖拽功能案例三：JS实现导航条吸顶效果案例四：JS实现图片懒加载结构案例五：JS实现简易弹幕功能案例六：JS实现自动滚动新闻列表JS小案例总结案例一：JS实现tab选项卡功能描述：纯原生js实现选项卡切换的效果,即当鼠标移入某个选项卡区域时,显示不同的内容。HTML代码如下：<body> <div id="tabs"> <div id="options">
复制链接

扫一扫