前言：
首先祝大家端午节快乐。本篇文章有5个练手项目
对于刚学完前端三剑客的你们。应该是一个很好的实践
目录
.跑马灯
1.1效果图：
1.2思路解析
1.3源码
.彩虹爱心
2.1效果图
2.2思路解析
2.3源码
.闹钟
3.1效果图
3.2思路解析
3.3源码
.自制笔记本
4.1效果展示
4.2思路解析
4.3源码
.自定义写字台（也可自定义字的样式）
5.1效果展示
5.2思路解析
5.3源码
1.跑马灯
1.1效果图：
1.2思路解析
在这个项目中，在html中创立20个span标签
每个span标签设置style为–i:数字的样式用于
在css中动态分配圆圈分几份，transform: rotate(calc(18deg*var(–i)))
利用filter属性结合关键帧动态切换颜色。同时设置每一个span标签进行
旋转
1.3源码
* {padding: 0;margin: 0;box-sizing: border-box;}main{display: flex;background-color: #2c3a47;/*用于设置图像居中 */align-items: center;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(18deg*var(--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.1s*var(--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){ }loading
2.彩虹爱心
2.1效果图
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效果图
3.2思路解析
搭建基本的html结构，动态得到实时的时，分，秒
通过Date()函数获得。将得到的数字根据逻辑，绑定
给各div结构，实行动态旋转。点击按钮，改变背景颜色
3.3源码
html：
css:
@import url('https://fonts.googleapis.com/css" />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-numbersconst 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：
css：
@import url('https://fonts.googleapis.com/css2" />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 = ``const editBtn = note.querySelector('.edit')const deleteBtn = note.querySelector('.delete')const main = note.querySelector('.main')const textArea = note.querySelector('textarea')textArea.value = textmain.innerHTML = marked(text)deleteBtn.addEventListener('click', () => {note.remove()updateLS()})editBtn.addEventListener('click', () => {main.classList.toggle('hidden')textArea.classList.toggle('hidden')})textArea.addEventListener('input', (e) => {const { value } = e.targetmain.innerHTML = marked(value)updateLS()})document.body.appendChild(note)}function updateLS() {const notesText = document.querySelectorAll('textarea')const notes = []notesText.forEach(note => notes.push(note.value))localStorage.setItem('notes', JSON.stringify(notes))}5.自定义写字台（也可自定义字的样式）
5.1效果展示
5.2思路解析
搭建html结构,创建canvas标签，
绑定设置的结构比如+，-，颜色改变
动态设置并获取他的值，然后将这些值动态的
设置为canvas语法中设置渲染的宽度，以及设置
颜色的属性
5.3源码
html:
10 css:
@import url('https://fonts.googleapis.com/css2" />const canvas = document.getElementById('canvas');const increaseBtn = document.getElementById('increase');const decreaseBtn = document.getElementById('decrease');const sizeEL = document.getElementById('size');const colorEl = document.getElementById('color');const clearEl = document.getElementById('clear');const ctx = canvas.getContext('2d');let size = 10let isPressed = falsecolorEl.value = 'black'let color = colorEl.valuelet xlet ycanvas.addEventListener('mousedown', (e) => {isPressed = truex = e.offsetXy = e.offsetY})document.addEventListener('mouseup', (e) => {isPressed = falsex = undefinedy = undefined})canvas.addEventListener('mousemove', (e) => {if(isPressed) {const x2 = e.offsetXconst y2 = e.offsetYdrawCircle(x2, y2)drawLine(x, y, x2, y2)x = x2y = y2}})function drawCircle(x, y) {ctx.beginPath();ctx.arc(x, y, size, 0, Math.PI * 2)ctx.fillStyle = colorctx.fill()}function drawLine(x1, y1, x2, y2) {ctx.beginPath()ctx.moveTo(x1, y1)ctx.lineTo(x2, y2)ctx.strokeStyle = colorctx.lineWidth = size * 2ctx.stroke()}function updateSizeOnScreen() {sizeEL.innerText = size}increaseBtn.addEventListener('click', () => {size += 5if(size > 50) {size = 50}updateSizeOnScreen()})decreaseBtn.addEventListener('click', () => {size -= 5if(size color = e.target.value)clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))✍在最后，如果觉得博主写的还行，期待点赞 评论 收藏
