發布時間： 2017-11-02 14:56:03
?Html標簽作用：
超文本標記語言，標準通用標記語言下的一個應用。
"超文本"就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。
CSS樣色的作用：
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
Javascript的作用：
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
編寫頁面內容與邏輯：
<!DOCTYPE html>
<html>
<!--
紅燈時間可設置[把time值改一下]
綠燈時間可設置[把time值改一下]
黃燈時間設置了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; //可以設置紅燈綠燈時間
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; // 黃燈時間設置了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>
實現結果：
上一篇： {UI}設計-無序列表7個設計事項 引言
下一篇： {H5}混合開發之ionic快速開始
18922156670
