2024年5个前端练手项目(html css js canvas)

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

justify-content: center;
width: 1920px;
height: 1000px;
animation: animate1 10s linear infinite;
}

/* 用于设置动画属性其中filter用于做利镜其中的hue-rotate属性让图像运用色相旋转*/

@keyframes animate1 {

0% {

filter: hue-rotate(0deg);

}

100% {

filter: hue-rotate(360deg);

}

main .cube {

position: relative;

height: 120px;

width: 120px;

}

main .cube span {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

/* 用于设置一个圆圈被分成几份 /

transform: rotate(calc(18degvar(–i)));

}

/* :before用于设置在给定的属性之前添加效果 /

main .cube span::before {

content: ‘’;

position: absolute;

top: 0;

left: 0;

width: 15px;

height: 15px;

border-radius: 50%;

background-color: aqua;

box-shadow: 0 0 10px aqua ,0 0 20px aqua,0 0 40px aqua,0 0 80px aqua,0 0 100px aqua;

animation: animate 2s linear infinite;

animation-delay: calc(0.1svar(–i));

}

@keyframes animate {

0% {

transform: scale(1);

}

80%,

100% {

transform: scale(0);

}

.loading{

color:#fff;

font-size: 20px;

position: relative;

top:100px;

right:100px;

}

@media (min-width:765px){

---
### 2.彩虹爱心

---
#### 2.1效果图
![](https://img-blog.csdnimg.cn/a444f8f8d2cb482ca8fc3349f9be6055.gif)
#### 

---
#### 2.2思路解析
> 
> 搭建基本的html结构，采用的**svg技术**，
> 
> 
> 通过js动态**改变颜色**，以及动态实现切换图形
> 
> 
> 

---
#### 2.3源码

const colors = [“#e03776”,“#8f3e98”,“#4687bf”,“#3bab6f”,“#f9c25e”,“#f47274”];

const SVG_NS = ‘http://www.w3.org/2000/svg’;

const SVG_XLINK = “http://www.w3.org/1999/xlink”;

let heartsRy = []

function useTheHeart(n){

let use = document.createElementNS(SVG_NS, ‘use’);

use.n = n;

use.setAttributeNS(SVG_XLINK, ‘xlink:href’, ‘#heart’);

use.setAttributeNS(null, ‘transform’, scale(${use.n}));

use.setAttributeNS(null, ‘fill’, colors[n%colors.length]);

use.setAttributeNS(null, ‘x’, -69);

use.setAttributeNS(null, ‘y’, -69);

use.setAttributeNS(null, ‘width’, 138);

use.setAttributeNS(null, ‘height’, 138);

heartsRy.push(use)

hearts.appendChild(use);

}

for(let n = 18; n >= 0; n–){useTheHeart(n)}

function Frame(){

window.requestAnimationFrame(Frame);

for(let i = 0; i < heartsRy.length; i++){

if(heartsRy[i].n < 18){heartsRy[i].n +=.01

}else{

heartsRy[i].n = 0;

hearts.appendChild(heartsRy[i])

}

heartsRy[i].setAttributeNS(null, ‘transform’, scale(${heartsRy[i].n}));

}

Frame()

---
### 3.闹钟

---
#### 3.1效果图
![](https://img-blog.csdnimg.cn/a8fdc2df096b468a885638521a1c1d57.gif)
#### 

---
#### 3.2思路解析
> 
> 搭建基本的html结构，**动态得到实时的时，分，秒**
> 
> 
> 通过Date()函数获得。将得到的数字根据逻辑，绑定
> 
> 
> 给各div结构，实行动态旋转。点击按钮，改变背景颜色
> 
> 
> 

---
#### 3.3源码
html：

Dark mode ```

css:

@import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap');
* {
  box-sizing: border-box;
}
:root {
  --primary-color: #000;
  --secondary-color: #fff;
}
html {
  transition: all 0.5s ease-in;
}
html.dark {
  --primary-color: #fff;
  --secondary-color: #333;
}
html.dark {
  background-color: #111;
  color: var(--primary-color);
}
body {
  font-family: 'Heebo', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.toggle {
  cursor: pointer;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: 0;
  border-radius: 4px;
  padding: 8px 12px;
  position: absolute;
  top: 100px;
}
.toggle:focus {
  outline: none;
}
.clock-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.clock {
  position: relative;
  width: 200px;
  height: 200px;
}
.needle {
  background-color: var(--primary-color);
  position: absolute;
  top: 50%;
  left: 50%;
  height: 65px;
  width: 3px;
  transform-origin: bottom center;
  transition: all 0.5s ease-in;
}
.needle.hour {
  transform: translate(-50%, -100%) rotate(0deg);
}
.needle.minute {
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
}
.needle.second {
  transform: translate(-50%, -100%) rotate(0deg);
  height: 100px;
  background-color: #e74c3c;
}
.center-point {
  background-color: #e74c3c;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.center-point::after {
  content: '';
  background-color: var(--primary-color);
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.time {
  font-size: 60px;
}
.date {
  color: #aaa;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.date .circle {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border-radius: 50%;
  height: 18px;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
  transition: all 0.5s ease-in;
  font-size: 12px;
}

js:

const hourEl = document.querySelector('.hour')
const minuteEl = document.querySelector('.minute')
const secondEl = document.querySelector('.second')
const timeEl = document.querySelector('.time')
const dateEl = document.querySelector('.date')
const toggle = document.querySelector('.toggle')
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
toggle.addEventListener('click', (e) => {
    const html = document.querySelector('html')
    if (html.classList.contains('dark')) {
        html.classList.remove('dark')
        e.target.innerHTML = 'Dark mode'
    } else {
        html.classList.add('dark')
        e.target.innerHTML = 'Light mode'
    }
})
function setTime() {
    const time = new Date();
    const month = time.getMonth()
    const day = time.getDay()
    const date = time.getDate()
    const hours = time.getHours()
    const hoursForClock = hours >= 13 ? hours % 12 : hours;
    const minutes = time.getMinutes()
    const seconds = time.getSeconds()
    const ampm = hours >= 12 ? 'PM' : 'AM'
    hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`
    minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`
    secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`
    timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
    dateEl.innerHTML = `${days[day]}, ${months[month]} ${date}`
}
// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
setTime()
setInterval(setTime, 1000)

4.自制笔记本

4.1效果展示

4.2思路解析

通过js实现动态添加DOM结构，绑定创建出DOM结构的

添加，删除按钮。实现监听事件。实现动态改变DOM结构

其他的就是设置css的相关属性，

4.3源码

html：

       Add note

css：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
* {
  box-sizing: border-box;
  outline: none;
}
body {
  background-color: #7bdaf3;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 3rem;
}
.add {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background-color: #9ec862;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.add:active {
  transform: scale(0.98);
}
.note {
  background-color: #fff;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
  margin: 30px 20px;
  height: 400px;
  width: 400px;
  overflow-y: scroll;
}
.note .tools {
  background-color: #9ec862;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
}
.note .tools button {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0.5rem;
}
.note textarea {
  outline: none;
  font-family: inherit;
  font-size: 1.2rem;
  border: none;
  height: 400px;
  width: 100%;
  padding: 20px;
}
.main {
  padding: 20px;
}
.hidden {
  display: none;
}

js：

const addBtn = document.getElementById('add')
const notes = JSON.parse(localStorage.getItem('notes'))
if(notes) {
    notes.forEach(note => addNewNote(note))
}
addBtn.addEventListener('click', () => addNewNote())
function addNewNote(text = '') {
    const note = document.createElement('div')
    note.classList.add('note')
    note.innerHTML = `
    
        
        
    
![img](https://img-blog.csdnimg.cn/img_convert/7abd78f71ffb72c5569bb36056046b7a.png)
![img](https://img-blog.csdnimg.cn/img_convert/b029163071066a82c137bbe3f8322fb0.png)
![img](https://img-blog.csdnimg.cn/img_convert/8c0051494986160afd75ddd757e94c08.png)
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**
**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**
**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
ction addNewNote(text = '') {
    const note = document.createElement('div')
    note.classList.add('note')
    note.innerHTML = `
    
        
        
    
[外链图片转存中...(img-245Ezaep-1714628740140)]
[外链图片转存中...(img-HEJlDgwy-1714628740141)]
[外链图片转存中...(img-43A4Pqk1-1714628740141)]
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**
**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**
**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

转载请注明来自码农世界，本文标题：《2024年5个前端练手项目(html css js canvas)》