java script

java script是什么？讓我們一起來了解一下吧！

java script是一種客戶端腳本語言。它是作用在客戶端瀏覽器里，并且不需要編譯，可以很快的被瀏覽器自帶的解析引擎運行。

java script有以下特點：

1.?語法與c、java相似，可以用任意文字編輯工具

2.?由瀏覽器的解析引擎運行

3.?以對象為基礎

4.?是一種弱類型語言

java script有六種數據類型：string、boolean、null、number、undefined、object。

實戰舉例，具體步驟如下：

let?big?=?document.querySelector('.big');
????????let?small?=?document.querySelector('.small');
????????let?NS?=?document.querySelector('.l');
????????let?WE?=?document.querySelector('.r');
????????let?box?=?document.querySelector('.box');
????????let?Box?=?document.querySelector('.Box');
?
?
????????//?倒計時模塊
????????var?longNum?=?10;
????????var?shortNum?=?3;
????????big.addEventListener('click',?function?()?{
????????????let?inputNum?=?prompt('請輸入你想設置的秒數:');
????????????longNum?=?inputNum?==?''???longNum?:?inputNum;
????????})
????????small.addEventListener('click',?function?()?{
????????????let?inputNum?=?prompt('請輸入你想設置的秒數:');
????????????shortNum?=?inputNum?==?''???longNum?:?inputNum;
????????})
????????green();
????????Green?=?setInterval(green,?1000);
?
????????function?green()?{
????????????NS.children[2].className?=?'green_s';
????????????point(Box);
????????????NS.children[2].innerHTML?=?longNum;
????????????WE.children[0].className?=?'red_s';
????????????caveat(box);
????????????WE.children[0].innerHTML?=?longNum;
????????????if?(longNum?==?-1)?{
????????????????clearInterval(Green);
????????????????NS.children[2].className?=?'green_end';
????????????????del(Box);
????????????????NS.children[2].innerHTML?=?'';
????????????????WE.children[0].className?=?'red_end';
????????????????del(box);
????????????????WE.children[0].innerHTML?=?'';
????????????????longNum?=?10;
????????????????NS.children[1].className?=?'yellow_s';
????????????????WE.children[1].className?=?'yellow_s';
????????????????yellow();
????????????????Yellow?=?setInterval(yellow,?1000);
????????????????remind(box);
????????????????remind(Box);
????????????}
????????????longNum--;
????????}
?
????????function?yellow()?{
????????????NS.children[1].innerHTML?=?shortNum;
????????????WE.children[1].innerHTML?=?shortNum;
????????????if?(shortNum?==?-1)?{
????????????????del(box);
????????????????del(Box);
????????????????clearInterval(Yellow);
????????????????NS.children[1].className?=?'yellow_end';
????????????????NS.children[1].innerHTML?=?'';
????????????????WE.children[1].className?=?'yellow_end';
????????????????WE.children[1].innerHTML?=?'';
????????????????shortNum?=?3;
????????????????NS.children[0].className?=?'red_s';
????????????????caveat(Box);
????????????????WE.children[2].className?=?'green_s';
????????????????point(box);
????????????????red();
????????????????Red?=?setInterval(red,?1000);
????????????}
????????????shortNum--;
????????}
?
????????function?red()?{
????????????NS.children[0].innerHTML?=?longNum;
????????????WE.children[2].innerHTML?=?longNum;
????????????if?(longNum?==?-1)?{
????????????????clearInterval(Red);
????????????????NS.children[0].className?=?'red_end';
????????????????del(Box);
????????????????NS.children[0].innerHTML?=?'';
????????????????WE.children[2].className?=?'green_end';
????????????????del(box);
????????????????WE.children[2].innerHTML?=?'';
????????????????longNum?=?10;
????????????????NS.children[2].className?=?'green_s';
????????????????WE.children[2].className?=?'green_end';
????????????????green();
????????????????Green?=?setInterval(green,?1000);
????????????}
????????????longNum--;
????????}
?
????????function?caveat(concent)?{
????????????concent.style.color?=?'red';
????????????concent.innerHTML?=?'闖紅燈,等著大家都去你家吃席';
????????}
?
????????function?remind(concent)?{
????????????concent.style.color?=?'yellow';
????????????concent.innerHTML?=?'黃燈了,還沒過去的抓緊時間,馬上車就來撞你了';
????????}
?
????????function?point(concent)?{
????????????concent.style.color?=?'green';
????????????concent.innerHTML?=?'綠燈也要注意安全喲!';
????????}
?
????????function?del(concent)?{
????????????concent.innerHTML?=?'';
????????}

以上就是小編今天的分享了，希望可以幫助到大家。