前端案例 簡約鐘錶

目錄

【前端案例】簡約鐘錶 （原始碼+注釋）

0.【效果圖】

1.**-【css部分 】

2.**-【js部分 】

3.**-【html部分 】 

/* 名稱: :nth-child(n) 選擇器

功能: 匹配屬於其父元素的第 n 個子元素，不論元素的型別。 */

.clock ul li:nth-child(1)

.clock ul li:nth-child(2)

.clock ul li:nth-child(3)

.clock ul li:nth-child(4)

.clock ul li:nth-child(5)

.clock ul li:nth-child(6)

.clock ul li:nth-child(7)

.clock ul li:nth-child(8)

.clock ul li:nth-child(9)

.clock ul li:nth-child(10)

.clock ul li:nth-child(11)

.clock ul li:nth-child(12)

.author

window.onload=function()deg)`;

const minute = time_now.getminutes();
const minutedeg = ((minute/60)*360);
minutehand.style.transform = `rotate($deg)`;
const hour = time_now.gethours();
const hourdeg = ((hour/12)*360);
hourhand.style.transform = `rotate($deg)`;
time.innerhtml = ''+'' + hour + '' + ' : ' + minute + ' : ' + '' + second +''+'';
}		setinterval(setdate,1000);
// 1秒更新一次;1秒=1000毫秒
}

案例一：簡約鐘錶 

前端 vue入門案例

第一步 建立html 檔案 使用vscode快捷鍵 生成html lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head body html 第二步 引入v...

前端學習筆記（體育頁面案例）

align time 2017年07月16日20 11 收藏本文 text value 請輸入查詢條件 class search button value 搜尋 class button 在昨日麗江嘉雲昊隊主帥李虎就缺席了賽前的新聞發布會，當時俱樂部給出的解釋是李虎由於身體欠佳，去醫院接受 然而今日...

簡單前端vue購物車案例

doctype html html lang en head meta charset utf 8 meta name viewport content width device width,initial scale 1.0 title 簡單購物車 title head style table t...