改二级菜单联动。选择时间和分钟

首先引入   <script src="../js/mui.min.js"></script>

<script src="../js/mui.picker.js"></script>
<script src="../js/mui.poppicker.js"></script>

html的内容。

<ul class="mui-table-view" style="margin-top: 10px;">
<li class="mui-table-view-cell mui-indexed-list-item mui-left " id="after">
选择时间距离当前30分钟之后：<span  class=" mui-pull-right"><span class="mui-icon mui-navigate-right mui-pull-right" ></span></span>
</li>
<li class="mui-table-view-cell mui-indexed-list-item mui-left" id="now">
选择时间距离当前时间之后：<span  class=" mui-pull-right"><span class="mui-icon mui-navigate-right mui-pull-right" ></span></span>
</li>

</ul>

下面是js的内容

<script>

//弹出的时间从当前时间3分钟之后开始的。

var date=new Date();//获取当前的时间
var time=Date.parse(date);//把时间转为毫秒
time=time+30*60*1000; //加上30分钟，也就是30*60*1000毫秒
var time2=new Date(time);//把刚才那个毫秒在转化为标准时间
var hour=time2.getHours();   //获取30分钟后的小时
var minutes=time2.getMinutes(); //获取30分钟后的分钟。。。因为是从毫秒换算过来的所以没有9：45加上30分钟后变成9：75的情况。而是直接跳转到10：25的正确时间啦。

//-------完全一样的内容区域---------------------------------
var cityData=[];  //小时
var children2=[]; //分钟
//分钟
for(var i=0;i<60;i++){
if(i/10<1){i="0"+i}//如果是个位数就在前面加个0
children2.push({
value:i,
text:i
});
}
//小时
for(var i=hour;i<24;i++){

//第一个小时的分钟是从当前开始，但是下一个时刻，分钟又从0开始了。所以在下面需要当初写个判断，不能都用上面那个从0开始的循环
if(i==hour){
var children3=[]
for(var m=minutes;m<60;m++){
if(m/10<1){m="0"+m}//如果是个位数就在前面加个0
children3.push({
value:m,
text:m
});
}//for结束
cityData.push({
value:i,
text:i,
children:children3
});

}
//第一个小时的分钟的结束

else{
if(i/10<1){i="0"+i}
cityData.push({
value:i,
text:i,
children:children2
});
}
}
//小时结束

//级联示例
var cityPicker = new mui.PopPicker({
layer: 2
});
cityPicker.setData(cityData);
var showCityPickerButton = document.getElementById('after');
showCityPickerButton.addEventListener('tap', function(event) {
cityPicker.show(function(items) {
showCityPickerButton.innerText = "你选择的是:" + items[0].text + " ：" + items[1].text;
//返回 false 可以阻止选择框的关闭
//return false;
});
}, false);
//-----------------------------------------

//从当前时间开始，那么就直接获取时间小时分钟就好啦，就不应转换为什么毫秒。----------然后下面的内容就（注意只有点击的那么元素的区别）完全一样了。需要注意的是addEventListener是个无论在哪里都会被执行的，并且一个元素写两个就执行两个
var date=new Date();//获取当前的时间
//  var time=Date.parse(date);
//  time=time+30*60*1000;
//  var time2=new Date(time);
var hour=date.getHours();   //获取当前的小时
var minutes=date.getMinutes(); //获取当前的分钟

//-------完全一样的内容区域---------------------------------
var cityData=[];  //小时
var children2=[]; //分钟
//分钟
for(var i=0;i<60;i++){
if(i/10<1){i="0"+i}//如果是个位数就在前面加个0
children2.push({
value:i,
text:i
});
}
//小时
for(var i=hour;i<24;i++){

//第一个小时的分钟是从当前开始，但是下一个时刻，分钟又从0开始了。所以在下面需要当初写个判断，不能都用上面那个从0开始的循环
if(i==hour){
var children3=[]
for(var m=minutes;m<60;m++){
if(m/10<1){m="0"+m}//如果是个位数就在前面加个0
children3.push({
value:m,
text:m
});
}//for结束
cityData.push({
value:i,
text:i,
children:children3
});

}
//第一个小时的分钟的结束

else{
if(i/10<1){i="0"+i}
cityData.push({
value:i,
text:i,
children:children2
});
}
}
//小时结束

//级联示例
var cityPicker = new mui.PopPicker({
layer: 2
});
cityPicker.setData(cityData);
var showCityPickerButton = document.getElementById('now');
showCityPickerButton.addEventListener('tap', function(event) {
cityPicker.show(function(items) {
showCityPickerButton.innerText = "你选择的是:" + items[0].text + " ：" + items[1].text;
//返回 false 可以阻止选择框的关闭
//return false;
});
}, false);
//-----------------------------------------
</script>