JavaScript的小程序

天，是JavaScript回爐的第二十三天

setInterval()

clearInterval()

前段時(shí)間幫某單位的hr組織開(kāi)發(fā)了一個(gè)大屏幕展示抽題活動(dòng)的小程序。

<!DOCTYPE html>

<head>

</head>

<style>

#div010{

height:100vh;

width:100vw;

background:url("

C:///Users///l///Desktop///前端///img///1.webp");

transition: all 1s;

opacity: 100;

}

#div011{

display: none;

}

#div012{

width: 120px;

height: 28px;

/* background-color: aquamarine; */

margin: auto;

margin-left: 600px;

color: brown;

}

#div013{

width: 750px;

background: brown;

margin: auto;

font-size: 40px;

font-family: 楷體;

text-align: center;

line-height: 100px;

color: yellow;

}

#div014{

width: 750px;

height: 100px;

background: teal;

}

#div015{

left: 200px;

width: 150px;

text-align: center;

font-size: 30px;

font-family: '楷體';

margin-left: 600px;

}

#div016{

text-align: center;

width: 750px;

background: powderblue;

}

</style>

<body>

< img id="img" src="C:\Users\l\Desktop\前端\lun1.jpg" style="width:750px;height: 100px;">

</div>

<table>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

</div>

</div>

</div>

<table>

<thead>

<tr>

</tr>

</thead>

</table>

</div>

</body>

var arr=new Array();

var timer=setInterval(function f1(){

var aaa=Math.floor(Math.random()*10);

var b1='url("

C:///Users///l///Desktop///前端///img///1.webp")'

var b2='url("

C:///Users///l///Desktop///前端///img///2.webp")'

var b3='url("

C:///Users///l///Desktop///前端///img///3.webp")'

var b4='url("

C:///Users///l///Desktop///前端///img///4.webp")'

var b5='url("

C:///Users///l///Desktop///前端///img///5.webp")'

var b6='url("

C:///Users///l///Desktop///前端///img///6.webp")'

var b7='url("

C:///Users///l///Desktop///前端///img///7.webp")'

var b8='url("

C:///Users///l///Desktop///前端///img///8.webp")'

var b9='url("

C:///Users///l///Desktop///前端///img///9.webp")'

var b10='url("

C:///Users///l///Desktop///前端///img///10.webp")'

var bbb=new Array()

bbb=[b1,b2,b3,b4,b5,b6,b7,b8,b9,b10]

document.getElementById("div010").style.background=bbb[aaa]

}, 5000);

window.onclick=function(){

clearInterval(timer);

document.getElementById("div010").style.background="white";

document.getElementById("div011").style.display="block";

}

var i=0;

var j=0;

var aa;

function f4(num){

aa=setInterval(function f2(){

i++;

document.getElementById("td02").innerHTML=i;

if(i>8){

i=0

j++

}

document.getElementById("td01").innerHTML=j;

if(j>8){

i=0;

j=0;

}

var bb=document.getElementById("td01").innerHTML;

if(Number(bb)==num){

document.getElementById("td02").innerHTML=0;

clearInterval(aa);

alert("時(shí)間到")

}

},1000);

}

function f5(){

document.getElementById("td01").innerHTML=0;

document.getElementById("td02").innerHTML=0;

clearInterval(aa);

i=0;

j=0;

}

var num=10

var que;

var objArray=[{"id":"1","subject":"寂寞空庭春欲晚，滿地梨花不開(kāi)門","answer":"劉方平《春怨》"},{"id":"2","subject":"萬(wàn)里清江萬(wàn)里天，一村桑柘一村煙","answer":"韓偓《醉著》"},{"id":"3","subject":"秋風(fēng)生渭水，落葉滿長(zhǎng)安","answer":"賈島《憶江上吳處士》"},{"id":"4","subject":"花開(kāi)花落不長(zhǎng)久，落紅滿地歸寂中","answer":"陳叔寶《玉樹(shù)后庭花》"},{"id":"5","subject":"客子光陰詩(shī)卷里，杏花消息雨聲中","answer":"馮延巳《南鄉(xiāng)子》"},{"id":"6","subject":"白云千里萬(wàn)里，明月前溪后溪","answer":"劉長(zhǎng)卿《謫仙怨》"},{"id":"7","subject":"漠漠梨花爛漫，紛紛柳絮飛殘","answer":"陳允平《紅林擒近·壽詞·滿路花》"},{"id":"8","subject":"酒醒明月下，夢(mèng)逐潮聲去","answer":"姜夔《玲瓏四犯·越中歲暮聞簫鼓感懷》"},{"id":"9","subject":"高樹(shù)月初白，微風(fēng)酒半醒。獨(dú)行穿落葉，閑坐數(shù)流螢。","answer":"林景熙《溪亭》"},{"id":"10","subject":"啼鳥(niǎo)云山靜，落花溪水香","answer":"戴叔倫《雨》"}];

function button01(num){

document.getElementById('div017').innerHTML=''

f5();

f4(num);

if(arr.length < 10){

var ddd=Math.floor(Math.random()*num);

que=objArray[ddd].answer

document.getElementById('div013').innerHTML=objArray[ddd].subject

arr.push(objArray[ddd].id)

objArray.splice(ddd,1)

document.getElementById('div016').innerHTML=arr

num--;

}else{

alert("題目選擇完畢")

}

function button02(){

document.getElementById('div017').innerHTML='答案：'+que

}

var img1="

C:///Users///l///Desktop///前端///lun1.jpg"

var img2="

C:///Users///l///Desktop///前端///lun2.jpg"

var img3="

C:///Users///l///Desktop///前端///lun3.jpg"

var img4="

C:///Users///l///Desktop///前端///lun4.jpg"

var img5="

C:///Users///l///Desktop///前端///lun5.jpg"

var img6="

C:///Users///l///Desktop///前端///lun6.jpg"

var arr01=[img1,img2,img3,img4,img5,img6]

var k=0;

setInterval(function f6(){

document.querySelector('#img').src=arr01[k];

k++;

if(k>5){

k=0;

}

}, 2000);

</script>

</html>

著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，小程序已經(jīng)成為了人們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠帧６渲校虅⌒〕绦蛞蚱洫?dú)特的形式和娛樂(lè)性，受到了越來(lái)越多用戶的喜愛(ài)。如果你也想嘗試搭建一個(gè)屬于自己的短劇小程序，本文將為你提供一個(gè)簡(jiǎn)單易懂的教程，讓你輕松入門。

第一步：選擇合適的平臺(tái)和工具

在開(kāi)始搭建之前，你需要先選擇一個(gè)適合的平臺(tái)和工具。目前市面上有很多小程序開(kāi)發(fā)平臺(tái)，例如微信小程序、支付寶小程序等。對(duì)于零基礎(chǔ)的用戶來(lái)說(shuō)，我們首推使用微信小程序開(kāi)發(fā)工具。它具有強(qiáng)大的功能和廣泛的用戶群體，更加便于推廣和交流。

第二步：了解基本概念和流程

在開(kāi)始實(shí)際搭建之前，你需要了解一些基本概念和流程。小程序主要由頁(yè)面、組件、API和數(shù)據(jù)四個(gè)核心部分組成。頁(yè)面是用戶所見(jiàn)到的界面，組件是用來(lái)構(gòu)造頁(yè)面的基本元素，API是用來(lái)實(shí)現(xiàn)功能的接口，數(shù)據(jù)則是用來(lái)存儲(chǔ)和管理用戶的信息。在搭建過(guò)程中，你需要對(duì)這些概念有一定的了解，并能夠使用它們進(jìn)行操作。

第三步：設(shè)計(jì)頁(yè)面和功能

V+123008

在正式開(kāi)始搭建之前，你需要先設(shè)計(jì)好你想要的頁(yè)面和功能。短劇小程序通常包含多個(gè)頁(yè)面，每個(gè)頁(yè)面都有其特定的功能和表現(xiàn)形式。比如，你可以設(shè)計(jì)一個(gè)首頁(yè)用來(lái)展示短劇列表，一個(gè)詳情頁(yè)用來(lái)展示具體的短劇內(nèi)容，一個(gè)評(píng)論頁(yè)用來(lái)用戶互動(dòng)等等。在設(shè)計(jì)時(shí)，要注意頁(yè)面之間的邏輯關(guān)系和流程，保證用戶能夠方便地進(jìn)行操作。

第四步：編寫代碼和樣式

在理清楚設(shè)計(jì)后，接下來(lái)就是編寫代碼和樣式了。微信小程序采用的是類似于HTML和CSS的語(yǔ)法，非常易于上手。你可以使用JavaScript來(lái)實(shí)現(xiàn)頁(yè)面的邏輯和交互，使用WXML來(lái)編寫頁(yè)面的結(jié)構(gòu)，使用WXSS來(lái)定義頁(yè)面的樣式。在編寫過(guò)程中，可以參考開(kāi)發(fā)文檔或?qū)で髱椭鉀Q遇到的問(wèn)題。

第五步：測(cè)試和調(diào)試

完成編寫代碼和樣式后，你可以進(jìn)行本地測(cè)試和調(diào)試。微信小程序提供了模擬器工具，可以在電腦上進(jìn)行真實(shí)的小程序模擬，以便檢查和調(diào)試你所搭建的短劇小程序。在測(cè)試過(guò)程中，要注意檢查頁(yè)面的顯示效果和功能的正常運(yùn)行，確保沒(méi)有錯(cuò)誤和問(wèn)題。

第六步：發(fā)布和推廣

當(dāng)你完成了測(cè)試和調(diào)試后，就可以進(jìn)行發(fā)布和推廣了。微信小程序提供了方便的發(fā)布流程，只需要按照指引進(jìn)行操作即可。在發(fā)布前，你需要準(zhǔn)備好小程序的圖標(biāo)、描述和其他基本信息，并通過(guò)審核才能正式發(fā)布。一旦發(fā)布成功，你可以將你的短劇小程序分享給別人，進(jìn)行推廣和使用。

通過(guò)以上的教程，相信你已經(jīng)初步了解了如何搭建一個(gè)屬于自己的短劇小程序。雖然這只是一個(gè)簡(jiǎn)單的入門教程，但相信對(duì)于零基礎(chǔ)的用戶來(lái)說(shuō)已經(jīng)足夠了。希望你能夠動(dòng)手嘗試，并不斷學(xué)習(xí)和提高，打造出更加精彩的短劇小程序！

短劇系統(tǒng)搭建小編推薦：

https://www.zongqi.cc/product/view8958.html

為您提供縱企短劇網(wǎng)站建設(shè),短劇系統(tǒng)搭建,短劇小程序搭建及短劇APP制作服務(wù)。

提供優(yōu)惠碼可優(yōu)惠：ATS2570

天這一課要學(xué)習(xí)的是HTML編程的第一個(gè)基礎(chǔ)程序，在網(wǎng)頁(yè)上顯示一句話：“Hello world”，就如同學(xué)習(xí)其它編程語(yǔ)言一樣，顯示一個(gè)最簡(jiǎn)單的文本，這是一個(gè)非常基礎(chǔ)的HTML代碼，它會(huì)在網(wǎng)頁(yè)上顯示英文句子"Hello world"。

<!DOCTYPE html>

<html>

<head>

<title>我的第一個(gè)網(wǎng)頁(yè)</title>

<meta charset="UTF-8">

</head>

<body>

<h1>Hello world ！</h1>

</body>

</html>

在上面這段代碼中：

* `<!DOCTYPE html>` 聲明這是一個(gè)HTML5文檔。

* `<html>` 標(biāo)簽定義了HTML文檔的開(kāi)始和結(jié)束。

* `<head>` 標(biāo)簽包含了文檔的元信息，比如字符集（通過(guò) `<meta charset="UTF-8">` 定義）以及文檔的標(biāo)題（通過(guò) `<title>` 定義）。

* `<body>` 標(biāo)簽包含了頁(yè)面主體的內(nèi)容，這里是用 `<h1>` 標(biāo)簽定義的一個(gè)標(biāo)題，顯示了文字 "Hello world"。

在線咨詢

上一篇：前方賀電!白鷺引擎榮獲移動(dòng)游戲HTML5產(chǎn)業(yè)貢獻(xiàn)獎(jiǎng)
下一篇：Google將于今年關(guān)閉Gmail的基本HTML視圖

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

JavaScript的小程序

您的項(xiàng)目需求