標籤:style 20px color add link ref src div eth
使用mui項目模板,用APP視角預覽,此項目須在真機上進行運行測試。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <title></title> 7 <script src="js/mui.min.js"></script> 8 <link href="css/mui.min.css" rel="stylesheet"/> 9 <script type="text/javascript" charset="utf-8">10 mui.init();11 </script>12 </head>13 <body>14 <header class="mui-bar mui-bar-nav">15 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>16 <h1 class="mui-title">時鐘效果</h1>17 </header>18 <div class="mui-content">19 <div style="padding: 20px;">20 <button type="button" onclick="showDate();">擷取日期</button>21 <button type="button" onclick="showTime();">擷取時間 </button>22 </div>23 </div>24 </body>25 <script type="text/javascript">26 function showDate(){27 var dDate = new Date();28 dDate.setFullYear(2018,3,8);29 var minDate = new Date();30 minDate.setFullYear(2010,1,1);31 var maxDate = new Date();32 maxDate.setFullYear(2020,12,31);33 34 plus.nativeUI.pickDate(35 function(e){36 var d = e.date;37 mui.toast(‘您選擇的日期是:‘+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate());38 },39 function(e){40 mui.toast(‘您沒有選擇‘);41 },42 {43 title:‘請選擇日期‘,44 date:dDate,45 minDate:minDate,46 maxDate:maxDate47 }48 );49 }50 function showTime(){51 var myDate = new Date();52 var h = myDate.getHours();53 var min = myDate.getMinutes();54 var dTime = new Date();55 dTime.setHours(h,min);56 57 plus.nativeUI.pickTime(function(e){58 var d = e.date;59 mui.toast("您選擇的時間是:"+d.getHours()+":"+d.getMinutes());60 },function(e){61 mui.toast("您沒有選擇時間");62 },{63 title:"請選擇時間",64 is24Hour:true,65 time:dTime66 });67 }68 </script>69 </html>
移動端web日期與時鐘設定