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

码农世界 2024-05-22 前端 59 次浏览 0个评论

可以新建一个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

//创建数组存放背景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’);

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

‘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’);

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

[外链图片转存中…(img-vnOQrtRd-1714637521703)]

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-k98Ot2Rk-1714637521704)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串