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

 前言：

首先祝大家端午节快乐。本篇文章有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：

Dark mode 
 
 
 
 
 
 

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：

 Add note

 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 +  X

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))

✍在最后，如果觉得博主写的还行，期待点赞  评论 收藏