位置: IT常识 - 正文

5个前端练手项目(html css js canvas)(哪里能找到前端练手项目教程)

编辑:rootadmin
5个前端练手项目(html css js canvas)

推荐整理分享5个前端练手项目(html css js canvas)(哪里能找到前端练手项目教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:5个前端练手项目是什么,前端高手,5个前端练手项是什么,适合前端初学者的练手项目,适合前端初学者的练手项目,前端练手项目,适合前端初学者的练手项目,5个前端练手项是什么,内容如对您有帮助,希望把文章链接给更多的朋友!

 前言:

首先祝大家端午节快乐。本篇文章有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源码<style>* {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){ }</style></head><body><main><div class="cube"><span style="--i:1;"></span><span style="--i:2;"></span> <span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span><span style="--i:7;"></span><span style="--i:8;"></span><span style="--i:9;"></span><span style="--i:10;"></span><span style="--i:11;"></span><span style="--i:12;"></span><span style="--i:13;"></span><span style="--i:14;"></span><span style="--i:15;"></span><span style="--i:16;"></span><span style="--i:17;"></span><span style="--i:18;"></span><span style="--i:19;"></span><span style="--i:20;"></span></div><div class="loading"> <p>loading</p></div></main></body>2.彩虹爱心2.1效果图

2.2思路解析

搭建基本的html结构,采用的svg技术,

通过js动态改变颜色,以及动态实现切换图形

2.3源码<svg id="hearts" viewBox="-600 -400 1200 800" preserveAspectRatio="xMidYMid slice"><defs><symbol id="heart" viewBox="-69 -16 138 138"><path d="M0,12 C 50,-30 110,50 0,120 C-110,50 -50,-30 0,12z"/></symbol></defs></svg>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源码5个前端练手项目(html css js canvas)(哪里能找到前端练手项目教程)

html:

<body> <button class="toggle">Dark mode</button> <div class="clock-container"> <div class="clock"> <div class="needle hour"></div> <div class="needle minute"></div> <div class="needle second"></div> <div class="center-point"></div> </div> <div class="time"></div> <div class="date"></div> </div></body>

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]} <span class="circle">${date}</span>`}// 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:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> </head> <body> <button class="add" id="add"> <i class="fas fa-plus"></i> Add note </button> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script> </body>

 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 = ` <div class="tools"> <button class="edit"><i class="fas fa-edit"></i></button> <button class="delete"><i class="fas fa-trash-alt"></i></button> </div> <div class="main ${text ? "" : "hidden"}"></div> <textarea class="${text ? "hidden" : ""}"></textarea> ` const editBtn = note.querySelector('.edit') const deleteBtn = note.querySelector('.delete') const main = note.querySelector('.main') const textArea = note.querySelector('textarea') textArea.value = text main.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.target main.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:

<canvas id="canvas" width="800" height="700"></canvas> <div class="toolbox"><button id="decrease">-</button> <span id="size">10</span> <button id="increase">+</button> <input type="color" id="color"> <button id="clear">X</button></div>

css:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');* { box-sizing: border-box;}body { background-color: #f5f5f5; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0;}canvas { border: 2px solid steelblue;}.toolbox { background-color: steelblue; border: 1px solid slateblue; display: flex; width: 804px; padding: 1rem;}.toolbox > * { background-color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; height: 50px; width: 50px; margin: 0.25rem; padding: 0.25rem; cursor: pointer;}.toolbox > *:last-child { margin-left: auto;}

js:

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 = true x = e.offsetX y = e.offsetY})document.addEventListener('mouseup', (e) => { isPressed = false x = undefined y = undefined})canvas.addEventListener('mousemove', (e) => { if(isPressed) { const x2 = e.offsetX const y2 = e.offsetY drawCircle(x2, y2) drawLine(x, y, x2, y2) x = x2 y = y2 }})function drawCircle(x, y) { ctx.beginPath(); ctx.arc(x, y, size, 0, Math.PI * 2) ctx.fillStyle = color ctx.fill()}function drawLine(x1, y1, x2, y2) { ctx.beginPath() ctx.moveTo(x1, y1) ctx.lineTo(x2, y2) ctx.strokeStyle = color ctx.lineWidth = size * 2 ctx.stroke()}function updateSizeOnScreen() { sizeEL.innerText = size}increaseBtn.addEventListener('click', () => { size += 5 if(size > 50) { size = 50 } updateSizeOnScreen()})decreaseBtn.addEventListener('click', () => { size -= 5 if(size < 5) { size = 5 } updateSizeOnScreen()})colorEl.addEventListener('change', (e) => color = e.target.value)clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))

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

本文链接地址:https://www.jiuchutong.com/zhishi/299974.html 转载请保留说明!

上一篇:防抖和节流有什么区别?(节流和防抖js)

下一篇:Redis 被问麻了...(redis常见问题解决)

  • 营销就要敢想、敢试、敢做!三大策略助你玩转营销(敢于营销)

    营销就要敢想、敢试、敢做!三大策略助你玩转营销(敢于营销)

  • 微信头像更换会影响收款吗(微信头像更换会影响二维码收款吗?)

    微信头像更换会影响收款吗(微信头像更换会影响二维码收款吗?)

  • 微信横屏怎么关闭(苹果手机微信横屏怎么设置)

    微信横屏怎么关闭(苹果手机微信横屏怎么设置)

  • 暴风影音显示网络不可用的原因(暴风影音显示网络错误)

    暴风影音显示网络不可用的原因(暴风影音显示网络错误)

  • gpp卡贴弹窗跳不出来怎么办(gpp卡贴怎么弹窗)

    gpp卡贴弹窗跳不出来怎么办(gpp卡贴怎么弹窗)

  •  2020微信大规模封号什么时候结束(微信市场规模)

    2020微信大规模封号什么时候结束(微信市场规模)

  • b250主板支持9代cpu吗(b250主板能上8代u吗)

    b250主板支持9代cpu吗(b250主板能上8代u吗)

  • ps内容识别有什么用(ps内容识别有什么好处)

    ps内容识别有什么用(ps内容识别有什么好处)

  • 华为mate20机身尺寸(华为mate20机身长度)

    华为mate20机身尺寸(华为mate20机身长度)

  • 荣耀20和荣耀30s对比(荣耀20和荣耀30s哪个更值得入手)

    荣耀20和荣耀30s对比(荣耀20和荣耀30s哪个更值得入手)

  • 钉钉回放快进会影响总时长吗(钉钉回放如果快进了还有记录吗)

    钉钉回放快进会影响总时长吗(钉钉回放如果快进了还有记录吗)

  • 苹果手机不能关机怎么办(苹果手机不能关机软件打不开)

    苹果手机不能关机怎么办(苹果手机不能关机软件打不开)

  • vivos5支持nfc吗(vivos5支持无线充吗)

    vivos5支持nfc吗(vivos5支持无线充吗)

  • ps羽化值快捷键(ps羽化快捷键在哪里设置)

    ps羽化值快捷键(ps羽化快捷键在哪里设置)

  • qq看点我的消息怎么清空(qq看点我的消息怎么看)

    qq看点我的消息怎么清空(qq看点我的消息怎么看)

  • 如何查看电脑显卡性能(如何查看电脑显示器配置参数)

    如何查看电脑显卡性能(如何查看电脑显示器配置参数)

  • 办公室一体复印机怎么扫描(办公室一体复印机怎么扫描身份证)

    办公室一体复印机怎么扫描(办公室一体复印机怎么扫描身份证)

  • 电脑怎么打开运行窗口(电脑怎么打开运行对话框)

    电脑怎么打开运行窗口(电脑怎么打开运行对话框)

  • 苹果8p可以放两张卡吗(iphone8p可以放两张卡吗)

    苹果8p可以放两张卡吗(iphone8p可以放两张卡吗)

  • 淘宝自动评价是多少天(淘宝自动评价是五星吗)

    淘宝自动评价是多少天(淘宝自动评价是五星吗)

  • 设置淘宝昵称有啥要求(请问淘宝昵称有什么特别的规定吗)

    设置淘宝昵称有啥要求(请问淘宝昵称有什么特别的规定吗)

  • gamepad怎么用(gamepad1.5.1怎么用)

    gamepad怎么用(gamepad1.5.1怎么用)

  • faceapp怎么用不了(faceapp怎么不能用了)

    faceapp怎么用不了(faceapp怎么不能用了)

  • 小米cc9是双扬声器吗(小米cc9是单声道还是双声道)

    小米cc9是双扬声器吗(小米cc9是单声道还是双声道)

  • 云闪付怎么改手机号码(云闪付怎样更改手机号)

    云闪付怎么改手机号码(云闪付怎样更改手机号)

  • 如何制作电子相册视频(如何制作电子相册)

    如何制作电子相册视频(如何制作电子相册)

  • 阿里小号安全吗(阿里小号正规吗)

    阿里小号安全吗(阿里小号正规吗)

  • DHCP安全维护范围(dhcp的安全防范)

    DHCP安全维护范围(dhcp的安全防范)

  • 网页制作软件、网页设计软件有哪些,如何选择适合自己的?(web网页制作软件)

    网页制作软件、网页设计软件有哪些,如何选择适合自己的?(web网页制作软件)

  • 部署ChatGPT开源项目chatgpt-web(bat开源项目)

    部署ChatGPT开源项目chatgpt-web(bat开源项目)

  • 个人出租非住房房产税怎么计算
  • 建筑业增值税税额怎么算
  • 计提坏账准备的做法体现了
  • 公司组织旅游的费用要交个税
  • 发票确认平台勾选步骤
  • 资本公积转增股本个人所得税
  • 非税项目明细代码
  • 农业合作社预付款怎么算
  • 费用科目如何结转
  • 增值税进项和销项税的计算方法
  • 股权转让的印花税是按照什么金额缴纳
  • 内销选择性征收关税政策试点
  • 开户许可证复印件是什么
  • 隔月的发票能作废吗
  • 电脑温度过高会怎么样
  • 利润分配属于什么活动
  • 不要运行指定的Windows应用程序怎么设置win10教程
  • php解析xml文件
  • 跳线和短接
  • 未分配利润转增股本 母公司会计分录
  • 投资性房地产期末公允价值大于账面价值
  • 计提增值税可以无付凭证吗
  • thinkphp i方法
  • 南奥索峰的Lac d'Ayous小屋,法国 (© Eneko Aldaz/Offset by Shutterstock)
  • php将数据导出到excel
  • 财产清查两种制度
  • 职工教育经费可以以后年度结转吗
  • 企业所得税是地税申报还是国税申报
  • Centos6.5和Centos7 php环境搭建方法
  • waffe
  • 个人所得税现金流量表属于哪一项
  • php安装oci8
  • spring boot 2.3.0
  • 人工智能科技向善
  • github账号在哪里看
  • Chat GPT5如果问世会对世界产生什么影响?以及未来chat gpt 5会取代什么类型的工作。
  • php css教程下载
  • ldd命令详解
  • 织梦怎么建站
  • sql实例命名规则
  • 税前补发补扣
  • 房地产企业将开发产品用于职工福利
  • 出租车发票可以改时间吗
  • 股东收到投资收益会计科目
  • 收取子公司管理费用
  • 文化事业建设费的征收标准
  • 免抵退税和留抵退税计算题
  • 核定征收的一般纳税人进项税额抵扣
  • 软件公司se
  • 客户用个人账户转4s店开公司的机动车发票
  • 物业费是否需要物价局备案
  • xp怎么删除系统
  • windows server 2003 r2 序列号
  • ubuntu18 设置静态ip
  • 苹果Mac系统怎么安装
  • puppet部署
  • qvp32.exe - qvp32是什么进程 有什么作用
  • mac如何开启查找我的mac
  • linux目录结构创建
  • 游戏引擎的重要性
  • js设计模式有什么用
  • js对象属性值
  • Node.js中的事件循环是什么意思
  • 慎用是能用还是不能用
  • 批处理实现语音报警
  • 触摸模式设置
  • shell脚本配置环境
  • 如何用jquery
  • js移动dom
  • python socks
  • 15个值得开发人是谁
  • 辽宁省国家税务总局
  • 核准类和备案类项目
  • 税务局风险评估是什么意思
  • 武汉市房产证契税 2023
  • 徐州市哪些区域封闭了
  • 加油河南app怎么注销
  • 留底税额怎么写分录
  • 国家税务总局查询发票
  • 中国的消费税是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设