软件系统定制开发5个前端练手项目(html css js canvas)

 前言：

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

目录

🥩

🍧

🌮

🍲

🍣

1.跑马灯

1.1效果图：

1.2思路解析

在这个项目中，在html中创立20个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. 	}
  73.  
  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>
  12.  
  13. </defs>
  14.  
  15. </svg>
  16.  
  17.  
  18. const colors = ["#e03776","#8f3e98","#4687bf","#3bab6f","#f9c25e","#f47274"];
  19. const SVG_NS = 'http://www.w3.org/2000/svg';
  20. const SVG_XLINK = "http://www.w3.org/1999/xlink";
  21.  
  22. let heartsRy = []
  23.  
  24. function useTheHeart(n){
  25.   let use = document.createElementNS(SVG_NS, 'use');
  26.   use.n = n;
  27.   use.setAttributeNS(SVG_XLINK, 'xlink:href', '#heart');
  28.   use.setAttributeNS(null, 'transform', `scale(${use.n})`);
  29.   use.setAttributeNS(null, 'fill', colors[n%colors.length]);
  30.   use.setAttributeNS(null, 'x', -69);
  31.   use.setAttributeNS(null, 'y', -69);
  32.   use.setAttributeNS(null, 'width', 138);
  33.   use.setAttributeNS(null, 'height', 138);
  34.   
  35.   heartsRy.push(use)
  36.   hearts.appendChild(use);
  37. }
  38.  
  39. for(let n = 18; n >= 0; n--){useTheHeart(n)}
  40.  
  41. function Frame(){
  42.   window.requestAnimationFrame(Frame);
  43.   for(let i = 0; i < heartsRy.length; i++){
  44.     if(heartsRy[i].n < 18){heartsRy[i].n +=.01
  45.      }else{
  46.      heartsRy[i].n = 0;
  47.      hearts.appendChild(heartsRy[i])
  48.     }
  49.     heartsRy[i].setAttributeNS(null, 'transform', `scale(${heartsRy[i].n})`);
  50.   }
  51. }
  52.  
  53. 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');
  2.  
  3. * {
  4.   box-sizing: border-box;
  5. }
  6.  
  7. :root {
  8.   --primary-color: #000;
  9.   --secondary-color: #fff;
  10. }
  11.  
  12. html {
  13.   transition: all 0.5s ease-in;
  14. }
  15.  
  16. html.dark {
  17.   --primary-color: #fff;
  18.   --secondary-color: #333;
  19. }
  20.  
  21. html.dark {
  22.   background-color: #111;
  23.   color: var(--primary-color);
  24. }
  25.  
  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. }
  35.  
  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. }
  46.  
  47. .toggle:focus {
  48.   outline: none;
  49. }
  50.  
  51. .clock-container {
  52.   display: flex;
  53.   flex-direction: column;
  54.   justify-content: space-between;
  55.   align-items: center;
  56. }
  57.  
  58. .clock {
  59.   position: relative;
  60.   width: 200px;
  61.   height: 200px;
  62. }
  63.  
  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. }
  74.  
  75. .needle.hour {
  76.   transform: translate(-50%, -100%) rotate(0deg);
  77. }
  78.  
  79. .needle.minute {
  80.   transform: translate(-50%, -100%) rotate(0deg);
  81.   height: 100px;
  82. }
  83.  
  84. .needle.second {
  85.   transform: translate(-50%, -100%) rotate(0deg);
  86.   height: 100px;
  87.   background-color: #e74c3c;
  88. }
  89.  
  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. }
  100.  
  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. }
  112.  
  113. .time {
  114.   font-size: 60px;
  115. }
  116.  
  117. .date {
  118.   color: #aaa;
  119.   font-size: 14px;
  120.   letter-spacing: 0.3px;
  121.   text-transform: uppercase;
  122. }
  123.  
  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')
  7.  
  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"];
  10.  
  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. })
  21.  
  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'
  32.  
  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)`
  36.  
  37.     timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}`
  38.     dateEl.innerHTML = `${days[day]}, ${months[month]} <span class="circle">${date}</span>`
  39. }
  40.  
  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. }
  45.  
  46. setTime()
  47.  
  48. setInterval(setTime, 1000)
  49.

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>
  8.  
  9.   </body>

 css：

  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
  2.  
  3. * {
  4.   box-sizing: border-box;
  5.   outline: none;
  6. }
  7.  
  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. }
  16.  
  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. }
  28.  
  29. .add:active {
  30.   transform: scale(0.98);
  31. }
  32.  
  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. }
  41.  
  42. .note .tools {
  43.   background-color: #9ec862;
  44.   display: flex;
  45.   justify-content: flex-end;
  46.   padding: 0.5rem;
  47. }
  48.  
  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. }
  57.  
  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. }
  67.  
  68. .main {
  69.   padding: 20px;
  70. }
  71.  
  72. .hidden {
  73.   display: none;
  74. }

js：

  1. const addBtn = document.getElementById('add')
  2.  
  3. const notes = JSON.parse(localStorage.getItem('notes'))
  4.  
  5. if(notes) {
  6.     notes.forEach(note => addNewNote(note))
  7. }
  8.  
  9. addBtn.addEventListener('click', () => addNewNote())
  10.  
  11. function addNewNote(text = '') {
  12.     const note = document.createElement('div')
  13.     note.classList.add('note')
  14.  
  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.     `
  24.  
  25.     const editBtn = note.querySelector('.edit')
  26.     const deleteBtn = note.querySelector('.delete')
  27.     const main = note.querySelector('.main')
  28.     const textArea = note.querySelector('textarea')
  29.  
  30.     textArea.value = text
  31.     main.innerHTML = marked(text)
  32.  
  33.     deleteBtn.addEventListener('click', () => {
  34.         note.remove()
  35.  
  36.         updateLS()
  37.     })
  38.  
  39.     editBtn.addEventListener('click', () => {
  40.         main.classList.toggle('hidden')
  41.         textArea.classList.toggle('hidden')
  42.     })
  43.  
  44.     textArea.addEventListener('input', (e) => {
  45.         const { value } = e.target
  46.  
  47.         main.innerHTML = marked(value)
  48.  
  49.         updateLS()
  50.     })
  51.  
  52.     document.body.appendChild(note)
  53. }
  54.  
  55. function updateLS() {
  56.     const notesText = document.querySelectorAll('textarea')
  57.  
  58.     const notes = []
  59.  
  60.     notesText.forEach(note => notes.push(note.value))
  61.  
  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');
  2.  
  3. * {
  4.   box-sizing: border-box;
  5. }
  6.  
  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. }
  17.  
  18. canvas {
  19.   border: 2px solid steelblue;
  20. }
  21.  
  22. .toolbox {
  23.   background-color: steelblue;
  24.   border: 1px solid slateblue;
  25.   display: flex;
  26.   width: 804px;
  27.   padding: 1rem;
  28. }
  29.  
  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. }
  43.  
  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');
  7.  
  8. const ctx = canvas.getContext('2d');
  9.  
  10. let size = 10
  11. let isPressed = false
  12. colorEl.value = 'black'
  13. let color = colorEl.value
  14. let x
  15. let y
  16.  
  17. canvas.addEventListener('mousedown', (e) => {
  18.     isPressed = true
  19.  
  20.     x = e.offsetX
  21.     y = e.offsetY
  22. })
  23.  
  24. document.addEventListener('mouseup', (e) => {
  25.     isPressed = false
  26.  
  27.     x = undefined
  28.     y = undefined
  29. })
  30.  
  31. canvas.addEventListener('mousemove', (e) => {
  32.     if(isPressed) {
  33.         const x2 = e.offsetX
  34.         const y2 = e.offsetY
  35.  
  36.         drawCircle(x2, y2)
  37.         drawLine(x, y, x2, y2)
  38.  
  39.         x = x2
  40.         y = y2
  41.     }
  42. })
  43.  
  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. }
  50.  
  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. }
  59.  
  60. function updateSizeOnScreen() {
  61.     sizeEL.innerText = size
  62. }
  63.  
  64. increaseBtn.addEventListener('click', () => {
  65.     size += 5
  66.  
  67.     if(size > 50) {
  68.         size = 50
  69.     }
  70.  
  71.     updateSizeOnScreen()
  72. })
  73.  
  74. decreaseBtn.addEventListener('click', () => {
  75.     size -= 5
  76.  
  77.     if(size < 5) {
  78.         size = 5
  79.     }
  80.  
  81.     updateSizeOnScreen()
  82. })
  83.  
  84. colorEl.addEventListener('change', (e) => color = e.target.value)
  85.  
  86. clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发