初学js十二道demo练习

ZiminLi

已于 2024-08-03 22:12:01 修改

阅读量741

点赞数

分类专栏： demo 文章标签： javascript 前端 css

于 2023-01-11 14:01:46 首次发布

本文链接：https://blog.csdn.net/ziminli/article/details/128643806

版权

demo 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

demo

一、页面返回顶部
二、Tab选项卡

一、页面返回顶部

内容

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

实验原理

定时器实现又快到慢回到顶部效果
事件绑定实现按钮显示隐藏

html

<!DOCTYPE html>
<html lang="zh-CN">
<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>demo1</title>
    <link rel="stylesheet" href="./css/demo1.css">
</head>
<body>
    <div id="top">
        这里是顶部
    </div>
    <button id="btn">回到顶部</button>
    <script src="./js/demo1.js"></script>
</body>
</html>

css

<style>
	*{
	    margin: 0;
	    padding: 0;
	}
	body{
	    height: 10000px;
	}
	#top{
	    height: 100px;
	    line-height: 100px;
	    text-align: center;
	    font-size: 20px;
	    color: blue;
	    background-color: red;
	}
	#btn{
	    position: fixed;
	    bottom: 0;
	    left: 48.2%;
	}
	.dsa{
	    display: none;
	}
</style>

js

<script>
	//获取按钮
	var Btn=document.getElementById("btn");
	//点击返回顶部
	Btn.onclick=function(){
	    var timer = setInterval(function(){
	        var sTop=scrollY;
	        var offset=sTop-(sTop*0.1+10);
	        if(offset>0){
	            window.scrollTo(0,offset);
	        }else{
	            window.scrollTo(0,0);
	            clearInterval(timer);
	        }
	    },25);
	}
	//非顶部显示按钮与顶部隐藏按钮
	onscroll=function(){
	    if(scrollY==0){
	        Btn.className="dsa";
	    }else{
	        Btn.className="";
	    }
	}
</script>

样式

页面返回顶部

二、Tab选项卡

内容

1.选项卡由英雄联盟、DOTA、风暴英雄、300英雄四块组成；
2.未选择时，默认选中第一个标签页；
3.选择某一选项后，下方跳出对应游戏的相关介绍内容。

实验原理

自定义属性获取点击的对象
事件绑定实现切换功能

html

<!DOCTYPE html>
<html lang="zh-CN">
<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>demo2</title>
    <link rel="stylesheet" href="./css/demo2.css">
</head>
<body>
    <ul id="nav">
        <li class="vis">英雄联盟</li>
        <li>DOTA</li>
        <li>风暴英雄</li>
        <li>300英雄</li>
    </ul>
    <ul id="box">
        <li class="lol vis">
            英雄联盟（League of Legends）是由美国Riot Games开发，腾讯游戏运营的全新英雄对战网游。. 英雄联盟的主创团队由各著名游戏公司的核心美术、策划、程序人员组成，他们打造了游戏中风格特色各异的英雄，加入更加丰富的物品合成系统、地图玩法、天梯匹配机制，以及独创的"召唤师"技能、符文、天赋组合，让玩家感受不一样的英雄对战网游。. 在游戏中，玩家将扮演一位召唤者，并选择你所信任的联盟国进入这个游戏的正义领域，为了控制瓦罗然的权利而奋战。. 在这个联盟中只有一条规则：胜者就是一切！.
        </li>
        <li class="dota">
            《Dota》的早期世界观是建立在《魔兽争霸3：冰封王座》的基础上的，因此与现在暴雪公司的《魔兽世界》的背景设定有一定的联系，但由于版本更迭又略有不同。整个地图中地形名费伍德森林，费伍德森林是网络游戏《魔兽世界》中的游戏地图，位于卡利姆多境内的一片森林。这片由森林和草场构成的繁荣动荡的土地曾经由卡尔多雷掌管，并曾经处于半神塞纳留斯的保护下。燃烧军团的铁蹄践踏了这片土地，没有被毁灭的树木和生物则被恶魔的暴行永远的诅咒着
        </li>
        <li class="fbyx">
            《风暴英雄》是由暴雪娱乐公司开发的一款多人在线竞技游戏，于2015年6月3日正式上线 ，中国大陆由网易公司代理。 游戏中的英雄角色主要来自于暴雪四大经典游戏系列：《魔兽世界》、《暗黑破坏神》、《星际争霸》和《守望先锋》，玩家需要操控一个英雄，和队友一起，通过控制地图元素、升级、击杀对方英雄来扩大优势并摧毁对方基地以获得胜利。
        </li>
        <li class="tyx">
            《300英雄》是由上海跳跃网络科技有限公司自主研发，深圳中青宝互动网络股份有限公司运营的一款类DOTA网游。游戏以7v7组队对抗玩法为主，提供永恒战场和永恒竞技场两种经典模式任由玩家选择，并创新性地加入勇者斗恶龙、克隆战争等多种休闲娱乐玩法。
        </li>
    </ul>
    <script src="./js/demo2.js"></script>
</body>
</html>

css

<style>
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
#nav{
    display: flex;
}
#nav li{
    width: 98px;
    height: 50px;
    border: 1px solid;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}
#nav .vis{
    background-color: red;
    color: white;
}
#box{
    position: relative;
}
#box li{
    width: 400px;
    height: 300px;
    color:aquamarine;
    font-size: 18px;
    background-color: yellow;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}
#box .vis{
    display: block;
}
#box .lol{
    background: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.scuRQosiJUwKWGyo9yehngHaEK?pid=ImgDet&rs=1);
    background-size: cover;
}
#box .dota{
    background: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.5xThRzcoQRh0u1PWBCd4rAHaEK?pid=ImgDet&rs=1);
    background-size: cover;
}
#box .fbyx{
    background: url(https://pic4.zhimg.com/v2-df705e02bb0000e1a9d392fe556bab61_r.jpg);
    background-size: cover;
}
#box .tyx{
    background: url(https://ts1.cn.mm.bing.net/th/id/R-C.01b405a475067f9830170fd97efd89b0?rik=ao3KkY1yw6zGsQ&riu=http%3a%2f%2fi1.img.969g.com%2fpub%2fimgx2014%2f11%2f04%2f326_140214_ec3e4.jpg&ehk=EJyW99H23s67R%2b4f3QXZOTBQg6vokxdScQK%2fpAkESvI%3d&risl=&pid=ImgRaw&r=0);
    background-size: cover;
}
</style>

js

<script>
var NavItems=document.querySelectorAll("#nav li");
var BoxItems=document.querySelectorAll("#box li");
for(var i=0;i<NavItems.length;i++){
    NavItems[i].dataset.index=i;
    NavItems[i].onclick=aFun;
}
function aFun(){
    var Index=this.dataset.index;
    for(var m=0;m<NavItems.length;m++){
        NavItems[m].classList.remove("vis");
        BoxItems[m].classList.remove("vis");
    }
    NavItems[Index].classList.add("vis");
    BoxItems[Index].classList.add("vis");
}
</script>