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

最新推荐文章于 2024-05-13 13:40:59 发布
最新推荐文章于 2024-05-13 13:40:59 发布
阅读量933 收藏 29
点赞数 30
分类专栏： 程序员 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84160361/article/details/138391017
版权 
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(18degvar(–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.1svar(–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效果图


![](https://img-blog.csdnimg.cn/a444f8f8d2cb482ca8fc3349f9be6055.gif)


#### 




---


#### 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效果图


![](https://img-blog.csdnimg.cn/a8fdc2df096b468a885638521a1c1d57.gif)


#### 




---


#### 3.2思路解析



> 
> 搭建基本的html结构，**动态得到实时的时，分，秒**
> 
> 
> 通过Date()函数获得。将得到的数字根据逻辑，绑定
> 
> 
> 给各div结构，实行动态旋转。点击按钮，改变背景颜色
> 
> 
> 




---


#### 3.3源码


html：
Dark mode
```

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-numbers
const 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>



![img](https://img-blog.csdnimg.cn/img_convert/7abd78f71ffb72c5569bb36056046b7a.png)
![img](https://img-blog.csdnimg.cn/img_convert/b029163071066a82c137bbe3f8322fb0.png)
![img](https://img-blog.csdnimg.cn/img_convert/8c0051494986160afd75ddd757e94c08.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

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



[外链图片转存中...(img-245Ezaep-1714628740140)]
[外链图片转存中...(img-HEJlDgwy-1714628740141)]
[外链图片转存中...(img-43A4Pqk1-1714628740141)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
2401_84160361
关注
  • 30
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
5个前端练手项目(html css js canvas)
web18334137065的博客
07-27 1255
搭建html结构,创建canvas标签，绑定设置的结构比如+，-，颜色改变动态设置并获取他的值，然后将这些值动态的设置为canvas语法中设置渲染的宽度，以及设置颜色的属性。
【必看】2020年新型前端HTML5+CSS3+JS+Canvas+AJAX+Http前后端交互
06-17
课程包含HTML5新标签新规范，DIV+CSS设计、Canvas绘画；CSS样式设计，其中有动画特效、渐变、图形图像、2D/3D转换特效、自适应网页设计等；JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端...
HTML+CSS项目案例
qq_52108058的博客
11-30 3454
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
2024年前端最新HTML+CSS+JS+Jquery+练手项目+，面试知识及准备
最新发布
2401_84437530的博客
05-13 845
=======非常实用的教程+案例，均有详细的步骤讲解，不懂得可以私信博主，看到就会回的！一、HTML一、二、三、四、五、六、七、八、九、十、二、CSS一、二、三、四.、五、六、七、九.十.十一.十二.三、JavaScript。
HTML实战小项目：简单的注册页面，汇款单，“将进酒”布局
weixin_67259816的博客
10-28 733
【代码】HTML实战小项目：简单的注册页面，汇款单，“将进酒”布局。纯HTML写的，希望大家可以共同学习进步；作为前端小白，只是想把功能实现出来。
web网页设计与开发：HTML的环境网站设计 HTML+CSS环保网站项目实现 带设计说明psd
qq_524614081的博客
01-04 570
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML项目案例，适合练手总结。
qq_47828130的博客
11-06 7395
HTML网页设计虽然简单，但也有很多细节需要留意，特别是浮动和定位的知识点，需要理清思路！
html+css+js+canvas
12-07
主要使用canvas写出流动爱心
web前端基础入门教程之HTML5 Canvas详细解读
01-08
Canvas – 路径新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。 在Canvas上画线，我们将使用以下两种方法： moveTo...
html5 CSS3 Canvas 彩带飞舞动画，很不错.rar
07-10
这是一个由html5 CSS3 Canvas 技术生成的彩带飞舞动画，很不错的炫丽效果，没使用任何的图片修饰，全部是Canvas生成的彩带效果，再加入动画的控制（由JavaScript来实现），最终形成了十分炫酷的效果。同时本效果也可...
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
HTML+css+js
10-14
完全展示了js在html的用法。
HTMl小项目
09-12
html网页开发项目，小组制作，没有后台，只是网页设计
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
75套html项目模板-前端项目工程源码
10-10
各种网站模板、后台模板、商城模板、CMS模板、网页模板、响应式模板、自适应模板、手机模板等网站源码。商城模板网站模板、商城模板网站源码、商城模板建站模板下载、电商模板、移动端模板、个人博客模板、课程设计、网站门户、响应式网页源码
爱心 html css canvas js
12-04
使用html css canvas js 完成的一个爱心前端页面
关于HTML5的主结构及简单项目实战
m0_73058235的博客
04-14 587
首页图书论坛
html + css + js简单的项目
博客简介
01-16 2734
简单的3d动画，白天黑夜按钮，开关效果
html5+css3+js期末项目
11-03
HTML5 CSS3 JS期末项目是一种综合运用HTML5、CSS3和JavaScript的项目。在这个项目中，我们会利用HTML5的新特性和标签来构建一个现代化的网页，并使用CSS3来美化页面的样式和布局。同时，我们还会运用JavaScript来实现网页的交互和功能。 在这个项目中，我们可以选择一个主题或者功能，然后根据需求使用HTML5、CSS3和JavaScript来实现相应的功能和效果。例如，我们可以设计一个购物网站，利用HTML5的表单元素和本地存储功能来实现用户注册和登录，使用CSS3来美化网页的样式和布局，利用JavaScript来实现购物车和商品分类的交互。 在实现过程中，我们可以运用HTML5的新元素和特性，如语义化标签、多媒体标签和canvas绘图等，来增加网页的功能和表现力。同时，我们还可以利用CSS3的新特性，如过渡效果、动画和弹性布局等，来提升页面的视觉效果。最后，我们可以使用JavaScript来实现网页的动态交互，如表单验证、页面滚动和数据请求等。 总之，HTML5 CSS3 JS期末项目是一种综合性的项目，通过运用HTML5、CSS3和JavaScript的新特性和技术，我们可以创建出具有丰富功能和出色外观的现代化网页。这个项目可以让我们实践和巩固所学的知识，提高编码能力和创造力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值