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

style.css:

代码语言：javascript代码运行次数：0运行复制/*导航栏样式*/

.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:

代码语言：javascript代码运行次数：0运行复制//设置导航栏图标的点击时间

//点击更改背景

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部分中的

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

代码语言：javascript代码运行次数：0运行复制

完整代码如下,index.html:

代码语言：javascript代码运行次数：0运行复制

• home

• background

• note

• ball

• about

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

代码语言：javascript代码运行次数：0运行复制.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:

代码语言：javascript代码运行次数：0运行复制



0

0

:

0

0

:

0

0

运行效果：

设置图片的样式

style.css：

代码语言：javascript代码运行次数：0运行复制.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：

代码语言：javascript代码运行次数：0运行复制.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:

代码语言：javascript代码运行次数：0运行复制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. 搜索框接下来加入我们的搜索框

代码语言：javascript代码运行次数：0运行复制

设置搜索框样式

代码语言：javascript代码运行次数：0运行复制.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:

代码语言：javascript代码运行次数：0运行复制

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

设置样式：

style.css

代码语言：javascript代码运行次数：0运行复制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:

代码语言：javascript代码运行次数：0运行复制

style.css

代码语言：javascript代码运行次数：0运行复制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:

代码语言：javascript代码运行次数：0运行复制

设置球球的样式，以及按钮的样式

可以新建一个css文件，使结构清晰点，当然写在原来的style.css里也是没有问题的。

ball.css

代码语言：javascript代码运行次数：0运行复制 .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:

代码语言：javascript代码运行次数：0运行复制//获取元素

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小便签添加元素

第一步当然还是将便签元素添加进来啦！

分别是文本域、添加便签按钮、关闭便签栏按钮、删除便签按钮。

代码如下：

代码语言：javascript代码运行次数：0运行复制

设置样式

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

style.css:

代码语言：javascript代码运行次数：0运行复制.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

代码语言：javascript代码运行次数：0运行复制//创建计时器

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代码语言：javascript代码运行次数：0运行复制

• home

• background

• note

• ball

• about



0

0

:

0

0

:

0

0

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

2. style.css代码语言：javascript代码运行次数：0运行复制/*重置浏览器样式*/

*{

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代码语言：javascript代码运行次数：0运行复制//创建数组存放背景url

var 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();

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163172.html原文链接：https://javaforall.cn