如何用 160 行代碼，實(shí)現(xiàn)動態(tài)炫酷的可視化圖表？

者 | 前端勸退師

責(zé)編 | 伍杏玲

某天在逛社區(qū)時(shí)看到一帖子：

react-dynamic-charts — A React Library for Visualizing Dynamic Data

這是一個(gè)國外大佬在其公司峰會的代碼競賽中寫的一個(gè)庫：react-dynamic-charts，用于根據(jù)動態(tài)數(shù)據(jù)創(chuàng)建動態(tài)圖表可視化。

它的設(shè)計(jì)非常靈活，允許你控制內(nèi)部的每個(gè)元素和事件。使用方法也非常簡單，其源碼也是非常精煉，值得學(xué)習(xí)。

但因其提供了不少API,不利于理解源碼。所以以下實(shí)現(xiàn)有所精簡：

準(zhǔn)備通用工具函數(shù)

1. getRandomColor：隨機(jī)顏色

const getRandomColor==> {
const letters='0123456789ABCDEF';
let color='#';
for (let i=0; i < 6; i++) {
color +=letters[Math.floor(Math.random() * 16)]
}
return color;
};

2. translateY：填充Y軸偏移量

const translateY=(value)=> {
return `translateY(${value}px)`;
}

使用useState Hook聲明狀態(tài)變量

我們開始編寫組件DynamicBarChart

const DynamicBarChart=(props)=> {
const [dataQueue, setDataQueue]=useState([]);
const [activeItemIdx, setActiveItemIdx]=useState(0);
const [highestValue, setHighestValue]=useState(0);
const [currentValues, setCurrentValues]=useState({});
const [firstRun, setFirstRun]=useState(false);
// 其它代碼...
}

1. useState的簡單理解：

const [屬性, 操作屬性的方法]=useState(默認(rèn)值);

2. 變量解析

dataQueue：當(dāng)前操作的原始數(shù)據(jù)數(shù)組

activeItemIdx: 第幾“幀”

highestValue: “榜首”的數(shù)據(jù)值

currentValues: 經(jīng)過處理后用于渲染的數(shù)據(jù)數(shù)組

firstRun: 第一次動態(tài)渲染時(shí)間

內(nèi)部操作方法和對應(yīng)useEffect

請配合注釋使用：

// 動態(tài)跑起來～
function start  {
if (activeItemIdx > 1) {
return;
}
nextStep(true);
}
// 對下一幀數(shù)據(jù)進(jìn)行處理
function setNextValues  {
// 沒有幀數(shù)時(shí)（即已結(jié)束），停止渲染
if (!dataQueue[activeItemIdx]) {
iterationTimeoutHolder=;
return;
}
// 每一幀的數(shù)據(jù)數(shù)組
const roundData=dataQueue[activeItemIdx].values;
const nextValues={};
let highestValue=0;
// 處理數(shù)據(jù)，用作最后渲染（各種樣式，顏色）
roundData.map((c)=> {
nextValues[c.id]={
...c,
color: c.color || (currentValues[c.id] || {}).color || getRandomColor
};

if (Math.abs(c.value) > highestValue) {
highestValue=Math.abs(c.value);
}

return c;
});

// 屬性的操作，觸發(fā)useEffect
setCurrentValues(nextValues);
setHighestValue(highestValue);
setActiveItemIdx(activeItemIdx + 1);
}
// 觸發(fā)下一步，循環(huán)
function nextStep (firstRun=false) {
setFirstRun(firstRun);
setNextValues;
}

對應(yīng)useEffect：

// 取原始數(shù)據(jù)
useEffect(=> {
setDataQueue(props.data);
}, );
// 觸發(fā)動態(tài)
useEffect(=> {
start;
}, [dataQueue]);
// 設(shè)觸發(fā)動態(tài)間隔
useEffect(=> {
iterationTimeoutHolder=window.setTimeout(nextStep, 1000);
return=> {
if (iterationTimeoutHolder) {
window.clearTimeout(iterationTimeoutHolder);
}
};
}, [activeItemIdx]);

useEffect示例：

useEffect(=> {
document.title=`You clicked ${count} times`;
}, [count]); // 僅在 count 更改時(shí)更新

為什么要在 effect 中返回一個(gè)函數(shù)？

這是 effect 可選的清除機(jī)制。每個(gè) effect 都可以返回一個(gè)清除函數(shù)。如此可以將添加和移除訂閱的邏輯放在一起。

整理用于渲染頁面的數(shù)據(jù)

const keys=Object.keys(currentValues);
const { barGapSize, barHeight, showTitle }=props;
const maxValue=highestValue / 0.85;
const sortedCurrentValues=keys.sort((a, b)=> currentValues[b].value - currentValues[a].value);
const currentItem=dataQueue[activeItemIdx - 1] || {};

keys: 每組數(shù)據(jù)的索引
maxValue: 圖表最大寬度
sortedCurrentValues: 對每組數(shù)據(jù)進(jìn)行排序，該項(xiàng)影響動態(tài)渲染。
currentItem: 每組的原始數(shù)據(jù)

開始渲染頁面

大致的邏輯就是：

根據(jù)不同Props,循環(huán)排列后的數(shù)據(jù)：sortedCurrentValues
計(jì)算寬度，返回每項(xiàng)的label、bar、value
根據(jù)計(jì)算好的高度，觸發(fā)transform。

<div className="live-chart">
{
<React.Fragment>
{
showTitle &&
<h1>{currentItem.name}</h1>
}
<section className="chart">
<div className="chart-bars" style={{ height: (barHeight + barGapSize) * keys.length }}>
{
sortedCurrentValues.map((key, idx)=> {
const currentValueData=currentValues[key];
const value=currentValueData.value
let width=Math.abs((value / maxValue * 100));
let widthStr;
if (isNaN(width) || !width) {
widthStr='1px';
} else {
widthStr=`${width}%`;
}

return (
<div className={`bar-wrapper`} style={{ transform: translateY((barHeight + barGapSize) * idx), transitionDuration: 200 / 1000 }} key={`bar_${key}`}>
<label>
{
!currentValueData.label
? key
: currentValueData.label
}
</label>
<div className="bar" style={{ height: barHeight, width: widthStr, background: typeof currentValueData.color==='string' ? currentValueData.color : `linear-gradient(to right, ${currentValueData.color.join(',')})` }} />
<span className="value" style={{ color: typeof currentValueData.color==='string' ? currentValueData.color : currentValueData.color[0] }}>{currentValueData.value}</span>
</div>
);
})
}
</div>
</section>
</React.Fragment>
}
</div>

定義常規(guī)propTypes和defaultProps

DynamicBarChart.propTypes={
showTitle: PropTypes.bool,
iterationTimeout: PropTypes.number,
data: PropTypes.array,
startRunningTimeout: PropTypes.number,
barHeight: PropTypes.number,
barGapSize: PropTypes.number,
baseline: PropTypes.number,
};

DynamicBarChart.defaultProps={
showTitle: true,
iterationTimeout: 200,
data: ,
startRunningTimeout: 0,
barHeight: 50,
barGapSize: 20,
baseline: ,
};

export {
DynamicBarChart
};

如何使用

import React, { Component } from "react";

import { DynamicBarChart } from "./DynamicBarChart";

import helpers from "./helpers";
import mocks from "./mocks";

import "react-dynamic-charts/dist/index.css";

export default class App extends Component {
render {
return (
<DynamicBarChart
barGapSize={10}
data={helpers.generateData(100, mocks.defaultChart, {
prefix: "Iteration"
})}
iterationTimeout={100}
showTitle={true}
startRunningTimeout={2500}
/>
)
}
}

1. 批量生成Mock數(shù)據(jù)

helpers.js:

function getRandomNumber(min, max) {
return Math.floor(Math.random * (max - min + 1) + min);
};

function generateData(iterations=100, defaultValues=[], namePrefix={}, maxJump=100) {
const arr=;
for (let i=0; i <=iterations; i++) {
const values=defaultValues.map((v, idx)=> {
if (i===0 && typeof v.value==='number') {
return v;
}
return {
...v,
value: i===0 ? this.getRandomNumber(1, 1000) : arr[i - 1].values[idx].value + this.getRandomNumber(0, maxJump)
}
});
arr.push({
name: `${namePrefix.prefix || ''} ${(namePrefix.initialValue || 0) + i}`,
values
});
}
return arr;
};

export default {
getRandomNumber,
generateData
}

mocks.js:

import helpers from './helpers';
const defaultChart=[
{
id: 1,
label: 'Google',
value: helpers.getRandomNumber(0, 50)
},
{
id: 2,
label: 'Facebook',
value: helpers.getRandomNumber(0, 50)
},
{
id: 3,
label: 'Outbrain',
value: helpers.getRandomNumber(0, 50)
},
{
id: 4,
label: 'Apple',
value: helpers.getRandomNumber(0, 50)
},
{
id: 5,
label: 'Amazon',
value: helpers.getRandomNumber(0, 50)
},
];
export default {
defaultChart,
}

一個(gè)乞丐版的動態(tài)排行榜可視化就做好喇。

完整代碼

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import './styles.scss';

const getRandomColor==> {
const letters='0123456789ABCDEF';
let color='#';
for (let i=0; i < 6; i++) {
color +=letters[Math.floor(Math.random() * 16)]
}
return color;
};

const translateY=(value)=> {
return `translateY(${value}px)`;
}

const DynamicBarChart=(props)=> {
const [dataQueue, setDataQueue]=useState([]);
const [activeItemIdx, setActiveItemIdx]=useState(0);
const [highestValue, setHighestValue]=useState(0);
const [currentValues, setCurrentValues]=useState({});
const [firstRun, setFirstRun]=useState(false);
let iterationTimeoutHolder=;

function start  {
if (activeItemIdx > 1) {
return;
}
nextStep(true);
}

function setNextValues  {
if (!dataQueue[activeItemIdx]) {
iterationTimeoutHolder=;
return;
}

const roundData=dataQueue[activeItemIdx].values;
const nextValues={};
let highestValue=0;
roundData.map((c)=> {
nextValues[c.id]={
...c,
color: c.color || (currentValues[c.id] || {}).color || getRandomColor
};

if (Math.abs(c.value) > highestValue) {
highestValue=Math.abs(c.value);
}

return c;
});
console.table(highestValue);

setCurrentValues(nextValues);
setHighestValue(highestValue);
setActiveItemIdx(activeItemIdx + 1);
}

function nextStep (firstRun=false) {
setFirstRun(firstRun);
setNextValues;
}

useEffect(=> {
setDataQueue(props.data);
}, );

useEffect(=> {
start;
}, [dataQueue]);

useEffect(=> {
iterationTimeoutHolder=window.setTimeout(nextStep, 1000);
return=> {
if (iterationTimeoutHolder) {
window.clearTimeout(iterationTimeoutHolder);
}
};
}, [activeItemIdx]);

const keys=Object.keys(currentValues);
const { barGapSize, barHeight, showTitle, data }=props;
console.table('data', data);
const maxValue=highestValue / 0.85;
const sortedCurrentValues=keys.sort((a, b)=> currentValues[b].value - currentValues[a].value);
const currentItem=dataQueue[activeItemIdx - 1] || {};

return (
<div className="live-chart">
{
<React.Fragment>
{
showTitle &&
<h1>{currentItem.name}</h1>
}
<section className="chart">
<div className="chart-bars" style={{ height: (barHeight + barGapSize) * keys.length }}>
{
sortedCurrentValues.map((key, idx)=> {
const currentValueData=currentValues[key];
const value=currentValueData.value
let width=Math.abs((value / maxValue * 100));
let widthStr;
if (isNaN(width) || !width) {
widthStr='1px';
} else {
widthStr=`${width}%`;
}

return (
<div className={`bar-wrapper`} style={{ transform: translateY((barHeight + barGapSize) * idx), transitionDuration: 200 / 1000 }} key={`bar_${key}`}>
<label>
{
!currentValueData.label
? key
: currentValueData.label
}
</label>
<div className="bar" style={{ height: barHeight, width: widthStr, background: typeof currentValueData.color==='string' ? currentValueData.color : `linear-gradient(to right, ${currentValueData.color.join(',')})` }} />
<span className="value" style={{ color: typeof currentValueData.color==='string' ? currentValueData.color : currentValueData.color[0] }}>{currentValueData.value}</span>
</div>
);
})
}
</div>
</section>
</React.Fragment>
}
</div>
);
};

DynamicBarChart.propTypes={
showTitle: PropTypes.bool,
iterationTimeout: PropTypes.number,
data: PropTypes.array,
startRunningTimeout: PropTypes.number,
barHeight: PropTypes.number,
barGapSize: PropTypes.number,
baseline: PropTypes.number,
};

DynamicBarChart.defaultProps={
showTitle: true,
iterationTimeout: 200,
data: ,
startRunningTimeout: 0,
barHeight: 50,
barGapSize: 20,
baseline: ,
};

export {
DynamicBarChart
};

styles.scss

.live-chart {
width: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
h1 {
font-weight: 700;
font-size: 60px;
text-transform: uppercase;
text-align: center;
padding: 20px 10px;
margin: 0;
}

.chart {
position: relative;
margin: 20px auto;
}

.chart-bars {
position: relative;
width: 100%;
}

.bar-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
position: absolute;
top: 0;
left: 0;
transform: translateY(0);
transition: transform 0.5s linear;
padding-left: 200px;
box-sizing: border-box;
width: 100%;
justify-content: flex-start;

label {
position: absolute;
height: 100%;
width: 200px;
left: 0;
padding: 0 10px;
box-sizing: border-box;
text-align: right;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
font-weight: 700;
display: flex;
justify-content: flex-end;
align-items: center;
}

.value {
font-size: 16px;
font-weight: 700;
margin-left: 10px;
}

.bar {
width: 0%;
transition: width 0.5s linear;
}
}
}

原項(xiàng)目地址：

react-dynamic-charts：https://dsternlicht.github.io/react-dynamic-charts/

結(jié)語

一直對實(shí)現(xiàn)動態(tài)排行榜可視化感興趣，無奈多數(shù)都是基于D3或echarts實(shí)現(xiàn)。而這個(gè)庫，不僅脫離圖形庫，還使用了React 16的新特性。也讓我徹底理解了React Hook的妙用。

聲明：本文系作者投稿，版權(quán)歸作者所有。

5G進(jìn)入元年，物聯(lián)網(wǎng)發(fā)展愈加火爆！

你是否身懷絕技、卻無人知曉；別讓你的IoT項(xiàng)目再默默無聞了！

繼第一屆AI優(yōu)秀案例評選活動之后，2019年案例評選活動再度升級，CSDN將評選出TOP 30優(yōu)秀IoT案例，趕快掃碼參與評選吧！重磅福利，等你來領(lǐng)！

著大數(shù)據(jù)的發(fā)展，現(xiàn)在有很多企業(yè)和個(gè)人都開始關(guān)注于服務(wù)器，服務(wù)器的安全問題日漸成為一個(gè)大問題，防不勝防，一有閃失重要的資料就被病毒或是黑客破壞甚至于被竊取。所以做好服務(wù)器安全除了各種安全策略外，安裝一款安全軟件也非常重要，市面上的安全軟件種類繁多，參差不齊，收費(fèi)的，免費(fèi)的等等，今天給大家引薦一款完全免費(fèi)，功能齊全的安全軟件----安全狗。

一、多引擎，精準(zhǔn)查殺網(wǎng)頁木馬、各類病毒

獨(dú)有的安全狗云查殺引擎、網(wǎng)馬引擎與專業(yè)的二進(jìn)制病毒引擎結(jié)合，精確查殺各類網(wǎng)頁木馬和主流病毒。多引擎智能查殺病毒，全面保障服務(wù)器安全。

二、三層網(wǎng)絡(luò)防護(hù)實(shí)時(shí)保護(hù)網(wǎng)絡(luò)安全

強(qiáng)有力的網(wǎng)絡(luò)防護(hù)，實(shí)時(shí)監(jiān)測IP和端口訪問的合法性，實(shí)時(shí)攔截ARP攻擊、Web攻擊（抗CC）、DDOS攻擊、暴力破解。

三、全面的文件/注冊表保護(hù)杜絕非法篡改

全面開放保護(hù)規(guī)則，同時(shí)支持監(jiān)控網(wǎng)站目錄，有效保護(hù)重要文件、目錄與注冊表不被篡改與刪除，實(shí)時(shí)防止網(wǎng)站被上傳網(wǎng)頁木馬。系統(tǒng)默認(rèn)規(guī)則與用戶自定義規(guī)則全支持，靈活定制，全面保護(hù)。

四、底層驅(qū)動防護(hù)，屏蔽入侵提權(quán)

驅(qū)動級保護(hù)，攔截更快速，有效防止未授權(quán)的非法用戶登錄服務(wù)器，實(shí)時(shí)阻止非法創(chuàng)建和修改系統(tǒng)帳號。

五、服務(wù)器安全加固避免配置風(fēng)險(xiǎn)

全面的服務(wù)器體檢，暴露安全隱患，當(dāng)前系統(tǒng)健康情況了然于心，同時(shí)提供貼心的優(yōu)化建議措施，加固服務(wù)器更簡單，系統(tǒng)運(yùn)行更快速，更安全。

六、服務(wù)器安全狗內(nèi)嵌網(wǎng)站安全狗，讓你的網(wǎng)站安心無憂。

服務(wù)器安全狗軟件，專注服務(wù)器安全，老牌安全廠商出品值得信賴。

如需了解更多請?jiān)L問官網(wǎng)：https://www.safedog.cn/server_safedog.html?showTinyTitle=true

五節(jié)：函數(shù)傳參，改變Div任意屬性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函數(shù)傳參，改變Div任意屬性的值</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }
        label{
            display: block;
            margin: 10px;
        }
        button{
            margin-left: 10px;
        }
        .content{
            width: 200px;
            height: 200px;
            color: white;
            background: black;
            margin: 5px auto;
            padding: 10px;
            font-size: 14px;
            line-height: 20px;
            text-align: left;
        }
    </style>
</head>
<body>
<div class="wrap">
    <label>
        <span>屬性名：</span>
        <input type="text" value="background"/>
    </label>
    <label>
        <span>屬性值：</span>
        <input type="text" value="blue"/>
    </label>
    <button>確定</button>
    <button>重置</button>
    <p class="content">在上方輸入“屬性名”和“屬性值”，點(diǎn)擊確認(rèn)按鈕查看效果。</p>
</div>
<script>
    function change(elem, attr, value) {
        elem.style[attr]=value;
    }
    window.onload=function () {
        var inputs=document.getElementsByTagName("input");
        var btns=document.getElementsByTagName("button");
        var cons=document.getElementsByClassName("content");
        btns[0].onclick=function () {
            change(cons[0], inputs[0].value, inputs[1].value);
        };
        btns[1].onclick=function () {
            cons[0].style.cssText=" ";
            console.log(cons[0].style)
        }
    }
</script>
</body>
</html>

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個(gè)月整理了一份最適合2020年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。

第六節(jié)：圖片列表：鼠標(biāo)移入/移出改變圖片透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片列表：鼠標(biāo)移入/移出改變圖片透明度</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 700px;
            margin: 10px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .pics{
            flex-basis: 128px;
            height: 128px;
            opacity: 0.5;
            cursor: pointer;
            border: 1px solid #999;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="pics"><img src="../image/1.jpg" /></div>
    <div class="pics"><img src="../image/2.jpg" /></div>
    <div class="pics"><img src="../image/3.jpg" /></div>
    <div class="pics"><img src="../image/4.jpg" /></div>
    <div class="pics"><img src="../image/5.jpg" /></div>
    <div class="pics"><img src="../image/6.jpg" /></div>
    <div class="pics"><img src="../image/7.jpg" /></div>
    <div class="pics"><img src="../image/8.jpg" /></div>
    <div class="pics"><img src="../image/9.jpg" /></div>
    <div class="pics"><img src="../image/10.jpg" /></div>
</div>
<script>
    window.onload=function () {
        var pictures=document.getElementsByClassName("pics");
        for (var i=0; i < pictures.length; i++) {
            pictures[i].onmouseover=function () {
                this.style.opacity="1";
            };
            pictures[i].onmouseout=function () {
                this.style.cssText=" ";
            }
        }
    }
</script>
</body>
</html>

第七節(jié)：簡易選項(xiàng)卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡易選項(xiàng)卡</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 500px;
            margin: 10px auto;
        }
        .nav{
            background: black;
            height: 30px;
            display: flex;
            border: 1px solid black;
        }
        .nav>li{
            color: white;
            flex-basis: 60px;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
        }
        .content{
            width: 100%;
            border: 1px solid black;
        }
        .content>li{
            font-size: 14px;
            line-height: 30px;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul class="nav">
        <li class="item" style="background: #ccc">第一課</li>
        <li class="item">第二課</li>
        <li class="item">第三課</li>
    </ul>
    <ul class="content" style="display: block;">
        <li>網(wǎng)頁特效原理分析</li>
        <li>響應(yīng)用戶操作</li>
        <li>提示框效果</li>
        <li>事件驅(qū)動</li>
        <li>元素屬性操作</li>
        <li>動手編寫第一個(gè)JS特效</li>
        <li>引入函數(shù)</li>
        <li>網(wǎng)頁換膚效果</li>
        <li>展開/收縮播放列表效果</li>
    </ul>
    <ul class="content" style="display: none;">
        <li>改變網(wǎng)頁背景顏色</li>
        <li>函數(shù)傳參</li>
        <li>高重用性函數(shù)的編寫</li>
        <li>126郵箱全選效果</li>
        <li>循環(huán)及遍歷操作</li>
        <li>調(diào)試器的簡單使用</li>
        <li>典型循環(huán)的構(gòu)成</li>
        <li>for循環(huán)配合if判斷</li>
        <li>className的使用</li>
        <li>innerHTML的使用</li>
        <li>戛納印象效果</li>
        <li>數(shù)組</li>
        <li>字符串連接</li>
    </ul>
    <ul class="content" style="display: none;">
        <li>JavaScript組成：ECMAScript、DOM、BOM，JavaScript兼容性來源</li>
        <li>JavaScript出現(xiàn)的位置、優(yōu)缺點(diǎn)</li>
        <li>變量、類型、typeof、數(shù)據(jù)類型轉(zhuǎn)換、變量作用域</li>
        <li>閉包：什么是閉包、簡單應(yīng)用、閉包缺點(diǎn)</li>
        <li>運(yùn)算符：算術(shù)、賦值、關(guān)系、邏輯、其他運(yùn)算符</li>
        <li>程序流程控制：判斷、循環(huán)、跳出</li>
        <li>命名規(guī)范：命名規(guī)范及必要性、匈牙利命名法</li>
        <li>函數(shù)詳解：函數(shù)構(gòu)成、調(diào)用、事件、傳參數(shù)、可變參、返回值</li>
        <li>定時(shí)器的使用：setInterval、setTimeout</li>
        <li>定時(shí)器應(yīng)用：站長站導(dǎo)航效果</li>
        <li>定時(shí)器應(yīng)用：自動播放的選項(xiàng)卡</li>
        <li>定時(shí)器應(yīng)用：數(shù)碼時(shí)鐘</li>
        <li>程序調(diào)試方法</li>
    </ul>
</div>
<script>
    window.onload=function () {
        var items=document.getElementsByClassName("item");
        var cons=document.getElementsByClassName("content");
        for (var i=0; i < items.length; i++) {
            items[i].index=i;
            items[i].onmouseover=function () {
                for (var n=0;n < items.length; n++) {
                    items[n].style.background="black";
                }
                this.style.background="#ccc";
                for (var m=0;m < cons.length;m++) {
                    cons[m].style.display="none";
                }
                cons[this.index].style.display="block"
            }
        }
    }
</script>
</body>
</html>

第八節(jié)：簡易JS年歷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡易JS年歷</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 300px;
            margin: 0 auto;
            background: #eaeaea;
            padding: 10px;
        }
        ul{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        ul>li{
            flex-basis: 70px;
            height: 70px;
            background: #424242;
            margin: 5px 0 5px 0;
            color: white;
            font-size: 25px;
            text-align: center;
            line-height: 35px;
            border: 1px solid black;
        }
        .current{
            background: white;
            color: #f69;
        }
        .content{
            background: #f1f1f1;
            border: 1px solid white;
            font-size: 14px;
            color: #666;
            padding: 10px;
        }
        .content>h2{
            line-height: 30px;
        }
        .content>p{
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li><strong>1</strong><br/>JAN</li>
        <li><strong>2</strong><br/>FER</li>
        <li><strong>3</strong><br/>MAR</li>
        <li><strong>4</strong><br/>APR</li>
        <li><strong>5</strong><br/>MAY</li>
        <li class="current"><strong>6</strong><br/>JUN</li>
        <li><strong>7</strong><br/>JUL</li>
        <li><strong>8</strong><br/>AUG</li>
        <li><strong>9</strong><br/>SEP</li>
        <li><strong>10</strong><br/>OCT</li>
        <li><strong>11</strong><br/>NOV</li>
        <li><strong>12</strong><br/>DEC</li>
    </ul>
    <div class="content">
        <h2>
            <strong>6</strong>月節(jié)日
        </h2>
        <p>端午節(jié)：6月4日至6日放假3天。</p>
    </div>
</div>
<script>
    window.onload=function () {
        var lis=document.getElementsByTagName("li");
        var con=document.getElementsByClassName("content")[0];
        var str=con.getElementsByTagName("strong")[0];
        var pCon=con.getElementsByTagName("p")[0];
        var oArray=[
            "元旦：1月1日至3日放假三天。",
            "春節(jié)：2月2日至8日放假7天。",
            "婦女節(jié)：3月8日婦女節(jié)，與我無關(guān)。",
            "清明節(jié)：4月3日至5日放假3天",
            "勞動節(jié)：4月30日至5月2日放假3天。",
            "端午節(jié)：6月4日至6日放假3天。",
            "小暑：7月7日小暑。不放假。",
            "七夕節(jié)：8月6日七夕節(jié)。不放假。",
            "中秋節(jié)：9月10日至12日放假3天。",
            "國慶節(jié)：10月1日至7日放假7天。",
            "立冬：11月8日立冬。不放假。",
            "艾滋病日:12月1日\n廢除奴隸制國際日:12月2日。"
        ];
        for (var i=0;i < lis.length;i++) {
            lis[i].index=i;
            lis[i].onmouseover=function () {
                for ( var n=0;n < lis.length; n++) {
                    lis[n].className="";
                }
                this.className="current";
                str.innerHTML=this.index + 1;
                pCon.innerHTML=oArray[this.index];
            }
        }
    }
</script>
</body>
</html>

第九節(jié)：單一按鈕顯示/隱藏一播放列表收縮展開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單一按鈕顯示/隱藏一播放列表收縮展開</title>
    <link rel="stylesheet" href="../css/common.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .wrap{
            width: 250px;
            margin: 10px auto;
            border: 1px solid #ced3d7;
        }
        .nav{
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            background: #ced3d7;
            cursor: pointer;
            color: #6b7980;
            border: 1px solid white;
        }
        .nav>span{
            flex: 1;
            font-size: 14px;
        }
        ul>li>a{
            display: block;
            font-size: 14px;
            line-height: 30px;
            background: #e9edf2;
            padding: 0 10px;
            color: #6b7980;
        }
        ul>li>a:hover{
            background: white;
        }
    </style>
</head>
<body>
<div class="wrap">
    <h2 class="nav"><span>播放列表</span><i class="fa fa-caret-up"></i><i class="fa fa-caret-down" style="display: none;"></i></h2>
    <ul style="display: none;">
        <li><a href="#">玩家之徒 - 蔡依林</a></li>
        <li><a href="#">原諒我就是這樣的女生 - 戴佩妮</a></li>
        <li><a href="#">猜不透 - 丁當(dāng)</a></li>
        <li><a href="#">自導(dǎo)自演 - 周杰倫</a></li>
        <li><a href="#">浪漫窩 - 弦子</a></li>
        <li><a href="#">流年 - 王菲</a></li>
    </ul>
</div>
<script>
    window.onload=function () {
        var hTwo=document.getElementsByTagName("h2")[0];
        var iS=hTwo.getElementsByTagName("i");
        var oUl=document.getElementsByTagName("ul")[0];
        var show=true;
        hTwo.onclick=function () {
            if (show) {
                oUl.style.display="block";
                iS[0].style.display="none";
                iS[1].style.display="block";
            } else {
                oUl.style.display="none";
                iS[0].style.display="block";
                iS[1].style.display="none";
            }
            show=!show;
        }
    }
</script>
</body>
</html>

第十節(jié)：提示框效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示框效果</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .wrap{
            width: 600px;
            margin: 10px auto;
            padding: 10px;
            border: 1px solid black;
        }
        h2{
            font-size: 14px;
            line-height: 20px;
            text-align: center;
        }
        ul{
            display: flex;
            width: 100%;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        ul>li{
            flex-basis: 100px;
            height: 100px;
            border: 1px solid black;
            background: #f0f0f0;
            padding: 5px;
            margin: 5px 0;
            position: relative;
        }
        ul>li>a{
            font-size: 14px;
            color: #666666;
            text-decoration: none;
        }
        ul>li>img{
            display: none;
            z-index: 10;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -64px 0 0 -64px;
            border: 1px solid #666666;
        }
    </style>
</head>
<body>
<div class="wrap">
    <h2>名車車標(biāo)展示-鼠標(biāo)移過顯示車標(biāo)</h2>
    <ul>
        <li>
            <a href="#" title="BMW 寶馬汽車"><strong>BMW</strong><br>馬汽車</a>
            <img src="../image/1.jpg" alt="BMW 寶馬汽車" />
        </li>
        <li>
            <a href="#" title="Alfa Romeo 阿爾法-羅米歐"><strong>Alfa Romeo</strong><br>阿爾法-羅米歐</a>
            <img src="../image/2.jpg" alt="Alfa Romeo 阿爾法-羅米歐" />
        </li>
        <li>
            <a href="#" title="Skoda 斯柯達(dá)"><strong>Skoda</strong><br>斯柯達(dá)</a>
            <img src="../image/3.jpg" alt="Skoda 斯柯達(dá)" />
        </li>
        <li>
            <a href="#" title="Volkswagen 大眾汽車"><strong>Volkswagen</strong><br>大眾汽車</a>
            <img src="../image/4.jpg" alt="Volkswagen 大眾汽車" />
        </li>
        <li>
            <a href="#" title="Saab 薩布牌轎"><strong>Saab</strong><br>薩布牌轎車</a>
            <img src="../image/5.jpg" alt="Saab 薩布牌轎" />
        </li>
        <li>
            <a href="#" title="Lamborghini 蘭博基尼"><strong>Lamborghini</strong><br>蘭博基尼</a>
            <img src="../image/6.jpg" alt="Lamborghini 蘭博基尼" />
        </li>
        <li>
            <a href="#" title="Porsche 保時(shí)捷"><strong>Porsche</strong><br>保時(shí)捷</a>
            <img src="../image/7.jpg" alt="Porsche 保時(shí)捷" />
        </li>
        <li>
            <a href="#" title="Peugeot 標(biāo)致"><strong>Peugeot</strong><br>標(biāo)致</a>
            <img src="../image/8.jpg" alt="Peugeot 標(biāo)致" />
        </li>
        <li>
            <a href="#" title="Mercedes1 梅賽德斯 奔馳"><strong>Mercedes1</strong><br>梅賽德斯 奔馳</a>
            <img src="../image/9.jpg" alt="Mercedes1 梅賽德斯 奔馳" />
        </li>
        <li>
            <a href="#" title="Buick 別克汽車"><strong>Buick</strong><br>別克汽車</a>
            <img src="../image/10.jpg" alt="Buick 別克汽車" />
        </li>
    </ul>
</div>
<script>
    window.onload=function () {
        var liS=document.getElementsByTagName("li");
        var imgS=document.getElementsByTagName("img");
        for (var i=0; i < liS.length; i++) {
            liS[i].index=i;
            liS[i].onmouseover=function () {
                imgS[this.index].style.display="block";
            };
            liS[i].onmouseout=function () {
                imgS[this.index].style.display="none";
            };
        }
    }
</script>
</body>
</html>

第十一節(jié)：鼠標(biāo)移過，修改圖片路徑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠標(biāo)移過，修改圖片路徑</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        body{
            background: black;
        }
        .wrap{
            width: 222px;
            border: 5px solid white;
            margin: 10px auto;
            background: white;
        }
        ul{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            background: black;
            padding: 5px;
        }
        ul>li{
            justify-self: center;
            align-self: center;
        }
        .item-1{
            grid-column: 1/4;
            grid-row: 1/4;
        }
        .item-2{
            grid-row: 1/2;
        }
        .item-3{
            grid-row: 2/3;
        }
        .item-4{
            grid-row: 3/4;
        }
        .loading{
            background: url("../image/loading.gif");
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li class="item-1"><img src="../image/big_1.jpg"><div class="loading"></div></li>
        <li class="item-2"><a href="#"><img src="../image/small_1.jpg"></a></li>
        <li class="item-3"><a href="#"><img src="../image/small_2.jpg"></a></li>
        <li class="item-4"><a href="#"><img src="../image/small_3.jpg"></a></li>
        <li class="item-5"><a href="#"><img src="../image/small_4.jpg"></a></li>
        <li class="item-6"><a href="#"><img src="../image/small_5.jpg"></a></li>
        <li class="item-7"><a href="#"><img src="../image/small_6.jpg"></a></li>
        <li class="item-8"><a href="#"><img src="../image/small_7.jpg"></a></li>
        <li class="item-9"><a href="#"><img src="../image/small_8.jpg"></a></li>
        <li class="item-10"><a href="#"><img src="../image/small_9.jpg"></a></li>
        <li class="item-11"><a href="#"><img src="../image/small_10.jpg"></a></li>
        <li class="item-12"><a href="#"><img src="../image/small_11.jpg"></a></li>
    </ul>
</div>
<script>
    window.onload=function () {
        var liS=document.getElementsByTagName("li");
        var imgS=document.getElementsByTagName("img");
        var oDiv=document.getElementsByTagName("div")[1];
        for (var i=1; i < imgS.length; i++) {
            imgS[i].index=i;
            imgS[i].onmouseover=function () {
                var img=new Image();
                img.src=imgS[0].src=this.src.replace(/small/, "big");
                oDiv.style.display="block";
                img.complete ? oDiv.style.display="none" : (imgS[0].onload=function() {
                    oDiv.style.display="none"
                });
            }
        }
    }
</script>
</body>
</html>

第十二節(jié)：復(fù)選框（checkbox）全選/全不選/返選

在線咨詢

上一篇：小白前端學(xué)習(xí)日記：HTML基礎(chǔ)語法與標(biāo)簽1
下一篇：山西行javascript-void(0);

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商