JS-小Demo - 掘金

Tab选项卡

要求：

选项卡由英雄联盟，DOTA，风暴英雄，300英雄四块组成
未选择时，默认选中第一个标签页
选择其中一项时，下方跳出对应的文字介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}
.header{
    display: flex;
    width: 500px;
}
.header li{
    flex:1;
    height: 50px;
    line-height: 50px;
    text-align: center;
    flex:1 ;
    border: 1px solid black;
}
.box{
    position: relative;
}
.box li{
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 200px;
    background-color:blanchedalmond;
    padding: 50px;
    display: none;
}
.header .active{
    background-color:aquamarine;
}
.box .active{
    display: block;
}
</style>
<body>
    <ul class="header">
        <li class="active">英雄联盟</li>
        <li>DOTA</li>
        <li>风暴英雄</li>
        <li>300英雄</li>
    </ul>
    //对每一个进行的文字介绍
<ul class="box">
    <li class="active">在今年瑞士轮赛事中，作为LPL一号种子的JDG表现可谓相当抢眼，以3:0的优异成绩率先取得晋级资格。LNG则是LPL赛区第二支晋级八强赛的队伍，最终以2：1的比分成功晋级；WBG与BLG则在瑞士轮最后一日的比赛中，分别战胜了FNC以及G2成功晋级.</li>
    <li>《DotA》（Defense of the Ancients），可以译作守护古树、守护遗迹、远古遗迹守卫， 是由暴雪公司出品即时战略游戏《魔兽争霸3》的一款多人即时对战、自定义地图，可支持10个人同时连线游戏，是暴雪公司官方认可的魔兽争霸的RPG地图。</li>
    <li>在今年的9月20日，《风暴英雄》也收到了其他的修复补丁。在此之前，该游戏的更新间隔通常是在2-6个月之间。而这次的补丁，是自游戏进入维护模式以来，第一次在一个月的间隔时间内发布的补丁。这也进一步证明了暴雪娱乐公司对《风暴英雄》的重视程度。</li>
    <li>《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。</li>
</ul>

    <script>
        var oHeaderItems = document.querySelectorAll(".header li")
        var oBoxItems = document.querySelectorAll(".box li")

        for(var i=0;i<oHeaderItems.length;i++){
            oHeaderItems[i].dataset.index = i
            oHeaderItems[i].onclick = handler
        }
        function handler(){
            var index = this.dataset.index
            for(var m=0;m<oHeaderItems.length;m++){
                oHeaderItems[m].classList.remove("active")
                oBoxItems[m].classList.remove("active")
            }
            oHeaderItems[index].classList.add("active")
            oBoxItems[index].classList.add("active")
        }
    </script>
</body>
</html>

效果如下

返回顶部按钮

要求：

点击按钮后可以由快到慢的返回顶部
处于顶部位置时按钮消失
按钮位于页面的右下方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.header{
    height: 1000px;

}
.top{
    width: 100%;
    height:200px
}
.weixianshi{
    position: ixed;
    right: 10px;
    bottom: 40px;
    height: 40px;
    width: 80px;
    border-radius:100px ;
    display: none;
}
.xianshi{
    position: fixed;
    display: block;
    right: 30px;
    bottom:100px;
    width: 80px;
    height: 40px;
}

</style>
<body>
    <div class="header"></div>
    <div class="top"></div>
    <button id="btn"class="weixianshi">返回顶部</button>
    <script>
        window.onscroll = function () {
            console.log(document.documentElement.scrollTop || document.body.scrollTop)
            if ((document.documentElement.scrollTop || document.body.scrollTop) > 200) //判断页面的滚动距离
             {
                btn.className = "xianshi" // 当距离大于200时，将它的classname赋成item2
            }else{
                btn.className = "weixianshi" // 当距离小于200时，它的classname不变
            }
        }

        btn.onclick=function toTop() {
            timer = setInterval( function()   //定时器，判断滚动条的滚动高度
            {       
                var scrollTop = document.documentElement.scrollTop          
                var speed = Math.floor(-scrollTop / 10); //此处根据页面的滚动位置以改变它的速度
                document.documentElement.scrollTop = scrollTop + speed;
                if(scrollTop == 0){        //清除定时器
                    clearInterval(timer);
                }
            }, 10);
        }
    </script>
</body>    
</html>

随机点名

要求：

分为上下两个区域，上方为显示区域，下方为控制区域
显示区域显示工号+姓名，控制区域有开始和结束两个按钮
点击开始按钮，显示区域里的内容开始滚动，点击结束按钮滚动结束
同时随机显示一位成员的工号+姓名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        h2 {
            text-align: center;
        }
 
        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 20px;
            line-height: 40px;
        }
 
        .qs {
            width: 450px;
            height: 40px;
            color:black;
        }
 
        .btns {
            text-align: center;
        }
 
        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
        
        .restart {
            display: block;
            width: 120px;
            height: 35px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>幸运嘉宾：</span>
        <div class="qs">工号+姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>
        <!-- <button class="restart">重置</button> -->
    <script>
        let arr = ['01010104廖学长','01010105谭耀','02010107李工']
        let timerId = 0
        let random = 0
        const start = document.querySelector('.start')
      
        const qs = document.querySelector('.qs')
        start.addEventListener('click', function () {
            timeId = setInterval(function() {
                random = parseInt(Math.random() * arr.length)
                qs.innerHTML = arr[random]
            }, 35)
        })
 
        const end = document.querySelector('.end')
        end.addEventListener('click', function() {
            clearInterval(timeId)
            arr.splice(random, 1)
            if(arr.length === 0) {
                start.disabled = true
                end.disabled = true
            }
        })
 
        
        // const restart = document.querySelector('.restart')
        // restart.addEventListener('click', function () {
        //     arr = ['01010104廖学长','01010105谭耀','02010107李工']
           
        //     start.disabled = false
        //     end.disabled = false
        // })
        
 
    </script>
</body>
</html>

刻度时钟和电子时钟

刻度时钟

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* 刻度时钟 */
  *{
    margin: 0;
    padding:0;
  }
  ul{
    list-style: none;
  }
  .clock{
    width: 240px;
    height: 240px;
    border: 3px solid black;
    border-radius: 50%;
    margin: 100px auto;
  }
  /* 表盘 */
  .clock ul{
     width: 100%;
     height:100%;
     position: relative;
  }
  .clock ul li{
     width:2px;
     height:6px;
     background-color: black;
     left: 50%;
     position: absolute;
     top:0;
     transform-origin: center 120px;
     /* 旋转以刻度为中心 */
  }
  #hour{
    width: 5px;
    height: 40px;
    background-color: black;
    position:absolute;
    left: 50%;
    top:50%;
    margin: -46px 0 0 -3px;
    transform-origin: center bottom;
  }
  #minu{
    width: 4px;
    height:65px;
    
    background-color: black;
    position:absolute;
    left: 50%;
    top:50%;
    margin: -70px 0 0 -2px;
    /* 分针位置 */
    transform-origin: center bottom;

  }
  #second{
    width: 3px;
    height: 110px;
    background-color: black;
    position:absolute;
    left: 50%;
    top:50%;
    margin: -110px 0 0 -1px;
    transform-origin: center bottom;
  }
  #ball{
    width: 15px;
    height: 15px;
    background-color: black;
    position:absolute;
    left: 50%;
    top:50%;
    border-radius: 50%;
    transform:translate(-50%,-50%)
  }
 
</style>
<body>
  <!-- 刻度时钟 -->
  <div class="clock">
    <ul>
      <div id="hour"></div>
      <div id="minu"></div>
      <di id="second"></di>
      <div id="ball"></div>
    </ul>
  </div>
 <script>
  //  刻度时钟的javascript
    var ul = document.querySelector("ul"); 
    //获取ul标签
    var hour = document.querySelector("#hour"); 
    //获取时针
    var minu = document.querySelector("#minu"); 
    var second = document.querySelector("#second"); 

for(var i=0;i<60;i++){     
    var li = document.createElement("li"); 
    li.style.transform = "rotate(" + i*6 + "deg)"; 
   
    if(i%5==0){
        li.style.height = "18px";
    }
    ul.appendChild(li);
}

function run(){         
    var date = new Date();
    var iH = date.getHours();     
    //找到当地的时间 
    var iM = date.getMinutes();  
    var iS = date.getSeconds();     

    hour.style.transform = "rotate(" + (iH*30 + iM/2) + "deg)";
    minu.style.transform = "rotate(" + iM*6 + "deg)";
    second.style.transform = "rotate(" + iS*6 + "deg)";
    
}
run();

setInterval(run,1000);
</script>
</body>
</html>

电子时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .time{
      width: 300px;
      height: 60px;
      margin:0px auto;
      line-height: 60px;
      text-align: center;
      color: black;
      
  }
</style>
<body>
    <div id="time" class="time"></div>
    <script>
        setInterval(function(){
            var d = new Date();
            var time = document.getElementById('time');
            //获取当前区域时间并转成字符串
            time.innerHTML = d.toLocaleString();
        },1000);
    </script>
</body>
</html>

发送验证码

思路：对提交按钮设置一个函数，绑定后按钮不可点击。点击发送按钮后开始进行倒计时60s，提交按钮属性从disabled变成false可以进行点击。当验证码为0505时弹窗显示提交成功否则为失败。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <form action="">
            <input type="text" id="yzm" placeholder="请输入验证码">
            <input type="button" value="发送" id="fs">
            <input type="button" value="提交" id="tj" disabled>
        </form>
    </div>
    <script>
        //获取节点
var fs = document.getElementById("fs")
var tj = document.getElementById("tj")

var wc = 0

//给发送按钮绑定函数
fs.onclick = function(){
    tj.disabled = false
    fs.disabled = true

    fs.value = 60+"s"
    //创建60s倒计时的计时器
    var i = 60
    var fsTime = setInterval(function(){
        fs.value = i+"s"
        i--
        if(i == 0){
            clearInterval(fsTime)
            fs.disabled = false
            fs.value = "发送"
        }
        if(wc){
            clearInterval(fsTime)
            fs.value = "发送"
        }
    },1000)
}

//为提交按钮绑定单击响应函数
tj.onclick = function(){
    if(!(yzm.value == "0505")){
        alert("验证失败")
    }else{
        alert("提交成功")
        fs.value = "发送"
        wc = 1
    }
}
    </script>

</body>
</html>

滚动弹幕

要求：

页面上漂浮大小不一，颜色不一，从左向右滚动的弹幕
底部中间有一个发送功能，可以发送弹幕
底部的发送部分可以收起和弹出

思路：

设置一个输入文本内容的文本框和两个按钮，分别为发送和收起
对两个按钮分别通过display的改变来改变他的收起和弹出
给文字加上颜色，计时器和滚动

HTML 部分

<body>
<div class="box"></div>

<div class="bottom">
    <div id="first">
        <input type="text" placeholder="请输入....." id="">
        <button id="sent" >发送</button>
        <button id="close">收起</button>
    </div>
    <div id="second">
        <button id="open"> ^ </button>
    </div>
</div>

CSS 部分

 <style>
        .box{
            height: 700px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        .bottom{
            position: fixed;
            bottom: 50px;
            left: 45%;
            /* 让下面的部分居中 */
            text-align: center;
        }
        .first{
            display: none;
        }
        .first{
            position: fixed;
            bottom: 20px;
            left: 40px;
        }
        .second button{
            width: 60px;
            height:20px;
            font-size: 24px;
        }

    </style>

JS部分

<script>
    window.onload = function(){
    var open=document.getElementById("second")
    var first=document.getElementById("first")
    open.onclick=function(){
        first.style.display="block"
        open.style.display="none"
    }
    var close=document.getElementById("close")
    close.onclick=function(){
        first.style.display="none"
        open.style.display="block"
    }
    
    var box=document.querySelector(".box")
    var input=document.querySelector("input")
    var sent=document.querySelector("#sent")
    
        sent.onclick = function() {
           var span=document.createElement("span")
            box.appendChild(span);
            span.innerHTML=input.value
            input.value=" "
            //设置随机颜色
            var top=parseInt(Math.random()*800);
            var Red=parseInt(Math.random()*256);
            var Green parseInt(Math.random()*256);
            var Blue = parseInt(Math.random()*256);
            var color = 'rgb(' + Red + ',' + Green + ',' + Blue + ')';
            top = top < 0 ? 0 : top;
	        span.style.position = 'absolute';
            span.style.top = top + 'px';
            span.style.color = color;
            span.style.left = "1270px";
            span.style.fontSize =Math.random()*30+"px"
           
            setInterval(function(){
            var spanArray = box.childNodes;
            for(var i = 0 ;spanArray.length;i++{
            spanArray[i].style.leftparseInt(spanArray[i].style.left) -1 +'px';
                    if(parseInt(spanArray[i].style.left) < -500 ) {
    spanArray[i].style.left = 1270 + 'px';
                    }
                }
            },10)
        }
    }
</script>

效果如下：

联想截图_20231126155155.png

轮播图

要求

鼠标不在图片上时，自动轮播，左右箭头不会显示；鼠标放在上方时，停止轮播，左右箭头会显示
图片切换时，下方小圆点也会跟着切换
点击左右箭头可以进行图片的左右切换
图片上需要有文字，会随图片切换一起进行切换

HTML

<div class="container">
    <ul class="img_box">
        <li><img src="轮播1.jpg" alt=""><P>第一张图片是个loopy</P></li>
        <li><img src="./轮播2.jpg" alt=""></li>
        <li><img src="./轮播4.jpg" alt=""></li>
        <li><img src="./轮播3.jpg" alt=""></li>
        <li><img src="./轮播1.jpg" alt=""></li>
        <li><img src="./轮播2.jpg" alt=""></li>
    </ul>

    <!-- 中间的小圆点 -->
    <ul class="code">
        <li data-index="0"></li>
        <li data-index="1"></li>
        <li data-index="2"></li>
        <li data-index="3"></li>
    </ul>
    <!-- 左右箭头 -->
    <div class="left_btn">&lt;</div>
    <div class="right_btn">&gt;</div>
</div>

CSS样式

<style>
 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    position: relative;
    margin: 100px;
    width: 400px;
    height: 250px;
    overflow: hidden;  
}

ul.img_box {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-400px);
}

.img_box li {
    float: left;
    list-style: none;
}

/* 图片大小 */
.img_box li img {
    width: 400px;
}

/* 小圆点 */
.code {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.code li {
    list-style: none;
    /* 转换为行内块元素 -- 一行显示 */
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color:antiquewhite;
    margin-right: 3px;
    border-radius: 5px;
    transition: all 0.4s;
}

/* 左箭头 */
.left_btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 25px;
    height: 30px;
    background-color: #fff;
    line-height: 30px;
    padding-left: 3px;
    /* 将鼠标样式改为小手 */
    cursor: pointer;
}

.right_btn {
    position: absolute;
    top: 50%;
    left: 375px; 
    transform: translateY(-50%);
    width: 25px;
    height: 30px;
    background-color: #fff;
    line-height: 30px;
    padding-left: 5px;
    cursor: pointer;
}
/* 图片的小图点样式 */
.code .cur {
    background-color:yellow!important;
    transform: scale(1.3);
}
</style>

JS 部分


<script>
    let img_box = document.querySelector('.img_box');
    let imgs = document.querySelectorAll('img');
    let sel_box = document.querySelector('.code')
    let lis = sel_box.querySelectorAll('li');
    let left_btn = document.querySelector('.left_btn');
    let right_btn = document.querySelector('.right_btn');
    // 记录第几张图片
    let index = 0;  
    let timer = null;  // 定时器
    let imgContainerW = img_box.offsetWidth
    img_box.style.width = imgContainerW * imgs.length + 'px'
    // 设置容器位置
    img_box.style.left = 0 + 'px';

    // 设置第一个小图片作为当前按钮
    lis[0].className = 'cur'
    function swapImg() {
    // 修改img_box的定位，往左偏移 index * imgContainerW
    img_box.style.left = -index * imgContainerW + 'px';
    // 排他算法
    for (let i = 0; i < lis.length; i++) {
        lis[i].className = '';
    }
    // 修改小图标的样式
    lis[index].className = 'cur'
}

function swapFormat() {
    index++;  
    if (index >= 4) {
        index = 4;  
        img_box.style.transition = 'all, linear, 1s';
        img_box.style.left = -index * imgContainerW + 'px';
        for (let i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        // 修改小图标的样式
        lis[0].className = 'cur'
        setTimeout(function() {
            index = 0;  
            img_box.style.transition = '';  
            swapImg();
        }, 1500)
    } else {
        img_box.style.transition = 'all, linear, 1.5s';
        swapImg();
    }
}

// 添加定时器，调用函数
timer = setInterval(swapFormat, 3000)
right_btn.addEventListener('click', function() {
    swapFormat();
})

// 点击左箭头
left_btn.addEventListener('click', function() {
    index--;

    if (index < 0) {
        index = -1
        img_box.style.transition = 'all, linear, 1.5s';
        img_box.style.left = -index * imgContainerW + 'px';
        for (let i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        // 修改小图标的样式
        lis[3].className = 'cur'
        setTimeout(function() {
            index = 3
            img_box.style.transition = '';
            swapImg();
        }, 1000)
	
    } else {
        img_box.style.transition = 'all, linear, 1.5s';
        swapImg();
    }
    })


     // 当鼠标在图片上、左箭头、右箭头时清除定时器，即图片不轮播
     img_box.addEventListener('mouseover', function() {
        clearInterval(timer)
    })

    right_btn.addEventListener('mouseover', function() {
       clearInterval(timer)
    })

    left_btn.addEventListener('mouseover', function() {
       clearInterval(timer)
    })

    // 当鼠标离开图片、左箭头、右箭头时开启定时器，即图片继续轮播
    img_box.addEventListener('mouseout', function() {
       timer = setInterval(swapFormat, 3000)
    })

    left_btn.addEventListener('mouseout', function() {
       timer = setInterval(swapFormat, 3000)
    })

    right_btn.addEventListener('mouseout', function() {
       timer = setInterval(swapFormat, 3000)
    })
</script>

瀑布流

要求

多个等宽的图片穿插排成六列
在目前显示的最后一张图片后，再下拉能够在进行加载其他图片，每次下拉显示20-30张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			div {
				width: 150px;
				position: absolute;
			}
			img {
				display: inline-block;
				width: 150px;
			}
			#wrap {
				position: relative;
				width: 100%;
			}
		</style>
	</head>
	<body>
			<div><img src="1.1.jpg" alt=""></div>
			<div><img src="./1.2.jpg" alt=""></div>
			<div><img src="./轮播1.jpg" alt=""></div>
			<div><img src="./轮播2.jpg" alt=""></div>
			<div><img src="./轮播3.jpg" alt=""></div>
            <div><img src="./轮播4.jpg" alt=""></div>
            <div><img src="1.1.jpg" alt=""></div>
			<div><img src="./1.2.jpg" alt=""></div>
			<div><img src="./轮播1.jpg" alt=""></div>
			<div><img src="./轮播2.jpg" alt=""></div>
			<div><img src="./轮播3.jpg" alt=""></div>
            <div><img src="./轮播4.jpg" alt=""></div>
            <div><img src="1.1.jpg" alt=""></div>
			<div><img src="./1.2.jpg" alt=""></div>
			<div><img src="./轮播1.jpg" alt=""></div>
			<div><img src="./轮播2.jpg" alt=""></div>
			<div><img src="./轮播3.jpg" alt=""></div>
            <div><img src="./轮播4.jpg" alt=""></div>
            <script>
                var div = document.getElementsByTagName("div");
                window.onload = function(){
                    Full();
                }
                window.onresize = function(){
                    Full();
                }
                //瀑布流函数
                function Full(){
                    //求分几列
                    var pw = document.documentElement.offsetWidth;   //页面宽度
                    var dw = div[0].offsetWidth;           //每个div宽度
                    var cols = Math.floor(pw/dw);
                    //缝隙数等于列数加1，例如6行有7个缝隙
                    var white = (pw - dw * cols)/(cols + 1);
                    //每一列定位
                    var t = 10;
                    var arr = [];                              
                    for(var i = 0;i<cols;i++){
                        var pos = {
                            x:Math.floor((i+1)*white+dw*i),
                            y:t                      
                        }
                        arr.push(pos);  
                    }
                    console.log(arr);
                    //每次找高度最小的一列
                    for(var j = 0;j<div.length;j++){
                        var index = getMinTop(arr);
                        div[j].style.left = arr[index].x + "px";
                        div[j].style.top = arr[index].y + "px";
                        arr[index].y += div[j].offsetHeight + t;
                        console.log("arr[index]",arr[index]);
                    }
                }
                //求每次最小高度的列
                function getMinTop(arr){
                    var minT = arr[0].y;
                    var index = 0;
                    for(var k = 0;k<arr.length;k++){
                        if(arr[k].y < minT){
                            minT = arr[k].y;
                            index = k;
                        }
                    }
                    return index;
                }
            </script>
            
	</body>
</html>

效果如下

放大镜

要求

鼠标移至图片上方，鼠标周围出现黄色的正方形框，黄色矩形框会随鼠标的移动而移动
将黄色矩形里的内容长和宽都放大2.4倍，并在图片右边进行显示