全部課程
發(fā)布時(shí)間： 2017-11-02 14:56:03
?Html標(biāo)簽作用：
超文本標(biāo)記語(yǔ)言，標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用。
"超文本"就是指頁(yè)面內(nèi)可以包含圖片、鏈接，甚至音樂(lè)、程序等非文字元素。
超文本標(biāo)記語(yǔ)言的結(jié)構(gòu)包括“頭”部分（英語(yǔ)：Head）、和“主體”部分（英語(yǔ)：Body），其中“頭”部提供關(guān)于網(wǎng)頁(yè)的信息，“主體”部分提供網(wǎng)頁(yè)的具體內(nèi)容。
CSS樣色的作用：
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
Javascript的作用：
JavaScript一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。
編寫頁(yè)面內(nèi)容與邏輯：
<!DOCTYPE html>
<html>
<!--
紅燈時(shí)間可設(shè)置[把time值改一下]
綠燈時(shí)間可設(shè)置[把time值改一下]
黃燈時(shí)間設(shè)置了3秒
-->
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box {
overflow: hidden;
width: 400px;
padding: 10px;
background: black;
border-radius: 20px;
}
.box div {
width: 33.33%;
float: left;
text-align: center;
}
.red {
width: 100px;
height: 100px;
background: #D7D7D7;
border-radius: 100px;
display: block;
margin: 0px auto;
line-height: 100px;
font-size: 80px;
color: #D7D7D7;
}
.yellow {
width: 100px;
height: 100px;
background: #D7D7D7;
border-radius: 100px;
display: block;
margin: 0px auto;
line-height: 100px;
font-size: 80px;
color: #D7D7D7;
}
.green {
width: 100px;
height: 100px;
background: #D7D7D7;
border-radius: 100px;
display: block;
margin: 0px auto;
line-height: 100px;
font-size: 80px;
color: #D7D7D7;
}
</style>
</head>
<body>
<div class="box">
<div><span class="green"></span></div>
<div><span class="yellow"></span></div>
<div><span class="red"></span></div>
</div>
<script>
window.onload = function() {
var time = 10; //可以設(shè)置紅燈綠燈時(shí)間
exec();
setInterval(function() {
exec();
}, 1000 * (time * 2 + 3));
function exec() {
//綠燈
green();
//黃燈
setTimeout(function() {
yellow();
}, 1000 * time);
//紅燈
setTimeout(function() {
red();
}, 1000 * (time + 3));
}
function red() {
var num = time;
var timer = setInterval(function() {
num--;
var red = document.getElementsByClassName('red');
red[0].innerHTML = num;
red[0].style.background = 'red';
if(num == -1) {
clearInterval(timer);
red[0].innerHTML = '';
red[0].style.background = '';
}
}, 1000);
}
function yellow() {
var num = 3; // 黃燈時(shí)間設(shè)置了3秒
var timer = setInterval(function() {
num--;
var yellow = document.getElementsByClassName('yellow');
yellow[0].innerHTML = num;
yellow[0].style.background = 'yellow';
if(num == -1) {
clearInterval(timer);
yellow[0].innerHTML = '';
yellow[0].style.background = '';
}
}, 1000);
}
function green() {
var num = time;
var timer = setInterval(function() {
num--;
var green = document.getElementsByClassName('green');
green[0].innerHTML = num;
green[0].style.background = 'green';
if(num == -1) {
clearInterval(timer);
green[0].innerHTML = '';
green[0].style.background = '';
}
}, 1000);
}
}
</script>
</body>
</html>
實(shí)現(xiàn)結(jié)果：
微信
公眾號(hào)
