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

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