不言不语网

首页 » 家居用品 » 原生HTML+CSS+JS制作自己的导航主页（前端大作业，源码+步骤详解）

原生HTML+CSS+JS制作自己的导航主页（前端大作业，源码+步骤详解）

2024-04-28 00:32:54 家居用品

原生HTML+CSS+JS制作自己的导航主页（前端大作业，源码+步骤详解）

文章目录

  • 前言
  • 一、原生业源插入背景
  • 二、制作自主页骤详头部
    • 1.导航栏
    • 2. 优化导航栏
    • 3 时间
    • 4. 搜索框
  • 三、己的解主体
  • 四、导航大作底部
  • 五、前端背景泡沫球特效
  • 六、码步note小便签
  • 七、原生业源全部代码
    • 1. index.html
    • 2. style.css
    • 3. index.js
  • 八、制作自主页骤详总结

链接：https://pan.baidu.com/s/1uaRCJXyIrY56NXabau4wjw?己的解pwd=LDL6
提取码：LDL6

前言

咕咕了好久啦，今天使用原生HTML+CSS+JS做一个很简单的导航大作个人定制的导航主页吧！

先看下完整的前端效果图吧！
请添加图片描述

请添加图片描述
在这里插入图片描述

接下来的码步文章将逐步带领大家制作，现在太晚了，原生业源就精简了下，制作自主页骤详删除了部分动画效果，己的解项目整体非常简单！

项目地址:
链接：https://pan.baidu.com/s/1Cue-H_7zufiBryD-FaKxzA
提取码：LDL6

2022/5/13
今天把动画以及小便签功能也加上了，本文第五，第六节，谢谢支持！

加入动画及便签的代码
链接：https://pan.baidu.com/s/1AwWiisnRQD5siLfTDwxdxw
提取码：LDL6

2022/6/15
之前的链接失效了
补上新的

链接：https://pan.baidu.com/s/1AOQ6o9fKDJgA2Wj0CBoBHA
提取码：LDL6

一、插入背景

首先设置我们的背景。
在body中插入背景即可。

  • index.html
HomePage
  • style.css
/*重置浏览器样式*/*{     margin: 0;    padding: 0;}html, body {     height:100%;    overflow:auto; /*使内容如果溢出，浏览器会显示滚动条以便查看其余的内容。*/}body{     /*no-repeat:不平铺 center:使图片居中于body的中心部分 fixed:设置背景图像为固定（不滚动）*/    background: no-repeat center fixed;    /*保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。*/    -webkit-background-size:cover;    background-size:cover;    /*1s完成更换背景图片效果*/    transition:background-image 1s;    font-family: Sans-serif;}
  • index.js
//创建数组存放背景urlvar bgs = new Array('url("images/bg01.jpg")','url("images/bg02.jpg")','url("images/bg04.jpg")','url("images/bg05.jpg")','url("images/bg08.jpg")','url("images/bg25.jpg")','url("images/bg09.jpg")','url("images/bg10.jpg")','url("images/bg12.jpg")','url("images/bg13.jpg")','url("images/bg25.jpg")','url("images/bg15.jpg")','url("images/bg17.jpg")','url("images/bg19.jpg")','url("images/bg20.jpg")','url("images/bg21.jpg")','url("images/bg22.jpg")','url("images/bg23.jpg")','url("images/bg25.jpg")');}

界面主要由三部分组成：

  • 头部：导航栏，时间，搜索框在这里插入图片描述

  • 主体：各站图标
    请添加图片描述

  • 底部：鼠标悬浮时出现的图标
    在这里插入图片描述

二、头部

Header部分由导航栏,时间，以及搜索框组成。
图标使用的是font-awesome库里的图。

1.导航栏

首先添加导航栏中的元素

index.html:

  • home
  • background
  • note
  • ball
  • about

给当导航栏图标设置样式

style.css:

/*导航栏样式*/.tabbar{     height: 100vh;    /* 弹性布局 水平+垂直居中 */    display: flex;    justify-content: center;    align-items: center;    /* 相对定位 */    position: relative;    width: 350px;    height: 70px;    margin: 0 auto;}.tabbar ul{     /* 让li横向排列 */    display: flex;}.tabbar ul li{     list-style: none;    width: 70px;    height: 70px;    position: relative;    z-index: 1;}.tabbar ul li a{     /* 弹性布局 居中 */    display: flex;    justify-content: center;    align-items: center;    /* 垂直排列 */    flex-direction: column;    color: #fff;    text-align: center;}.tabbar ul li a .icon{     line-height: 70px;    font-size: 30px;    /* 设置过渡 */    transition: 0.5s;}.tabbar ul li a .text{     /* 绝对定位 */    position: absolute;    font-size: 12px;    bottom: 13px;    /* 设置过渡 */    transition: 0.5s;    /* 默认隐藏 */    transform: scale(0);}.tabbar ul li.active a .icon{     font-size: 23px;    /* 图标上移 */    transform: translateY(-10px);}.tabbar ul li.active a .text{     /* 选中,文字显示 */    transform: scale(1);}

在这里插入图片描述

设置导航栏图标的点击事件
当鼠标点击元素时，添加或移除active样式即可。

index.js:

//设置导航栏图标的点击时间//点击更改背景function changeBg(){     document.getElementById('bgid').style.backgroundImage = bgs[Math.round(Math.random()* (bgs.length-1))];}// 获取所有.item元素let items=document.querySelectorAll(".item");// 设置当前选中项样式的方法function setActive(){     // 遍历所有.item元素,移除active样式    items.forEach((item)=>{         item.classList.remove("active");    })    // 为当前选中项添加active样式    this.classList.add("active");}// 遍历所有.item元素,分别为其设置点击事件items.forEach((item)=>{     item.addEventListener("click",setActive);})

现在打开浏览器页面就可以看到下图中的效果啦！(有免费的制作图片的软件嘛QAQ)
请添加图片描述

2. 优化导航栏

接下来给导航栏再添加一个点击时的背景，显得更好看一些

我们在header部分中的

    列表内添加一个用于存放该背景

    完整代码如下,index.html:

    • home
    • background
    • note
    • ball
    • about

    设置添加的导航栏背景样式。

    .active-bg{     position: absolute;    left: 0;    top: 0;    width: 70px;    height: 70px;    border-radius: 50%;    /* --c,--cc为CSS中的自定义属性,通过var函数可对其调用 */    background-color: var(--c);    box-shadow: 0 10px 15px var(--cc);    transition: 0.5s;}/* 分别为每一个.active-bg设置颜色,阴影,位移 */.tabbar ul li:nth-child(1).active ~ .active-bg{     --c:#ffa502;    --cc:#ffa50299;    left: 0;}.tabbar ul li:nth-child(2).active ~ .active-bg{     --c:#ff6348;    --cc:#ff634899;    left: calc(1 * 70px);}.tabbar ul li:nth-child(3).active ~ .active-bg{     --c:#2ed573;    --cc:#2ed57399;    left: calc(2 * 70px);}.tabbar ul li:nth-child(4).active ~ .active-bg{     --c:#1e90ff;    --cc:#1e90ff99;    left: calc(3 * 70px);}.tabbar ul li:nth-child(5).active ~ .active-bg{     --c:#ff6b81;    --cc:#ff6b8199;    left: calc(4 * 70px);}

    现在打开浏览器，就可以看到下图中的效果啦！
    请添加图片描述

    3 时间

    接下来 添加时间以及小鸭鸭（也可以添加自己喜欢的图片或者不添加）

    首先添加元素

    index.html:

    0
    0
    :
    0
    0
    :
    0
    0

    运行效果：
    请添加图片描述

    设置图片的样式

    style.css：

    .img{     width:1200px;    height:100px;    position: relative;    margin: 0 auto;}.img  img{     width:60px;    height:60px;    position: absolute;    top:50%;    left:40%;    margin-top:-30px ;    margin-left:-30px ;}

    设置时间的样式

    style.css：

    .img .clock{     width:60px;    height:60px;    position: absolute;    top:50%;    left:45%;    margin-top:-30px ;    margin-left:-30px ;}.clock{     display: flex;}.clock p{     /*width: 1000px;*/    font-size: 50px;    color: #fff;    text-align: center;    /* 设置字体 */    font-family: "Kanit";    font-weight: 900;    /* 文字阴影 实现3D效果 */    text-shadow: 0 1px 0 #deafaf,    0 2px 0 #bda8a8,    0 3px 0 #d8a1a1,    0 4px 0 #d59999,    0 5px 0 #d29292,    0 6px 0 #cf8b8b,    0 7px 0 #cc8484,    0 8px 0 #c97d7d,    0 0 5px rgba(231,156,156,0.05),    0 -1px 3px rgba(231,156,156,0.2),    0 9px 9px rgba(231,156,156,0.3),    0 12px 12px rgba(231,156,156,0.3),    0 15px 15px rgba(231,156,156,0.3);}

    运行效果：请添加图片描述

    获取当前时间

    index.js:

    function myTime(){     let time=new Date();    let hh=time.getHours();  //时    let mm=time.getMinutes();  //分    let ss=time.getSeconds();  //秒    // Math.floor() 向下取整    document.getElementById("1").innerText=Math.floor(hh/10);    document.getElementById("2").innerText=hh%10;    document.getElementById("4").innerText=Math.floor(mm/10);    document.getElementById("5").innerText=mm%10;    document.getElementById("7").innerText=Math.floor(ss/10);    document.getElementById("8").innerText=ss%10;}// 一秒执行一次setInterval(myTime,1000);

    运行效果：
    请添加图片描述

    4. 搜索框

    接下来加入我们的搜索框

    设置搜索框样式

    .midbox{     float: left;    display: inline-block;    background:transparent;    width: 100%;    height: 40px;}.midbox form{     width: 600px;    height:40px;    margin:0 auto;}#seaid{     float:left;    width: 550px;    height: 40px;    outline: none;    border:none;    font-size: 18px;    text-indent: 1em;    background:rgba(255,255,255,.2);}#subid{     float:left;    width: 50px;    height: 36px;    outline: none;    background:transparent;    border:0;    font-size: 18px;    background: url("../images/search.svg") no-repeat center;    background-position-y: 4px;    cursor:pointer;}

    运行效果：
    在这里插入图片描述
    至此我们的头部就完成啦！

    三、主体

    主体和footer也都很简单，基本上都是一些图标和样式设置。

    添加元素
    index.html:

    设置样式：
    style.css

    li{     list-style: none;    display: inline-block;}.container{     width: 1080px;    margin: 0 auto;    margin-top:40px;}.container ul {     width: 100%;    height: 100%;}.container ul li{     margin:20px;    width: 60px;    height: 60px;    background-color: rgba(0,0,0,0);    border-radius: 5px;    text-align: center;}.container ul li:hover{     transform:translateY(-3px);    transition:all 0.2s;}.container ul li a img{     margin:5px;    width: 48px;    height: 48px;    opacity: 1;}

    完成后的效果：
    在这里插入图片描述

    四、底部

    与主题部分相似，多了一个鼠标悬浮于底部的hover效果，都是较为基础的。

    index.html:

    style.css

    footer{     position:fixed;    width: 100%;    height: 100px;    bottom: -90px;    text-align: center;    z-index:98;}footer ul{     position:absolute;    height: 60px;    width: 950px;    top: -60px;    left: 225px;    list-style: none;    background-color: rgba(0,0,0,.3);    border-radius:30px;    transform:translateY(70px);    transition:all .3s;}footer:hover ul{     transform:translateY(0px);    transition:all .3s;}footer ul li{     float: left;    width: 60px;    height: 60px;    margin-top: 2px;    margin-left: 40px;    border-radius:50%;    cursor:pointer;}footer ul li img{     width: 45px;    height: 45px;    margin:5px;}footer ul li:hover{     transform:scale(1.6);    transform-origin:50% 100%;    transition:all .1s;}

    至此我们的个人定制导航主页就完成啦！
    请添加图片描述

    ---- – – – – – – – – – – – – – – 这是一条分割线呀-- – – – – – – – – – – – – –

    五、背景泡沫球特效

    添加元素
    添加位置如下，最后会再放上全部代码哒！

    • 三个元素分别是用来容纳球球的div，以及用来启动/暂停/清除球球的按钮请添加图片描述

    index.html:

    设置球球的样式，以及按钮的样式
    可以新建一个css文件，使结构清晰点，当然写在原来的style.css里也是没有问题的。
    ball.css

    .ballbox{       position:absolute;      width:1180px;      height:500px;	  top:60px;	  left:65px;	  z-index:-100;	  transition:all .3s;	  }	  .ballBtns{ 		position:absolute;		width: 65px;		height: 100px;		top: 80px;		left: -65px;		z-index:9999;		transition:all .3s;	  } .ball{       position:absolute;      border-radius:50%;	  opacity:.8;    } .clear_btn,.auto_btn{       position:absolute;      width:65px;      height:35px;      top:60px;      left:0px;	 border-radius: 24px;	 color: #fff;	 font-family: "Kanit";	 font-weight: 900;	 /* 文字阴影 实现3D效果 */	 text-shadow: 0 1px 0 #deafaf;	  border:none;	 box-shadow: 0 10px 10px rgba(0,0,0,.3);	 outline:none;	 cursor: pointer; } .auto_btn{ 		top:0px;	 background-image: linear-gradient(to right, #f441a0, #09a8f4, #ffeb3b,#03a9f4);	 /* 背景渐变色大小 */	 background-size: 400%; } .clear_btn{ 	 background-image: linear-gradient(to right, #09a8f4, #ffeb3b, #f441a0,#03a9f4);	 /* 背景渐变色大小 */	 background-size: 400%; }

    设置泡沫球的添加、清除、停止添加，球的移动以及按钮的弹出
    index.js:

    //获取元素var ballbox =document.querySelector('.ballbox');var clearBtn =document.querySelector('.clear_btn');var auto =document.querySelector('.auto_btn');var colors=['#ef9a9a','#F48FB1','#CE93D8','#B39DDB','#9FA8DA','#90CAF9','#81D4FA','#80DEEA','#80CBC4','#A5D6A7','#C5E1A5','#FFCC80','#FFAB91','#BCAAA4','#B0BEC5'];var flag = true;var balls = null;var count = 0;//自动添加 停止添加function autoBtn(){     if(flag){         timer = setInterval(addBall,150);        auto.value ='Stop';        auto.style.backgroundColor ='red';        flag = false;    }else{         clearInterval(timer);        auto.style.backgroundColor ='#00ACC1';        auto.value ='Start';        flag = true;    }}//创建新的function addBall(){     var ball = document.createElement('div');    ball.setAttribute('class','ball');    ball.style.background= "radial-gradient(circle at 75px 75px, "+colors[parseInt(Math.random()*colors.length)]+",#fff)";    ballbox.appendChild(ball);    count += 1;    //控制球移动    var top = parseInt(Math.random()*400);    var left =  parseInt(Math.random()*900);    ball.style.width = parseInt(Math.random()*50+50) +'px';    ball.style.height = ball.style.width;    ball.style.top = top +'px';    ball.style.left = left +'px';    var x = 5;    var y = 8;    running = setInterval(function clearBalls(){         top += y ;        left += x;        if(top < 0  || top>(ballbox.offsetHeight - ball.offsetHeight)){             y = -y ;        }        if(left< 0 || left>(ballbox.offsetWidth - ball.offsetWidth)){             x = -x;        }        ball.style.top = top +'px';        ball.style.left = left +'px';    },100)}//清除球// clearBtn.onclick =function clearBalls(){     var balls = document.getElementsByClassName('ball');    clearInterval(timer);    auto.style.backgroundColor ='#00ACC1';    auto.value ='Start';    flag = true;    while(balls.length != 0){         balls.length-- ;        ballbox.removeChild(ballbox.children[0]);    }}//弹出操作按钮var btns =document.getElementById('btns');var flag2 = true;function ballBtn(){     if(!flag2){         btns.style.transform = 'translateX(0px)';        flag2 = true;    }else{         btns.style.transform = 'translateX(65px)';        flag2 = false;    }}

    完成这一步，就可以看到我们的泡沫球动画啦！

    效果如下：
    请添加图片描述

    六、note小便签

    添加元素
    第一步当然还是将便签元素添加进来啦！
    分别是文本域、添加便签按钮、关闭便签栏按钮、删除便签按钮。
    请添加图片描述
    代码如下：

    设置样式
    大家按照自己喜好，设置合适的样式就好啦。
    style.css:

    .btm{ 	border-radius: 20px;	position: absolute;	width:570px;	height: 410px;	top:90px;	left:-570px;	margin-top: 100px;	background-color: rgba(255,255,255,.9);	transition:all .3s;	z-index:99;	}#txt{ 	float: left;	width: 425px;	height: 50px;	padding: 5px;	border:0;	margin:20px;	margin-bottom: 0px;	color:black;	font-size: 6px;	background-color:#ccc;	outline: none;		background-color: rgba(0,0,0,.3);			}#txt::-webkit-input-placeholder, #txt textarea::-webkit-input-placeholder {   color: black;  font-size: 10px;}.btm #add{ 	float: left;	width: 50px;	height: 60px;	margin-top: 20px;	margin-left: -5px;	outline: none;	border:0;	color:#fff;	cursor: pointer;	background-color: rgba(0,0,0,.3);}#closeBox{ 	float: right;	width: 32px;	height: 32px;	margin-top: 0;	margin-right: 0;	outline: none;	border:0;	color:#fff;	cursor: pointer;	background:url('../images/close.png') no-repeat;	background-color: rgba(0,0,0,0);	border-radius:50%;}.notes  li{ 	position: relative;	float: left;	width: 85px;	height: 85px;	border:0;	margin:20px;	margin-bottom: 25px;	padding: 5px;	color:#000;	font-size:10px;	line-height: 18px;	text-align: center;	letter-spacing:2px;	background-color:#ccc;	outline: none;		background-color: rgba(0,0,0,.3);	}.notes  li a{ 	position: absolute;	width: 95px;	height: 20px;	top:113px;	left:0;	outline: none;	border:0;	color:#fff;	text-align: center;	cursor: pointer;	background-color: rgba(0,0,0,.3);}.notes  li a:hover{ 	color:red!important;}.notes  li p{ 	position: absolute;	width: 95px;	height: 20px;	left: 0;	top:-14px;	text-align: center;	font-size:6px;	letter-spacing:1px;}.btm #add:hover,.notes  li a:hover{ 	background-color: rgba(0,0,0,.5)!important;}

    添加子节点
    由于是便签嘛，所以想着应该需要记录写下便签的时间，所以我们首先，获取时间，然后添加便签的操作使用.append添加子节点就好啦。代码有注释，不懂得可以留言！
    index.js

    //创建计时器function Note(){     var time = new Date();    y = time.getFullYear();    mon = time.getMonth()+1;    d = time.getDate();    var  h = time.getHours();    var ampm = h < 12 ? 'AM' : 'PM';    if(h < 10){         h = '0' + h;    }    else if(h >= 12 && h < 22){         h = '0' + (h % 12)    }else if(h >= 22){         h = h % 12;    }    else{         h = h;    }    var  m = time.getMinutes();    m = m < 10 ? '0'+ m : m;    var s = time.getUTCSeconds();    s = s < 10 ? '0'+ s : s;    var wArr = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];    w = wArr[time.getDay()];    //获取元素    var txt = document.querySelector('#txt');    var btn = document.querySelector('#add');    var ul = document.querySelector('.notes');    var colors =['#ef9a9a','#F48FB1','#CE93D8','#B39DDB','#9FA8DA','#90CAF9','#81D4FA','#80DEEA','#80CBC4','#A5D6A7','#C5E1A5','#FFCC80','#FFAB91','#BCAAA4','#B0BEC5'];    //注册事件    btn.onclick = function(){         txt.focus();        if(ul.children.length < 8 && txt.value !='' ){             //创建元素            var li = document.createElement('li');            li.style.backgroundColor = colors[parseInt(Math.random()*(colors.length-1))];            //添加元素            ul.appendChild(li);            li.innerHTML = txt.value + "
    "+h +":"+ m +" "+ampm+"
    " + "Delete";            txt.value = '';            txt.focus();            //删除元素            var as = document.querySelectorAll('a');            for(var i = 0; i < as.length; i++){                 as[i].onclick = function (){                     ul.removeChild(this.parentNode);                    txt.focus();                }            }        }else if(ul.children.length == 8){             txt.value ='';            txt.setAttribute('placeholder','只能添加8个便签哦！');            txt.focus();        }        else if(txt.value ==''){             txt.setAttribute('placeholder','请输入内容...');            txt.focus();        }    }}//递归调用 每秒调用一次setInterval("Note()",1000);var btnn = document.querySelector('#note');var div = document.querySelector('.btm');var flag1 = true;function addFocus(){     if(!flag1){         div.style.transform = 'translateX(0px)';        flag1 = true;        txt.blur();    }else{         div.style.transform = 'translateX(570px)';        txt.focus();        flag1 = false;    }}btnn.onclick = function() {     addFocus();}

    至此我们的便签部分也完成啦！
    效果图如下：
    请添加图片描述

    七、全部代码

    1. index.html

    HomePage
    • home
    • background
    • note
    • ball
    • about
    0
    0
    :
    0
    0
    :
    0
    0

    2. style.css

    /*重置浏览器样式*/*{     margin: 0;    padding: 0;}html, body {     height:100%;    overflow:auto; /*使内容如果溢出，浏览器会显示滚动条以便查看其余的内容。*/}body{     /*no-repeat:不平铺 center:使图片居中于body的中心部分 fixed:设置背景图像为固定（不滚动）*/    background: no-repeat center fixed;    /*保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。*/    -webkit-background-size:cover;    background-size:cover;    /*1s完成更换背景图片效果*/    transition:background-image 1s;    font-family: Sans-serif;}/*导航栏样式*/.tabbar{     height: 100vh;    /* 弹性布局 水平+垂直居中 */    display: flex;    justify-content: center;    align-items: center;    /* 相对定位 */    position: relative;    width: 350px;    height: 70px;    margin: 0 auto;}.tabbar ul{     /* 让li横向排列 */    display: flex;}.tabbar ul li{     list-style: none;    width: 70px;    height: 70px;    position: relative;    z-index: 1;}.tabbar ul li a{     /* 弹性布局 居中 */    display: flex;    justify-content: center;    align-items: center;    /* 垂直排列 */    flex-direction: column;    color: #fff;    text-align: center;}.tabbar ul li a .icon{     line-height: 70px;    font-size: 30px;    /* 设置过渡 */    transition: 0.5s;}.tabbar ul li a .text{     /* 绝对定位 */    position: absolute;    font-size: 12px;    bottom: 13px;    /* 设置过渡 */    transition: 0.5s;    /* 默认隐藏 */    transform: scale(0);}.tabbar ul li.active a .icon{     font-size: 23px;    /* 图标上移 */    transform: translateY(-10px);}.tabbar ul li.active a .text{     /* 选中,文字显示 */    transform: scale(1);}.active-bg{     position: absolute;    left: 0;    top: 0;    width: 70px;    height: 70px;    border-radius: 50%;    /* --c,--cc为CSS中的自定义属性,通过var函数可对其调用 */    background-color: var(--c);    box-shadow: 0 10px 15px var(--cc);    transition: 0.5s;}/* 分别为每一个.active-bg设置颜色,阴影,位移 */.tabbar ul li:nth-child(1).active ~ .active-bg{     --c:#ffa502;    --cc:#ffa50299;    left: 0;}.tabbar ul li:nth-child(2).active ~ .active-bg{     --c:#ff6348;    --cc:#ff634899;    left: calc(1 * 70px);}.tabbar ul li:nth-child(3).active ~ .active-bg{     --c:#2ed573;    --cc:#2ed57399;    left: calc(2 * 70px);}.tabbar ul li:nth-child(4).active ~ .active-bg{     --c:#1e90ff;    --cc:#1e90ff99;    left: calc(3 * 70px);}.tabbar ul li:nth-child(5).active ~ .active-bg{     --c:#ff6b81;    --cc:#ff6b8199;    left: calc(4 * 70px);}.img{     width:1200px;    height:100px;    position: relative;    margin: 0 auto;}.img  img{     width:60px;    height:60px;    position: absolute;    top:50%;    left:40%;    margin-top:-30px ;    margin-left:-30px ;}.img .clock{     width:60px;    height:60px;    position: absolute;    top:50%;    left:45%;    margin-top:-30px ;    margin-left:-30px ;}.clock{     display: flex;}.clock p{     /*width: 1000px;*/    font-size: 50px;    color: #fff;    text-align: center;    /* 设置字体 */    font-family: "Kanit";    font-weight: 900;    /* 文字阴影 实现3D效果 */    text-shadow: 0 1px 0 #deafaf,    0 2px 0 #bda8a8,    0 3px 0 #d8a1a1,    0 4px 0 #d59999,    0 5px 0 #d29292,    0 6px 0 #cf8b8b,    0 7px 0 #cc8484,    0 8px 0 #c97d7d,    0 0 5px rgba(231,156,156,0.05),    0 -1px 3px rgba(231,156,156,0.2),    0 9px 9px rgba(231,156,156,0.3),    0 12px 12px rgba(231,156,156,0.3),    0 15px 15px rgba(231,156,156,0.3);}.midbox{     float: left;    display: inline-block;    background:transparent;    width: 100%;    height: 40px;}.midbox form{     width: 600px;    height:40px;    margin:0 auto;}#seaid{     float:left;    width: 550px;    height: 40px;    outline: none;    border:none;    font-size: 18px;    text-indent: 1em;    background:rgba(255,255,255,.2);}#subid{     float:left;    width: 50px;    height: 36px;    outline: none;    background:transparent;    border:0;    font-size: 18px;    background: url("../images/search.svg") no-repeat center;    background-position-y: 4px;    cursor:pointer;}li{     list-style: none;    display: inline-block;}.container{     width: 1080px;    margin: 0 auto;    margin-top:40px;}.container ul {     width: 100%;    height: 100%;}.container ul li{     margin:20px;    width: 60px;    height: 60px;    background-color: rgba(0,0,0,0);    border-radius: 5px;    text-align: center;}.container ul li:hover{     transform:translateY(-3px);    transition:all 0.2s;}.container ul li a img{     margin:5px;    width: 48px;    height: 48px;    opacity: 1;}footer{     position:fixed;    width: 100%;    height: 100px;    bottom: -90px;    text-align: center;    z-index:98;}footer ul{     position:absolute;    height: 60px;    width: 950px;    top: -60px;    left: 225px;    list-style: none;    background-color: rgba(0,0,0,.3);    border-radius:30px;    transform:translateY(70px);    transition:all .3s;}footer:hover ul{     transform:translateY(0px);    transition:all .3s;}footer ul li{     float: left;    width: 60px;    height: 60px;    margin-top: 2px;    margin-left: 40px;    border-radius:50%;    cursor:pointer;}footer ul li img{     width: 45px;    height: 45px;    margin:5px;}footer ul li:hover{     transform:scale(1.6);    transform-origin:50% 100%;    transition:all .1s;}.ballbox{     position:absolute;    width:1180px;    height:500px;    top:60px;    left:65px;    z-index:-100;    transition:all .3s;}.ballBtns{     position:absolute;    width: 65px;    height: 100px;    top: 80px;    left: -65px;    z-index:9999;    transition:all .3s;}.ball{     position:absolute;    border-radius:50%;    opacity:.8;}.clear_btn,.auto_btn{     position:absolute;    width:65px;    height:35px;    top:60px;    left:0px;    border-radius: 24px;    color: #fff;    font-family: "Kanit";    font-weight: 900;    /* 文字阴影 实现3D效果 */    text-shadow: 0 1px 0 #deafaf;    border:none;    box-shadow: 0 10px 10px rgba(0,0,0,.3);    outline:none;    cursor: pointer;}.auto_btn{     top:0px;    background-image: linear-gradient(to right, #f441a0, #09a8f4, #ffeb3b,#03a9f4);    /* 背景渐变色大小 */    background-size: 400%;}.clear_btn{     background-image: linear-gradient(to right, #09a8f4, #ffeb3b, #f441a0,#03a9f4);    /* 背景渐变色大小 */    background-size: 400%;}.btm{     border-radius: 20px;    position: absolute;    width:570px;    height: 410px;    top:90px;    left:-570px;    margin-top: 100px;    background-color: rgba(255,255,255,.9);    transition:all .3s;    z-index:99;}#txt{     float: left;    width: 425px;    height: 50px;    padding: 5px;    border:0;    margin:20px;    margin-bottom: 0px;    color:black;    font-size: 6px;    background-color:#ccc;    outline: none;    background-color: rgba(0,0,0,.3);}#txt::-webkit-input-placeholder, #txt textarea::-webkit-input-placeholder {     color: black;    font-size: 10px;}.btm #add{     float: left;    width: 50px;    height: 60px;    margin-top: 20px;    margin-left: -5px;    outline: none;    border:0;    color:#fff;    cursor: pointer;    background-color: rgba(0,0,0,.3);}#closeBox{     float: right;    width: 32px;    height: 32px;    margin-top: 0;    margin-right: 0;    outline: none;    border:0;    color:#fff;    cursor: pointer;    background:url('../images/close.png') no-repeat;    background-color: rgba(0,0,0,0);    border-radius:50%;}.notes  li{     position: relative;    float: left;    width: 85px;    height: 85px;    border:0;    margin:20px;    margin-bottom: 25px;    padding: 5px;    color:#000;    font-size:10px;    line-height: 18px;    text-align: center;    letter-spacing:2px;    background-color:#ccc;    outline: none;    background-color: rgba(0,0,0,.3);}.notes  li a{     position: absolute;    width: 95px;    height: 20px;    top:113px;    left:0;    outline: none;    border:0;    color:#fff;    text-align: center;    cursor: pointer;    background-color: rgba(0,0,0,.3);}.notes  li a:hover{     color:red!important;}.notes  li p{     position: absolute;    width: 95px;    height: 20px;    left: 0;    top:-14px;    text-align: center;    font-size:6px;    letter-spacing:1px;}.btm #add:hover,.notes  li a:hover{     background-color: rgba(0,0,0,.5)!important;}

    3. index.js

    //创建数组存放背景urlvar bgs = new Array('url("images/bg01.jpg")','url("images/bg02.jpg")','url("images/bg04.jpg")','url("images/bg05.jpg")','url("images/bg08.jpg")','url("images/bg25.jpg")','url("images/bg09.jpg")','url("images/bg10.jpg")','url("images/bg12.jpg")','url("images/bg13.jpg")','url("images/bg25.jpg")','url("images/bg15.jpg")','url("images/bg17.jpg")','url("images/bg19.jpg")','url("images/bg20.jpg")','url("images/bg21.jpg")','url("images/bg22.jpg")','url("images/bg23.jpg")','url("images/bg25.jpg")');//设置导航栏图标的点击时间//点击更改背景function changeBg(){     document.getElementById('bgid').style.backgroundImage = bgs[Math.round(Math.random()* (bgs.length-1))];}// 获取所有.item元素let items=document.querySelectorAll(".item");// 设置当前选中项样式的方法function setActive(){     // 遍历所有.item元素,移除active样式    items.forEach((item)=>{         item.classList.remove("active");    })    // 为当前选中项添加active样式    this.classList.add("active");}// 遍历所有.item元素,分别为其设置点击事件items.forEach((item)=>{     item.addEventListener("click",setActive);})function myTime(){     let time=new Date();    let hh=time.getHours();  //时    let mm=time.getMinutes();  //分    let ss=time.getSeconds();  //秒    // Math.floor() 向下取整    document.getElementById("1").innerText=Math.floor(hh/10);    document.getElementById("2").innerText=hh%10;    document.getElementById("4").innerText=Math.floor(mm/10);    document.getElementById("5").innerText=mm%10;    document.getElementById("7").innerText=Math.floor(ss/10);    document.getElementById("8").innerText=ss%10;}// 一秒执行一次setInterval(myTime,1000);//获取元素var ballbox =document.querySelector('.ballbox');var clearBtn =document.querySelector('.clear_btn');var auto =document.querySelector('.auto_btn');var colors=['#ef9a9a','#F48FB1','#CE93D8','#B39DDB','#9FA8DA','#90CAF9','#81D4FA','#80DEEA','#80CBC4','#A5D6A7','#C5E1A5','#FFCC80','#FFAB91','#BCAAA4','#B0BEC5'];var flag = true;var balls = null;var count = 0;//自动添加 停止添加function autoBtn(){     if(flag){         timer = setInterval(addBall,150);        auto.value ='Stop';        auto.style.backgroundColor ='red';        flag = false;    }else{         clearInterval(timer);        auto.style.backgroundColor ='#00ACC1';        auto.value ='Start';        flag = true;    }}//创建新的function addBall(){     var ball = document.createElement('div');    ball.setAttribute('class','ball');    ball.style.background= "radial-gradient(circle at 75px 75px, "+colors[parseInt(Math.random()*colors.length)]+",#fff)";    ballbox.appendChild(ball);    count += 1;    //控制球移动    var top = parseInt(Math.random()*400);    var left =  parseInt(Math.random()*900);    ball.style.width = parseInt(Math.random()*50+50) +'px';    ball.style.height = ball.style.width;    ball.style.top = top +'px';    ball.style.left = left +'px';    var x = 5;    var y = 8;    running = setInterval(function clearBalls(){         top += y ;        left += x;        if(top < 0  || top>(ballbox.offsetHeight - ball.offsetHeight)){             y = -y ;        }        if(left< 0 || left>(ballbox.offsetWidth - ball.offsetWidth)){             x = -x;        }        ball.style.top = top +'px';        ball.style.left = left +'px';    },100)}//清除球// clearBtn.onclick =function clearBalls(){     var balls = document.getElementsByClassName('ball');    clearInterval(timer);    auto.style.backgroundColor ='#00ACC1';    auto.value ='Start';    flag = true;    while(balls.length != 0){         balls.length-- ;        ballbox.removeChild(ballbox.children[0]);    }}//弹出操作按钮var btns =document.getElementById('btns');var flag2 = true;function ballBtn(){     if(!flag2){         btns.style.transform = 'translateX(0px)';        flag2 = true;    }else{         btns.style.transform = 'translateX(65px)';        flag2 = false;    }}//创建计时器function Note(){     var time = new Date();    y = time.getFullYear();    mon = time.getMonth()+1;    d = time.getDate();    var  h = time.getHours();    var ampm = h < 12 ? 'AM' : 'PM';    if(h < 10){         h = '0' + h;    }    else if(h >= 12 && h < 22){         h = '0' + (h % 12)    }else if(h >= 22){         h = h % 12;    }    else{         h = h;    }    var  m = time.getMinutes();    m = m < 10 ? '0'+ m : m;    var s = time.getUTCSeconds();    s = s < 10 ? '0'+ s : s;    var wArr = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];    w = wArr[time.getDay()];    //获取元素    var txt = document.querySelector('#txt');    var btn = document.querySelector('#add');    var ul = document.querySelector('.notes');    var colors =['#ef9a9a','#F48FB1','#CE93D8','#B39DDB','#9FA8DA','#90CAF9','#81D4FA','#80DEEA','#80CBC4','#A5D6A7','#C5E1A5','#FFCC80','#FFAB91','#BCAAA4','#B0BEC5'];    //注册事件    btn.onclick = function(){         txt.focus();        if(ul.children.length < 8 && txt.value !='' ){             //创建元素            var li = document.createElement('li');            li.style.backgroundColor = colors[parseInt(Math.random()*(colors.length-1))];            //添加元素            ul.appendChild(li);            li.innerHTML = txt.value + "
    "+h +":"+ m +" "+ampm+"
    " + "Delete";            txt.value = '';            txt.focus();            //删除元素            var as = document.querySelectorAll('a');            for(var i = 0; i < as.length; i++){                 as[i].onclick = function (){                     ul.removeChild(this.parentNode);                    txt.focus();                }            }        }else if(ul.children.length == 8){             txt.value ='';            txt.setAttribute('placeholder','只能添加8个便签哦！');            txt.focus();        }        else if(txt.value ==''){             txt.setAttribute('placeholder','请输入内容...');            txt.focus();        }    }}//递归调用 每秒调用一次setInterval("Note()",1000);var btnn = document.querySelector('#note');var div = document.querySelector('.btm');var flag1 = true;function addFocus(){     if(!flag1){         div.style.transform = 'translateX(0px)';        flag1 = true;        txt.blur();    }else{         div.style.transform = 'translateX(570px)';        txt.focus();        flag1 = false;    }}btnn.onclick = function() {     addFocus();}

    八、总结

    非常感谢大家的支持！第一次上了综合热榜！未来还会给大家带来更多精美的小案例的！

未经允许不得转载：不言不语网 » 原生HTML+CSS+JS制作自己的导航主页（前端大作业，源码+步骤详解）

相关推荐

商品推荐