如下圖所示：
實現乙個課表，對應現實生活中對的課表：一門課一天內，可以對應多個節次。
分兩步：1、先畫出乙個空課表；2、在正確的位置上顯示課程名稱
資料中需要包含：課程名稱（course）、對應週幾(week)、對應的開始節次(startsection)、結束節次(endsection)，如下
const data = [
, ,
, ,
]
包括兩部分：
空課表：flex布局+css3中的 nth-of-type；
填充課程：外層-relative，內層-absolute，兩個div重疊後，通過left和top讓課程的div剛好貼到課表的內容區域，再通過left和top設定每個課程的位置，具體如下：
top:（課程開始節次-1）*空課表中每個「div」的高度；
left：（課程周次-1）*空課表中每個「div」的寬度；
height：（課程開始節次-結束節次+1）**空課表中每個「div」的高度；（line-height和height一樣，可使垂直居中）
/**
* @name: ******
* @author: wangjiao
* @description：極簡版本
*/import react from 'react';
import styles from './******.less';
const sections = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => `第$節`);
const weeks = [0, 1, 2, 3, 4, 5, 6, 7].map((i) => `周$`);
const data = [
, ,
, ,
]const ******: react.fc = props =>
return (
) })}}
return })
})} })}
)};export default ******;
.root
.rowhead
.headitem
}.rowitem
.columnitem
}} .topcontent
}}
純js實現裁剪布局
onselectstart 事件是選中的事件 document.onselectstart function e ondragstart 事件是拖拽事件 document.ondragstart function e 當右下角的按鈕滑鼠按下時 dot.onmousedown function e 大...
純js實現倒計時
通過js實現頁面的倒計時功能。思路 傳入乙個秒數c，c 60可以得到分鐘m,c 60可以得到顯示的秒數s，同理，再將m 60可是得到小時數,m 可以得到分鐘數。通過setinterval每次將總秒數 1，並將計算所得時間顯示到頁面上。第一版的骯髒 如下，可以作為反面教材思考一下 缺陷 1 定義了眾多...
jQuery AJAX實現純js分頁功能
使用jquery的ajax技術，在bootstrap的框架下搭建的純js分頁 bootstrap作為twitter推的一款前端框架，效果個人還是覺得很不錯的。這次只是拿來作為網頁元素的css樣式表使用，比較省力，效果也會比自己做要漂亮多了。使用資料為單獨的json檔案data.json 把主要 和過...