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