📇 | 🎃 | 🍺 | 🍥 | |
---|---|---|---|---|
clock:☆ | GreedySnake:★☆ | TicTacToe:★ | calculator:★ | WeatherApp:★☆ |
JavaScript30:★☆ | Minesweeper:★ | ToDoList:★ |
clock : ☆
- 1、html自定义属性
data-name=value
,以data-
开头
<div class="hand hour" data-hour-hand></div>
- 2、css自定义变量
--name:value
,以--
开头
.clock .number {
/* css自定义变量:--name:value */
--rotation: 0;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
/* 使用var引用变量 */
transform: rotate(var(--rotation));
font-size: 1.5rem;
}
GreedySnake : ★☆
- 1、grid布局
#game-board {
background-color: #ccc;
width: 100vmin;
height: 100vmin;
display: grid;
/* 定义大小为21*21 */
grid-template-columns: repeat(21, 1fr);
grid-template-rows: repeat(21, 1fr);
}
TicTacToe : ★
- 1、::after与::before以及not选择器的使用
.cell.x::before,
.cell.x::after,
/* 不是x类也不是circle类才会应用此属性 */
.board.x .cell:not(.x):not(.circle):hover::before,
.board.x .cell:not(.x):not(.circle):hover::after {
content: "";
position: absolute;
width: calc(var(--mark-size) * .15);
height: var(--mark-size);
}
calculator : ★
一个简易计算器
WeatherApp : ★☆
- api的使用
fetchWeather(city) {
fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${this.key}&units=metric`)
.then(response => response.json())
.then(data => this.displayWeather(data))
}
获取天气 获取天气图片 具体使用见代码line17 line29
JavaScript30 : ★☆
实现了部分JavaScript30上的代码
- audio标签
<audio src="./sounds/tink.wav" data-key="76"></audio>
- classList.toggole
const panels = document.querySelectorAll('.panel')
panels.forEach(panel => panel.addEventListener('click', e=>{
// toggle:The toggle() method of the DOMTokenList interface
// removes a given token from the list and returns false.
// If token doesn't exist it's added and the function returns true.
panel.classList.toggle('open')
}))
- js修改css变量
const suffix = this.dataset.sizing || ''
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
Minesweeper : ★