項(xiàng)目4JavaScript基礎(chǔ)入門任務(wù)1按下按鈕改變view的背景色

【任務(wù)描述】（1）設(shè)置一個(gè)view，樣式名為box,背景色為非白色，大小適當(dāng)，居中顯示于屏幕上方。（3）組件上下之間有一定的間隔。按下按鈕改變view的背景色，如圖4-1-1所示。（2）添加2個(gè)button，按下按鈕，實(shí)現(xiàn)改變view背景色為指定顏色。（4）標(biāo)題設(shè)置為“背景變色”。圖4-1-1改變view的背景色【操作步驟】1．打開index.wxml文件，添加view和butoon組件。<view

style="background:{{MyColor}};"

class="box">

請(qǐng)注意顏色變化</view><button

type="default"

bindtap="toRed">變紅色</button><button

type="default"

bindtap="toYellow">變黃色</button>【操作步驟】2．打開index.wxss文件,添加.box、button樣式。.box{

margin:0

auto;

width:500rpx;

height:300rpx;

line-height:

300rpx;

text-align:

center;

border:

10px

solid

#0f1;}button{

margin-top:20rpx;}【操作步驟】3．打開index.js文件，定義變量MyColor，并實(shí)現(xiàn)toRed、toYellow事件功能。Page({

data:{

MyColor:'green'

},

toRed(){

this.setData({

MyColor:'red'

})

},

toYellow(){

this.setData({

MyColor:'yellow'

})

},

})任務(wù)2改變字號(hào)【任務(wù)描述】編程實(shí)現(xiàn)改變字號(hào)的功能，如圖4-2-1所示。（1）執(zhí)行“字號(hào)增大”框內(nèi)文本的字號(hào)變大。（2）執(zhí)行“字號(hào)變小”框內(nèi)文本的字號(hào)變小。圖4-2-1改變字號(hào)【操作步驟】【操作步驟】1.打開index.wxml，添加<viewclass="box">、<buttontype="default"bindtap="toBig">、<buttontype="default"bindtap="toSmall">等組件。<view

class="box"

style="font-size:{{size}}%;">

小程序案例設(shè)計(jì)</view><button

type="default"

bindtap="toBig">字號(hào)增大</button><button

type="default"

bindtap="toSmall">字號(hào)變小</button>【操作步驟】2.打開index.wxss，添加.box、button等樣式。.box{

margin:0

auto;

width:90%;

height:300rpx;

line-height:

300rpx;

text-align:

center;

border:

5px

solid

#0f1;}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量size,添加toBig()函數(shù)實(shí)現(xiàn)增大size的功能，添加toSmall()函數(shù)實(shí)現(xiàn)減小size的功能。Page({

data:{

size:50

},

toBig(){

this.size=this.data.size;

this.size=this.size+10;

console.log(this.size);

this.setData({

size:this.size

})

},【操作步驟】

toSmall(){

this.size=this.data.size;

this.size=this.size-10;

this.setData({

size:this.size

})

},

})任務(wù)3正方形變圓【任務(wù)描述】編程實(shí)現(xiàn)正方形變圓的功能，如圖4-3-1、圖4-3-2所示。（1）執(zhí)行“變圓？”框的四角向圓角變化。（2）多次執(zhí)行“變圓？”框會(huì)變成圓。圖4-3-1正方形任務(wù)3正方形變圓圖4-3-2正方形變圓【操作步驟】【操作步驟】1.打開index.wxml，添加<viewclass="box">、<buttontype="default"bindtap="tobecircle">等組件。<view

class="box"

style="border-radius:{{ra}}%">

方圓</view><button

type="default"

bindtap="tobecircle">變圓？</button>【操作步驟】2.打開index.wxss，添加.box、button等樣式。.box{

margin:0

auto;

width:500rpx;

height:500rpx;

line-height:

500rpx;

text-align:

center;

border:

5px

solid

#0f1;}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量ra,添加tobecircle()函數(shù)實(shí)現(xiàn)增大ra的功能。Page({

data:{

ra:0

},

tobecircle(){

this.ra=this.data.ra;

this.ra=this.ra+3;

this.setData({

ra:this.ra

})

},})任務(wù)4左右移【任務(wù)描述】編程實(shí)現(xiàn)左右移的功能，如圖4-4-1所示。（1）執(zhí)行“右移”，框內(nèi)的圓向右移動(dòng)。（2）執(zhí)行“左移”，框內(nèi)的圓向左移動(dòng)。圖4-4-1左右移”【操作步驟】【操作步驟】1.打開index.wxml，添加<viewclass="box">、<viewclass="cirle"style="left:{{vLeft}}%">、<buttontype="default"bindtap="toRight">、<buttontype="default"bindtap="toLeft">等組件。<view

class="box">

<view

class="cirle"

style="left:{{vLeft}}%">

圓

</view>

<button

type="default"

bindtap="toRight">右移</button>

<button

type="default"

bindtap="toLeft">左移</button></view>【操作步驟】2.打開index.wxss，添加.box、.cirle、button等樣式。.box{

margin:0

auto;

height:900rpx;

width:90%;

border:

2px

solid

rgb(5,255,88);}【操作步驟】.cirle{

position:relative;

top:200rpx;

width:50rpx;

height:50rpx;

line-height:

50rpx;

text-align:

center;

border:

5px

solid

#0f1;

border-radius:

50%;}button{

margin-top:20rpx;

position:relative;

top:500rpx;}【操作步驟】3.打開index.js，添加變量vLeft,添加toRight()函數(shù)實(shí)現(xiàn)增大vLeft的功能,添加toLeft()函數(shù)實(shí)現(xiàn)減小vLeft的功能。Page({

data:{

vLeft:45

},

toRight(){

this.vLeft=this.data.vLeft;

this.vLeft=this.vLeft+3;

this.setData({

vLeft:this.vLeft

})

},【操作步驟】

toLeft(){

this.vLeft=this.data.vLeft;

this.vLeft=this.vLeft-3;

this.setData({

vLeft:this.vLeft

})

},

})任務(wù)5數(shù)量增大減少【任務(wù)描述】編程實(shí)現(xiàn)左右數(shù)字增加減少的功能，如圖4-5-1所示。（1）執(zhí)行“+”，框內(nèi)的數(shù)字增加1。（2）執(zhí)行“-”，框內(nèi)的數(shù)字減少1。圖4-5-1數(shù)字增加減少【操作步驟】1.打開index.wxml，添加<viewclass="box">、<buttontype="default"bindtap="toPlus">、<buttontype="default"bindtap="toMinus">等組件。<view

class="box">

{{vData}}</view><button

type="default"

bindtap="toPlus">+</button><button

type="default"

bindtap="toMinus">-</button>【操作步驟】2.打開index.wxss，添加.box、button等樣式。.box{

margin:0

auto;

height:300rpx;

line-height:300rpx;

font-size:200rpx;

text-align:center;

border:

2px

solid

rgb(5,255,88);}button{

margin-top:20rpx;

font-size:100rpx;

}【操作步驟】3.打開index.js，添加變量vData,添加toPlus()函數(shù)實(shí)現(xiàn)vData增加1的功能,添加toMinus()函數(shù)實(shí)現(xiàn)vData減小1的功能。Page({

data:{

vData:45

},

toPlus(){

this.vData=this.data.vData;

this.vData++;

this.setData({

vData:this.vData

})

},【操作步驟】

toMinus(){

this.vData=this.data.vData;

this.vData--;

this.setData({

vData:this.vData

})

},

})任務(wù)6長(zhǎng)度變了編程實(shí)現(xiàn)長(zhǎng)寬變化的功能，如圖4-6-1所示。（1）執(zhí)行“長(zhǎng)”，框的寬度變大。（2）執(zhí)行“窄”，框的寬度變小?！救蝿?wù)描述】圖4-6-1長(zhǎng)寬變化【操作步驟】1.打開index.wxml，添加<viewclass="box">、<buttontype="default"bindtap="toWider">、<buttontype="default"bindtap="toLess">等組件。<view

class="box"

style="width:{{vWidth}}%">

長(zhǎng)寬變化了？</view><button

type="default"

bindtap="toWider">變長(zhǎng)</button><button

type="default"

bindtap="toLess">變窄</button>【操作步驟】2.打開index.wxss，添加.box、button等樣式。.box{

margin:0

auto;

height:300rpx;

line-height:300rpx;

text-align:center;

border:

2px

solid

rgb(5,255,88);}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量vWidth,添加toWider()函數(shù)實(shí)現(xiàn)vWidth增加10的功能,添加toLess()函數(shù)實(shí)現(xiàn)toLess()減小10的功能。Page({

data:{

vWidth:45

},

toWider(){

this.vWidth=this.data.vWidth;

this.vWidth=this.vWidth+10;

this.setData({

vWidth:this.vWidth

})

},【操作步驟】

toLess(){

this.vWidth=this.data.vWidth;

this.vWidth=this.vWidth-10;

this.setData({

vWidth:this.vWidth

})

},

})任務(wù)7石頭剪刀布【任務(wù)描述】編程實(shí)現(xiàn)石頭剪刀布的功能，如圖4-7-1所示。（1）執(zhí)行“石頭”，只顯示“石頭”圖片。（2）執(zhí)行“剪刀”，只顯示“剪刀”圖片。（3）執(zhí)行“布”，只顯示“布”圖片。圖4-7-1石頭剪刀布【操作步驟】1.打開index.wxml，添加<viewclass="box"style="width:100%">、<buttontype="default"bindtap="toS">、<buttontype="default"bindtap="toJ">、<buttontype="default"bindtap="toB">等組件。<view

class="box"

style="width:100%"><image

src="../../images/{{t}}.png"></image></view><button

type="default"

bindtap="toS">石頭</button><button

type="default"

bindtap="toJ">剪刀</button><button

type="default"

bindtap="toB">布</button>【操作步驟】2.打開index.wxss，添加.box、image、button等樣式。.box{

margin:0

auto;

height:500rpx;

line-height:300rpx;

text-align:center;

border:

2px

solid

rgb(5,255,88);}【操作步驟】image{

width:300rpx;

height:300rpx;

margin-top:100rpx;}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量t,添加toS()函數(shù)實(shí)現(xiàn)t賦值為"s"的功能，添加toB()函數(shù)實(shí)現(xiàn)t賦值為"b"的功能，添加toJ()函數(shù)實(shí)現(xiàn)t賦值為"j"的功能。Page({

data:{

t:"b"

},

toS(){

this.setData({

t:"s"

})

},【操作步驟】

toB(){

this.setData({

t:"b"

})

},

toJ(){

this.setData({

t:"j"

})

},

})任務(wù)8wx:if實(shí)現(xiàn)開燈關(guān)燈效果【任務(wù)描述】編程實(shí)現(xiàn)開燈關(guān)燈的功能，如圖4-8-1、圖4-8-2所示。（1）執(zhí)行“開燈”，顯示開了燈的圖片，開燈后，按鈕上的文本顯示“關(guān)燈”。（2）執(zhí)行“關(guān)燈”，顯示關(guān)了燈的圖片，關(guān)燈后，按鈕上的文本顯示“開燈”。圖4-8-1開燈任務(wù)8wx:if實(shí)現(xiàn)開燈關(guān)燈效果圖4-8-2關(guān)燈【操作步驟】1.打開index.wxml，添加<viewclass="box">、<imagesrc="../images/lighton.png"wx:if="{{t}}"></image>、<imagesrc="../images/lightoff.png"wx:else></image>、<buttontype="default"bindtap="toONOFF">等組件。<view

class="box">

<image

src="../images/lighton.png"

wx:if="{{t}}"></image>

<image

src="../images/lightoff.png"

wx:else></image></view><button

type="default"

bindtap="toONOFF">{{info}}</button>【操作步驟】2.打開index.wxss，添加.box、image、button等樣式。.box{

margin:0

auto;

height:500rpx;

line-height:300rpx;

text-align:center;

border:

2px

solid

rgb(5,255,88);}【操作步驟】image{

width:300rpx;

height:300rpx;

margin-top:100rpx;}button{

margin-top:20rpx;}【操作步驟】3.打開index.js，添加變量t,添加toONOFF()函數(shù)實(shí)現(xiàn)t取反的功能。Page({

data:{

t:true,

info:"關(guān)燈"

},

toONOFF(){

this.t=this.data.t;

this.info=this.;

this.t=!this.t;

if(this.t)

this.info="關(guān)燈";

else

this.info="開燈";

this.setData({

t:this.t,

info:this.info

})

},})【操作步驟】任務(wù)9控制漸變色【任務(wù)描述】編程實(shí)現(xiàn)控制漸變色的功能，如圖4-9-1所示。（1）執(zhí)行“向左”，漸變色的方向左。（2）執(zhí)行“向右”，漸變色的方向右。（3）執(zhí)行“向左下”，漸變色的方向左下。（4）執(zhí)行“向右下”，漸變色的方向右下。圖4-9-1控制漸變色【操作步驟】1.打開index.js，添加變量dir,添加toLeft()函數(shù)實(shí)現(xiàn)dir賦值為"left"的功能,添加toRight()函數(shù)實(shí)現(xiàn)dir賦值為"right"的功能,添加toLeftdown()函數(shù)實(shí)現(xiàn)dir賦值為"bottomleft"的功能,添加toRightdown()函數(shù)實(shí)現(xiàn)dir賦值為"bottomright"的功能。Page({

data:{

dir:"right"

},

toLeft(){

this.setData({

dir:"left"

})

},【操作步驟】

toRight(){

this.setData({

dir:"right"

})

},

toLeftdown(){

this.setData({

dir:"bottomleft"

})

},

toRightdown(){

this.setData({

dir:"bottomright"

})

},

})【操作步驟】2.打開index.wxml，添加<buttonbindtap="toLeft">、<buttonbindtap="toRight">、<buttonbindtap="toLeftdown">、<buttonbindtap="toRightdown">、<viewclass="box">等組件。<button

bindtap="toLeft">向左</button><button

bindtap="toRight">向右</button><button

bindtap="toLeftdown">向左下</button><button

bindtap="toRightdown">向右下</button><view

class="box"

style="background-image:linear-gradient(to{{dir}},green,yellow);"></view>【操作步驟】3.打開index.wxss，添加.box、button等樣式。.box{

height:500rpx;

width:100%;}button{

display:

inline;

margin-left:10rpx;}任務(wù)10日期的顯示【任務(wù)描述】編程實(shí)現(xiàn)顯示系統(tǒng)日期的功能，如圖4-10-1所示。（1）執(zhí)行“今天”，顯示系統(tǒng)的當(dāng)前日期。（2）執(zhí)行“明天”，顯示系統(tǒng)的當(dāng)前日期的明天日期。（3）執(zhí)行“昨天”，顯示系統(tǒng)的當(dāng)前日期的昨天日期，（4）日期以中文“年月日”格式顯示。【操作步驟】1.打開index.wxml，添加<buttonbindtap="today">、<text>{{today}}</text>、<buttonbindtap="nextDate">、<text>{{today1}}</text>、<buttonbindtap="preDate">、<text>{{today_1}}</text>等組件。<view>

<button

bindtap="today">今天</button>

<text

>{{today}}</text></view>【操作步驟】<view>

<button

bindtap="nextDate">明天</button>

<text

>{{today1}}</text></view><view>

<button

bindtap="preDate">昨天</button>

<text

>{{today_1}}</text></view>【操作步驟】2.打開index.wxss，添加button等樣式。button{

display:

inline;

margin-left:10rpx;}【操作步驟】3.打開index.js，添加變量today、today1、today_1,添加today()函數(shù)實(shí)現(xiàn)獲取當(dāng)前日期的功能,添加nextDate()函數(shù)實(shí)現(xiàn)獲取當(dāng)前日期下一天的功能,添加preDate()函數(shù)實(shí)現(xiàn)獲取當(dāng)前日期前一天的功能。Page({

data:{

today:"",

today1:"",

today_1:"",

},【操作步驟】

today(){

var

nextDate=new

Date();

var

Y

=nextDate.getFullYear();//月

var

M

=(nextDate.getMonth()+1

<10

?'0'

+(nextDate.getMonth()+1):nextDate.getMonth()+1);//月

var

D

=nextDate.getDate()<10

?'0'

+nextDate.getDate():nextDate.getDate();//日

this.setData({

today:Y

+"年"

+M

+"月"

+D

+"日",

})

},【操作步驟】

nextDate(){

var

curDate=new

Date();

var

nextDate=new

Date(curDate.getTime()+24

*60

*60

*1000);//后一天

var

Y

=nextDate.getFullYear();//月

var

M

=(nextDate.getMonth()+1

<10

?'0'

+(nextDate.getMonth()+1):nextDate.getMonth()+1);//月

var

D

=nextDate.getDate()<10

?'0'

+nextDate.getDate():nextDate.getDate();//日

this.setData({

today1:Y

+"年"

+M

+"月"

+D

+"日",

})

},【操作步驟】

preDate(){

var

curDate=new

Date();

var

preDate=new

Date(curDate.getTime()-24

*60

*60

*1000);//前一天

var

Y

=preDate.getFullYear();//月

var

M

=(preDate.getMonth()+1

<10

?'0'

+(preDate.getMonth()+1):preDate.getMonth()+1);//月

var

D

=preDate.getDate()<10

?'0'

+preDate.getDate():preDate.getDate();

//日

this.setData({

today_1:Y

+"年"

+M

+"月"

+D

+"日",

})

},

})任務(wù)11用wx:fox設(shè)計(jì)課程表用wx:fox設(shè)計(jì)一周的課程表，如圖4-11-1所示。（1）顯示一周的課程表。（2）第一行顯示星期一至星期五。（3）第一列顯示第1節(jié)至第6節(jié)。（4）其他格子顯示數(shù)組記錄的課表內(nèi)容。（5）第一行、第一列與其他格式的樣式有區(qū)別。圖4-11-1課程表【操作步驟】1.打開index.js，添加數(shù)組變量array、x1、x2、x3、x4、x5。Page({

data:{

array:["第1節(jié)","第2節(jié)","第3節(jié)","第4節(jié)","第5節(jié)","第6節(jié)"],

x1:["美工","體育","web","小程序","UI","網(wǎng)絡(luò)"],

x2:["數(shù)學(xué)","計(jì)算機(jī)","編程","物聯(lián)網(wǎng)","web","web"],

x3:["語(yǔ)文","數(shù)學(xué)","英語(yǔ)","體育","編程","編程"],

x4:["web","小程序","UI","物聯(lián)網(wǎng)","web","web"],

x5:["數(shù)學(xué)","計(jì)算機(jī)","web","小程序","UI","web"],

},})【操作步驟】2.打開index.wxml，添加<viewclass="row">、<viewclass="dt1th">、<viewclass="dt

th">、<viewwx:for="{{array}}">等組件。<view

class="row">

<view

class="dt1th"></view>

<view

class="dt

th">

星期一

</view>

<view

class="dt

th">

星期二

</view>

<view

class="dt

th">

星期三

</view>

<view

class="dt

th">

星期四

</view>

<view

class="dt

th">

星期五

</view>

</view>【操作步驟】<view

wx:for="{{array}}">

<view

class="row">

<view

class="dt1">{{item}}</view>

<view

class="dt">

{{x1[index]}}

</view>

<view

class="dt">

{{x2[index]}}

</view>

<view

class="dt">

{{x3[index]}}

</view>

<view

class="dt">

{{x4[index]}}

</view>

<view

class="dt">

{{x5[index]}}

</view>

</view></view>【操作步驟】3.打開index.wxss，添加page、.dt1、.dt、.row、.th等樣式。page{

font-size:40rpx;}.dt1{

width:130rpx;

height:120rpx;

line-height:

120rpx;

margin-top:5rpx;

background-color:

rgb(8,121,187);}【操作步驟】.dt{

width:130rpx;

height:120rpx;

line-height:

120rpx;

margin-top:5rpx;

background-color:

rgb(121,218,224);

margin-left:5rpx;}【操作步驟】.row{

display:flex;}.th{

text-align:

center;

background-color:

rgb(81,121,187);

height:80rpx;

line-height:80rpx;}任務(wù)12增刪圖片【任務(wù)描述】編程實(shí)現(xiàn)添加減少圖片的功能，如圖4-12-1所示。（1）執(zhí)行“加一張”，顯示多一張圖片。（2）執(zhí)行“減一張”，顯示圖片減一張。（3）圖片與信息一起顯示。圖4-12-1添加減少圖片【操作步驟】1.打開index.js，添加數(shù)組變量num,添加getone函數(shù)實(shí)現(xiàn)添加數(shù)組num一個(gè)元素的功能,,添加moveone函數(shù)實(shí)現(xiàn)刪除一個(gè)數(shù)組num元素的功能。Page({

data:{

num:[],

},

moveone:function

(options){

this.num=this.data.num;

this.num.pop(this.data.num.length);

this.setData({

num:this.num,

})

},

getone:function

(options){

this.num=this.data.num;

this.num.push(this.data.num.length);

this.setData({

num:this.num,

})

},})【操作步驟】2.打開index.wxml，添加<buttonbindtap="getone">、<buttonbindtap="moveone">、<viewwx:for="{{num}}"class="box">、<imagesrc="../../images/w1.png"class="ima">等組件。<button

bindtap="getone">加一張</button><button

bindtap="moveone">減一張</button><view

wx:for="{{num}}"

class="box">第{{index+1}}張

<image

src="../../images/w1.png"

class="ima"></image></view>【操作步驟】3.打開index.wxss，添加.ima樣式。.ima{

width:100rpx;

height:100rpx;}任務(wù)13if語(yǔ)句應(yīng)用于全選【任務(wù)描述】給出兩項(xiàng)選擇，可全選或全不選，也可以單擊某一項(xiàng)更改單項(xiàng)的選擇狀態(tài)，如圖4-13-1所示。（1）運(yùn)用icon組件，實(shí)現(xiàn)兩個(gè)選項(xiàng)的顯示，并為選擇設(shè)置適當(dāng)?shù)臉邮剑哼吙?、邊距、底色或字體大小等。（2）初始時(shí)一項(xiàng)處于被選狀態(tài)，另一項(xiàng)處于不被選中狀態(tài)。（3）提供兩個(gè)按鈕，實(shí)現(xiàn)全選和全不選的功能。（4）編程實(shí)現(xiàn)單擊任一項(xiàng)時(shí)，能切換選擇狀態(tài)。圖4-13-1可全選或全不選【操作步驟】【操作步驟】1．打開index.wxml文件，添加<viewstyle="margin-top:50rpx;">、<textclass='Item'>、<viewclass="itembox">、<viewclass="itemsub"bindtap="SelectA">、<icontype="{{ItemAstate}}"size="20"/>、<viewclass="itemsub"bindtap="SelectB">、<icontype="{{ItemBstate}}"size="20"/>等組件。<view

style="margin-top:50rpx;">

<text

class='Item'>1.{{ItemTitle}}</text>

</view>【操作步驟】<view

class="itembox">

<view

class="itemsub"

bindtap="SelectA">

<icon

type="{{ItemAstate}}"

size="20"/>{{ItemA}}

</view>

<vi