0
0

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

前言：

首先祝大家端午节快乐。本篇文章有5个练手项目
对于刚学完前端三剑客的你们。应该是一个很好的实践

1.跑马灯

1.1效果图：

1.2思路解析

在这个项目中，在html中创立20个span标签

每个span标签设置style为--i:数字的样式用于

在css中动态分配圆圈分几份，transform: rotate(calc(18deg*var(--i)))

利用filter属性结合关键帧动态切换颜色。同时设置每一个span标签进行

旋转

1.3源码

  1. <style>
  2.     * {
  3.     padding: 0;
  4.     margin: 0;
  5.     box-sizing: border-box;
  6.     }
  7. main{
  8.     display: flex;
  9.     background-color: #2c3a47;
  10.     /*用于设置图像居中 */
  11.     align-items: center;
  12.     justify-content: center;
  13.     width: 1920px;
  14.     height: 1000px;
  15.     animation: animate1 10s linear infinite;
  16.     }
  17. /* 用于设置动画属性 其中filter用于做利镜其中的hue-rotate属性让图像运用色相旋转*/
  18. @keyframes animate1 {
  19.     0% {
  20.         filter: hue-rotate(0deg);
  21.         }
  22.     100% {
  23.         filter: hue-rotate(360deg);
  24.             }
  25.         }
  26. main .cube {
  27.         position: relative;
  28.         height: 120px;
  29.         width: 120px;
  30.         }
  31. main .cube span {
  32.     position: absolute;
  33.     top: 0;
  34.     left: 0;
  35.     width: 100%;
  36.     height: 100%;
  37.     /* 用于设置一个圆圈被分成几份 */
  38.     transform: rotate(calc(18deg*var(--i)));
  39.     }
  40.     /* :before用于设置在给定的属性之前添加效果 */
  41. main .cube span::before {
  42.         content: '';
  43.         position: absolute;
  44.         top: 0;
  45.         left: 0;
  46.         width: 15px;
  47.         height: 15px;
  48.         border-radius: 50%;
  49.         background-color: aqua;
  50.         box-shadow: 0 0 10px aqua ,0 0 20px aqua,0 0 40px aqua,0 0 80px aqua,0 0 100px aqua;
  51. animation: animate 2s linear infinite;
  52.         animation-delay: calc(0.1s*var(--i));
  53.         }
  54. @keyframes animate {
  55.     0% {
  56.         transform: scale(1);
  57.         }
  58.     80%,
  59.     100% {
  60.         transform: scale(0);
  61.         }
  62.     }
  63. .loading{
  64.         color:#fff;
  65.         font-size: 20px;
  66.         position: relative;
  67.         top:100px;
  68.         right:100px;
  69.           }
  70. @media (min-width:765px){ 
  71.             
  72.     }
  74. </style>
  75. </head>
  76. <body>
  77. <main>
  78. <div class="cube">
  79.     <span style="--i:1;"></span>
  80.     <span style="--i:2;"></span>
  81.     <span style="--i:3;"></span>
  82.     <span style="--i:4;"></span>
  83.     <span style="--i:5;"></span>
  84.     <span style="--i:6;"></span>
  85.     <span style="--i:7;"></span>
  86.     <span style="--i:8;"></span>
  87.     <span style="--i:9;"></span>
  88.     <span style="--i:10;"></span>
  89.     <span style="--i:11;"></span>
  90.     <span style="--i:12;"></span>
  91.     <span style="--i:13;"></span>
  92.     <span style="--i:14;"></span>
  93.     <span style="--i:15;"></span>
  94.     <span style="--i:16;"></span>
  95.     <span style="--i:17;"></span>
  96.     <span style="--i:18;"></span>
  97.     <span style="--i:19;"></span>
  98.     <span style="--i:20;"></span>
  99. </div>
  100. <div class="loading">
  101.     <p>loading</p>
  102. </div>
  103. </main>
  104. </body>

2.彩虹爱心

2.1效果图

2.2思路解析

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

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

2.3源码

  1. <svg id="hearts" viewBox="-600 -400 1200 800" preserveAspectRatio="xMidYMid slice">
  2.   
  3. <defs>
  4.     
  5. <symbol  id="heart" viewBox="-69 -16 138 138">
  6.     
  7. <path d="M0,12
  8.          C 50,-30 110,50  0,120
  9.          C-110,50 -50,-30 0,12z"/>
  10.     
  11. </symbol>
  13. </defs>
  15. </svg>
  17. const colors = ["#e03776","#8f3e98","#4687bf","#3bab6f","#f9c25e","#f47274"];
  18. const SVG_NS = 'http://www.w3.org/2000/svg';
  19. const SVG_XLINK = "http://www.w3.org/1999/xlink";
  21. let heartsRy = []
  23. function useTheHeart(n){
  24.   let use = document.createElementNS(SVG_NS, 'use');
  25.   use.n = n;
  26.   use.setAttributeNS(SVG_XLINK, 'xlink:href', '#heart');
  27.   use.setAttributeNS(null, 'transform', `scale(${use.n})`);
  28.   use.setAttributeNS(null, 'fill', colors[n%colors.length]);
  29.   use.setAttributeNS(null, 'x', -69);
  30.   use.setAttributeNS(null, 'y', -69);
  31.   use.setAttributeNS(null, 'width', 138);
  32.   use.setAttributeNS(null, 'height', 138);
  33.   
  34.   heartsRy.push(use)
  35.   hearts.appendChild(use);
  36. }
  38. for(let n = 18; n >= 0; n--){useTheHeart(n)}
  40. function Frame(){
  41.   window.requestAnimationFrame(Frame);
  42.   for(let i = 0; i < heartsRy.length; i++){
  43.     if(heartsRy[i].n < 18){heartsRy[i].n +=.01
  44.      }else{
  45.      heartsRy[i].n = 0;
  46.      hearts.appendChild(heartsRy[i])
  47.     }
  48.     heartsRy[i].setAttributeNS(null, 'transform', `scale(${heartsRy[i].n})`);
  49.   }
  50. }
  52. Frame()

3.闹钟

3.1效果图

3.2思路解析

搭建基本的html结构，动态得到实时的时，分，秒

通过Date()函数获得。将得到的数字根据逻辑，绑定

给各div结构，实行动态旋转。点击按钮，改变背景颜色

3.3源码

html：

  1. <body>
  2.   <button class="toggle">Dark mode</button>
  3.  <div class="clock-container">
  4.    <div class="clock">
  5.      <div class="needle hour"></div>
  6.      <div class="needle minute"></div>
  7.      <div class="needle second"></div>
  8.      <div class="center-point"></div>
  9.    </div>
  10.       <div class="time"></div>
  11.       <div class="date"></div>
  12.   </div>
  13. </body>

css:

  1. @import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap');
  3. * {
  4.   box-sizing: border-box;
  5. }
  7. :root {
  8.   --primary-color: #000;
  9.   --secondary-color: #fff;
  10. }
  12. html {
  13.   transition: all 0.5s ease-in;
  14. }
  16. html.dark {
  17.   --primary-color: #fff;
  18.   --secondary-color: #333;
  19. }
  21. html.dark {
  22.   background-color: #111;
  23.   color: var(--primary-color);
  24. }
  26. body {
  27.   font-family: 'Heebo', sans-serif;
  28.   display: flex;
  29.   align-items: center;
  30.   justify-content: center;
  31.   height: 100vh;
  32.   overflow: hidden;
  33.   margin: 0;
  34. }
  36. .toggle {
  37.   cursor: pointer;
  38.   background-color: var(--primary-color);
  39.   color: var(--secondary-color);
  40.   border: 0;
  41.   border-radius: 4px;
  42.   padding: 8px 12px;
  43.   position: absolute;
  44.   top: 100px;
  45. }
  47. .toggle:focus {
  48.   outline: none;
  49. }
  51. .clock-container {
  52.   display: flex;
  53.   flex-direction: column;
  54.   justify-content: space-between;
  55.   align-items: center;
  56. }
  58. .clock {
  59.   position: relative;
  60.   width: 200px;
  61.   height: 200px;
  62. }
  64. .needle {
  65.   background-color: var(--primary-color);
  66.   position: absolute;
  67.   top: 50%;
  68.   left: 50%;
  69.   height: 65px;
  70.   width: 3px;
  71.   transform-origin: bottom center;
  72.   transition: all 0.5s ease-in;
  73. }
  75. .needle.hour {
  76.   transform: translate(-50%, -100%) rotate(0deg);
  77. }
  79. .needle.minute {
  80.   transform: translate(-50%, -100%) rotate(0deg);
  81.   height: 100px;
  82. }
  84. .needle.second {
  85.   transform: translate(-50%, -100%) rotate(0deg);
  86.   height: 100px;
  87.   background-color: #e74c3c;
  88. }
  90. .center-point {
  91.   background-color: #e74c3c;
  92.   width: 10px;
  93.   height: 10px;
  94.   position: absolute;
  95.   top: 50%;
  96.   left: 50%;
  97.   transform: translate(-50%, -50%);
  98.   border-radius: 50%;
  99. }
  101. .center-point::after {
  102.   content: '';
  103.   background-color: var(--primary-color);
  104.   width: 5px;
  105.   height: 5px;
  106.   position: absolute;
  107.   top: 50%;
  108.   left: 50%;
  109.   transform: translate(-50%, -50%);
  110.   border-radius: 50%;
  111. }
  113. .time {
  114.   font-size: 60px;
  115. }
  117. .date {
  118.   color: #aaa;
  119.   font-size: 14px;
  120.   letter-spacing: 0.3px;
  121.   text-transform: uppercase;
  122. }
  124. .date .circle {
  125.   background-color: var(--primary-color);
  126.   color: var(--secondary-color);
  127.   border-radius: 50%;
  128.   height: 18px;
  129.   width: 18px;
  130.   display: inline-flex;
  131.   align-items: center;
  132.   justify-content: center;
  133.   line-height: 18px;
  134.   transition: all 0.5s ease-in;
  135.   font-size: 12px;
  136. }

js:

  1. const hourEl = document.querySelector('.hour')
  2. const minuteEl = document.querySelector('.minute')
  3. const secondEl = document.querySelector('.second')
  4. const timeEl = document.querySelector('.time')
  5. const dateEl = document.querySelector('.date')
  6. const toggle = document.querySelector('.toggle')
  8. const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  9. const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  11. toggle.addEventListener('click', (e) => {
  12.     const html = document.querySelector('html')
  13.     if (html.classList.contains('dark')) {
  14.         html.classList.remove('dark')
  15.         e.target.innerHTML = 'Dark mode'
  16.     } else {
  17.         html.classList.add('dark')
  18.         e.target.innerHTML = 'Light mode'
  19.     }
  20. })
  22. function setTime() {
  23.     const time = new Date();
  24.     const month = time.getMonth()
  25.     const day = time.getDay()
  26.     const date = time.getDate()
  27.     const hours = time.getHours()
  28.     const hoursForClock = hours >= 13 ? hours % 12 : hours;
  29.     const minutes = time.getMinutes()
  30.     const seconds = time.getSeconds()
  31.     const ampm = hours >= 12 ? 'PM' : 'AM'
  33.     hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 12, 0, 360)}deg)`
  34.     minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 60, 0, 360)}deg)`
  35.     secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 60, 0, 360)}deg)`
  37.     timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
  38.     dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`
  39. }
  41. // StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
  42. const scale = (num, in_min, in_max, out_min, out_max) => {
  43.     return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
  44. }
  46. setTime()
  48. setInterval(setTime, 1000)

4.自制笔记本

4.1效果展示

4.2思路解析

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

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

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

4.3源码

html：

  1. <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" />
  2.   </head>
  3.   <body>
  4.     <button class="add" id="add">
  5.       <i class="fas fa-plus"></i> Add note
  6.     </button>
  7.     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>
  9.   </body>

css：

  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
  3. * {
  4.   box-sizing: border-box;
  5.   outline: none;
  6. }
  8. body {
  9.   background-color: #7bdaf3;
  10.   font-family: 'Poppins', sans-serif;
  11.   display: flex;
  12.   flex-wrap: wrap;
  13.   margin: 0;
  14.   padding-top: 3rem;
  15. }
  17. .add {
  18.   position: fixed;
  19.   top: 1rem;
  20.   right: 1rem;
  21.   background-color: #9ec862;
  22.   color: #fff;
  23.   border: none;
  24.   border-radius: 3px;
  25.   padding: 0.5rem 1rem;
  26.   cursor: pointer;
  27. }
  29. .add:active {
  30.   transform: scale(0.98);
  31. }
  33. .note {
  34.   background-color: #fff;
  35.   box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
  36.   margin: 30px 20px;
  37.   height: 400px;
  38.   width: 400px;
  39.   overflow-y: scroll;
  40. }
  42. .note .tools {
  43.   background-color: #9ec862;
  44.   display: flex;
  45.   justify-content: flex-end;
  46.   padding: 0.5rem;
  47. }
  49. .note .tools button {
  50.   background-color: transparent;
  51.   border: none;
  52.   color: #fff;
  53.   cursor: pointer;
  54.   font-size: 1rem;
  55.   margin-left: 0.5rem;
  56. }
  58. .note textarea {
  59.   outline: none;
  60.   font-family: inherit;
  61.   font-size: 1.2rem;
  62.   border: none;
  63.   height: 400px;
  64.   width: 100%;
  65.   padding: 20px;
  66. }
  68. .main {
  69.   padding: 20px;
  70. }
  72. .hidden {
  73.   display: none;
  74. }

js：

  1. const addBtn = document.getElementById('add')
  3. const notes = JSON.parse(localStorage.getItem('notes'))
  5. if(notes) {
  6.     notes.forEach(note => addNewNote(note))
  7. }
  9. addBtn.addEventListener('click', () => addNewNote())
  11. function addNewNote(text = '') {
  12.     const note = document.createElement('div')
  13.     note.classList.add('note')
  15.     note.innerHTML = `
  16.     <div class="tools">
  17.         <button class="edit"><i class="fas fa-edit"></i></button>
  18.         <button class="delete"><i class="fas fa-trash-alt"></i></button>
  19.     </div>
  21.     <div class="main ${text ? "" : "hidden"}"></div>
  22.     <textarea class="${text ? "hidden" : ""}"></textarea>
  23.     `
  25.     const editBtn = note.querySelector('.edit')
  26.     const deleteBtn = note.querySelector('.delete')
  27.     const main = note.querySelector('.main')
  28.     const textArea = note.querySelector('textarea')
  30.     textArea.value = text
  31.     main.innerHTML = marked(text)
  33.     deleteBtn.addEventListener('click', () => {
  34.         note.remove()
  36.         updateLS()
  37.     })
  39.     editBtn.addEventListener('click', () => {
  40.         main.classList.toggle('hidden')
  41.         textArea.classList.toggle('hidden')
  42.     })
  44.     textArea.addEventListener('input', (e) => {
  45.         const { value } = e.target
  47.         main.innerHTML = marked(value)
  49.         updateLS()
  50.     })
  52.     document.body.appendChild(note)
  53. }
  55. function updateLS() {
  56.     const notesText = document.querySelectorAll('textarea')
  58.     const notes = []
  60.     notesText.forEach(note => notes.push(note.value))
  62.     localStorage.setItem('notes', JSON.stringify(notes))
  63. }

5.自定义写字台（也可自定义字的样式）

5.1效果展示

5.2思路解析

搭建html结构,创建canvas标签，

绑定设置的结构比如+，-，颜色改变

动态设置并获取他的值，然后将这些值动态的

设置为canvas语法中设置渲染的宽度，以及设置

颜色的属性

5.3源码

html:

  1. <canvas id="canvas" width="800" height="700"></canvas>
  2.  <div class="toolbox">
  3. <button id="decrease">-</button>
  4.  <span id="size">10</span>
  5.  <button id="increase">+</button>
  6.  <input type="color" id="color">
  7.  <button id="clear">X</button>
  8. </div>

css:

  1. @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
  3. * {
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   background-color: #f5f5f5;
  9.   font-family: 'Roboto', sans-serif;
  10.   display: flex;
  11.   flex-direction: column;
  12.   align-items: center;
  13.   justify-content: center;
  14.   height: 100vh;
  15.   margin: 0;
  16. }
  18. canvas {
  19.   border: 2px solid steelblue;
  20. }
  22. .toolbox {
  23.   background-color: steelblue;
  24.   border: 1px solid slateblue;
  25.   display: flex;
  26.   width: 804px;
  27.   padding: 1rem;
  28. }
  30. .toolbox > * {
  31.   background-color: #fff;
  32.   border: none;
  33.   display: inline-flex;
  34.   align-items: center;
  35.   justify-content: center;
  36.   font-size: 2rem;
  37.   height: 50px;
  38.   width: 50px;
  39.   margin: 0.25rem;
  40.   padding: 0.25rem;
  41.   cursor: pointer;
  42. }
  44. .toolbox > *:last-child {
  45.   margin-left: auto;
  46. }

js:

  1. const canvas = document.getElementById('canvas');
  2. const increaseBtn = document.getElementById('increase');
  3. const decreaseBtn = document.getElementById('decrease');
  4. const sizeEL = document.getElementById('size');
  5. const colorEl = document.getElementById('color');
  6. const clearEl = document.getElementById('clear');
  8. const ctx = canvas.getContext('2d');
  10. let size = 10
  11. let isPressed = false
  12. colorEl.value = 'black'
  13. let color = colorEl.value
  14. let x
  15. let y
  17. canvas.addEventListener('mousedown', (e) => {
  18.     isPressed = true
  20.     x = e.offsetX
  21.     y = e.offsetY
  22. })
  24. document.addEventListener('mouseup', (e) => {
  25.     isPressed = false
  27.     x = undefined
  28.     y = undefined
  29. })
  31. canvas.addEventListener('mousemove', (e) => {
  32.     if(isPressed) {
  33.         const x2 = e.offsetX
  34.         const y2 = e.offsetY
  36.         drawCircle(x2, y2)
  37.         drawLine(x, y, x2, y2)
  39.         x = x2
  40.         y = y2
  41.     }
  42. })
  44. function drawCircle(x, y) {
  45.     ctx.beginPath();
  46.     ctx.arc(x, y, size, 0, Math.PI * 2)
  47.     ctx.fillStyle = color
  48.     ctx.fill()
  49. }
  51. function drawLine(x1, y1, x2, y2) {
  52.     ctx.beginPath()
  53.     ctx.moveTo(x1, y1)
  54.     ctx.lineTo(x2, y2)
  55.     ctx.strokeStyle = color
  56.     ctx.lineWidth = size * 2
  57.     ctx.stroke()
  58. }
  60. function updateSizeOnScreen() {
  61.     sizeEL.innerText = size
  62. }
  64. increaseBtn.addEventListener('click', () => {
  65.     size += 5
  67.     if(size > 50) {
  68.         size = 50
  69.     }
  71.     updateSizeOnScreen()
  72. })
  74. decreaseBtn.addEventListener('click', () => {
  75.     size -= 5
  77.     if(size < 5) {
  78.         size = 5
  79.     }
  81.     updateSizeOnScreen()
  82. })
  84. colorEl.addEventListener('change', (e) => color = e.target.value)
  86. clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))

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

标签： css css3 html
本文转载自: https://blog.csdn.net/m0_51311990/article/details/125117079
版权归原作者 言不及行yyds 所有， 如有侵权，请联系我们删除。
登录后发布评论

“5个前端练手项目(html css js canvas)”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？