Index.hml

<div class="container1">

创建一个名为container1的区域组件，组件包含一个名为container2

的区域组件和一个按钮组件。

<div class="container2">

创建一个名为container2的区域组件

<picker-view class="pv1" range="{{picker1range}}" selected="1" onchange="changeAction1"/>

创建一个名为pv1 的滚动选择器，里面的数据picker1range通过动态绑定的方式获得，创建一个名为changeAction1的onchange事件，当滚动选择器中的数据发生改变的时候，会引发onchange事件

<text class="txt">
分
</text>

创建一个文本组件，使其显示左边滚动选择器的数据的单位，分

<image src="/common/hm.png" class="img" />

创建一个名为img的图片组件，src为图片的地址

<picker-view class="pv2" range="{{picker2range}}" selected="1" onchange="changeAction2"/>

创建一个名为pv2 的滚动选择器，里面的数据picker2range通过动态绑定的方式获得，创建一个名为changeAction2的onchange事件，当滚动选择器中的数据发生改变的时候，会引发onchange事件

<input type="button" value="点击开始" class="btn" onclick="clickAction"/>

创建一个名为btn的按钮组件，按钮上显示的文字为点击开始，点击按钮会引发clickAction事件。

Index.css

设定container1组件的样式

注释：flex-direction: column

使在.container1内的元素横向排列

justify-content: center

设置,container居中对齐

align-items: center

使.container1的元素居中对齐

width: 454px;
height: 454px;

规定.container1的范围。Container1在手表上最多显示的范围就是width:454px,

Height:454px这个矩形的内接圆。

规定container2组件的样式

注释：flex-direction: row;

使在.container2的元素竖向排列

justify-content: center;

使.container2的元素居中对齐

margin-top: 50px;

设定.container2组件的外上边距为50px

width: 454px;
height: 250px;

设定.container2组件的高度和宽度‘

规定滚动选择器pv1的样式

注释：width: 30px;
height: 250px;

设定滚动选择器pv1的高度和宽度

规定txt组件的样式

注释：text-align: center;

使txt组件的文本居中对齐

width: 50px;
height: 36px;

设定txt组件的高度和宽度

规定滚动选择器px2的样式

注释：width: 80px;
height: 250px;

设定滚动选择器pv2的高度和宽度

规定图片组件的样式

注释：width: 208px;
height: 208px;

设定图片组件的高度和宽度

margin-left: 15px;
margin-right: 15px;

设定图片组件的左边距和右边距

规定按钮组件的样式

注释：width: 200px;
height: 50px;

设定图片组件的高度和宽度

font-size: 38px;

设定按钮组件字体的大小

background-color: #000000;

设定按钮组件的背景颜色 #000000为黑色

border-color: #000000;

设定按钮组件边框的颜色 #000000为黑色

Index.js

导入要用到的router，声明变量picker1value和picker2value，并初始化变量

把数据赋予动态绑定的两个滚动选择器中的数据

点击按钮所引发的事件，点击按钮会通过router.replace跳转到倒计时页面，并把picker1value和picker2value的值通过字典的形式传递到训练页面

当滚动选择器pv1和滚动选择器pv2的值发生改变时所引发的事件。

当滚动器的值发生改变时通过pv.newValue获得改变后的值，并将其给picker1value或者picker2value