|
@@ -0,0 +1,354 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="content">
|
|
|
|
+ <image src="../static/image/cxb.png" mode="widthFix" style="width: 100vw;"></image>
|
|
|
|
+ <view class="table">
|
|
|
|
+ <view class="row" v-for="(item,index) in tableList" :class="item.check?'row-active':''">
|
|
|
|
+ <image src="../static/image/today.png" mode="widthFix" v-if="item.check" style="width: 34rpx;position: absolute;left: 5px;height: auto;"></image>
|
|
|
|
+ <view class="col1 color">
|
|
|
|
+ {{item.name}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="col2 col">
|
|
|
|
+ {{item.val1}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="col3 col">
|
|
|
|
+ {{item.val2}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="col4 col">
|
|
|
|
+ {{item.val3}}
|
|
|
|
+ </view>
|
|
|
|
+ <view class="col5 col">
|
|
|
|
+ {{item.val4}}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ isShowStyle:false,
|
|
|
|
+ tableList: [{
|
|
|
|
+ name: '日期/时间',
|
|
|
|
+ val1: '涨潮',
|
|
|
|
+ val2: '落潮',
|
|
|
|
+ val3: '涨潮',
|
|
|
|
+ val4: '落潮',
|
|
|
|
+ check:false,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '初一/十六',
|
|
|
|
+ val1: '5:44',
|
|
|
|
+ val2: '11:44',
|
|
|
|
+ val3: '17:44',
|
|
|
|
+ val4: '23:44',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '初二/十七',
|
|
|
|
+ val1: '6:32',
|
|
|
|
+ val2: '12:32',
|
|
|
|
+ val3: '18:32',
|
|
|
|
+ val4: '24:32',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '初三/十八',
|
|
|
|
+ val1: '7:20',
|
|
|
|
+ val2: '12:20',
|
|
|
|
+ val3: '19:20',
|
|
|
|
+ val4: '1:20',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '初四/十九',
|
|
|
|
+ val1: '8:08',
|
|
|
|
+ val2: '14:08',
|
|
|
|
+ val3: '20:08',
|
|
|
|
+ val4: '2:08',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '初五/二十',
|
|
|
|
+ val1: '8:56',
|
|
|
|
+ val2: '14:56',
|
|
|
|
+ val3: '20:56',
|
|
|
|
+ val4: '2:56',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '初六/廿一',
|
|
|
|
+ val1: '9:44',
|
|
|
|
+ val2: '15:44',
|
|
|
|
+ val3: '21:44',
|
|
|
|
+ val4: '3:44',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '初七/廿二',
|
|
|
|
+ val1: '10:32',
|
|
|
|
+ val2: '16:32',
|
|
|
|
+ val3: '22:32',
|
|
|
|
+ val4: '4:32',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '初八/廿三',
|
|
|
|
+ val1: '11:20',
|
|
|
|
+ val2: '17:20',
|
|
|
|
+ val3: '23:20',
|
|
|
|
+ val4: '5:20',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '初九/廿四',
|
|
|
|
+ val1: '12:08',
|
|
|
|
+ val2: '18:08',
|
|
|
|
+ val3: '0:08',
|
|
|
|
+ val4: '6:08',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '初十/廿五',
|
|
|
|
+ val1: '12:56',
|
|
|
|
+ val2: '18:56',
|
|
|
|
+ val3: '0:56',
|
|
|
|
+ val4: '6:56',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '十一/廿六',
|
|
|
|
+ val1: '13:44',
|
|
|
|
+ val2: '19:44',
|
|
|
|
+ val3: '1:44',
|
|
|
|
+ val4: '7:44',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '十二/廿七',
|
|
|
|
+ val1: '14:32',
|
|
|
|
+ val2: '20:32',
|
|
|
|
+ val3: '2:32',
|
|
|
|
+ val4: '8:32',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '十三/廿八',
|
|
|
|
+ val1: '15:20',
|
|
|
|
+ val2: '21:20',
|
|
|
|
+ val3: '3:20',
|
|
|
|
+ val4: '9:20',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '十四/廿九',
|
|
|
|
+ val1: '16:08',
|
|
|
|
+ val2: '22:08',
|
|
|
|
+ val3: '4:08',
|
|
|
|
+ val4: '10:08',
|
|
|
|
+ check:false,
|
|
|
|
+ }, {
|
|
|
|
+ name: '十五/三十',
|
|
|
|
+ val1: '17:56',
|
|
|
|
+ val2: '23:56',
|
|
|
|
+ val3: '5:56',
|
|
|
|
+ val4: '10:56',
|
|
|
|
+ check:false,
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ day:''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad() {
|
|
|
|
+ this.getLunar()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ setRowColor(){
|
|
|
|
+ for(let i = 1;i<this.tableList.length;i++){
|
|
|
|
+ this.tableList[i].false
|
|
|
|
+ let _array = this.tableList[i].name.split("/")
|
|
|
|
+ if(this.day==_array[0]||this.day==_array[1]){
|
|
|
|
+ this.tableList[i+1].check = true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ getLunar(){
|
|
|
|
+ let that = this
|
|
|
|
+ var nyear;
|
|
|
|
+ var nmonth;
|
|
|
|
+ var nday = -1;
|
|
|
|
+ var nwday;
|
|
|
|
+ var nhrs;
|
|
|
|
+ var nmin;
|
|
|
|
+ var nsec;
|
|
|
|
+ var lmonth, lday, lleap; //农历参数
|
|
|
|
+ function Draw() {
|
|
|
|
+ NewTick();
|
|
|
|
+
|
|
|
|
+ //显示时间
|
|
|
|
+ var s = nyear + '年' + nmonth + '月' + nday + '日 ' + '星期' + cweekday(nwday) + ' ' + shapetime(nhrs, nmin, nsec);
|
|
|
|
+ s += " 农历" + lmonth + "月" + lday; //农历
|
|
|
|
+ that.day= lday;
|
|
|
|
+ //需要展示在页面地方
|
|
|
|
+ console.log("农历日期---",that.day);
|
|
|
|
+ that.setRowColor()
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ function NewTick() {
|
|
|
|
+ let noww = new Date();
|
|
|
|
+ if (noww.getDate() != nday) {
|
|
|
|
+ nyear = noww.getFullYear();
|
|
|
|
+ nmonth = noww.getMonth() + 1;
|
|
|
|
+ nwday = noww.getDay();
|
|
|
|
+ nday = noww.getDate();
|
|
|
|
+ getlunar(); //获取农历
|
|
|
|
+ }
|
|
|
|
+ nhrs = noww.getHours();
|
|
|
|
+ nmin = noww.getMinutes();
|
|
|
|
+ nsec = noww.getSeconds();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //辅助函数
|
|
|
|
+ var hzWeek = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日");
|
|
|
|
+ function cweekday(wday) {
|
|
|
|
+ console.log('星期---',hzWeek[wday]);
|
|
|
|
+ }
|
|
|
|
+ function shapetime(vhrs, vmin, vsec) {
|
|
|
|
+ if (vsec <= 9) vsec = "0" + vsec;
|
|
|
|
+ if (vmin <= 9) vmin = "0" + vmin;
|
|
|
|
+ if (vhrs <= 9) vhrs = "0" + vhrs;
|
|
|
|
+ // return vhrs + ":" + vmin + ":" + vsec
|
|
|
|
+ console.log("时间日期---",vhrs + ":" + vmin + ":" + vsec);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ //阴历函数开始
|
|
|
|
+ var lunarInfo = new Array(0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, //1990
|
|
|
|
+ 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63);
|
|
|
|
+ function lYearDays(y) {
|
|
|
|
+ var i, sum = 348;
|
|
|
|
+ for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
|
|
|
|
+ return (sum + leapDays(y));
|
|
|
|
+ }
|
|
|
|
+ function leapDays(y) {
|
|
|
|
+ if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
|
|
|
|
+ else return (0);
|
|
|
|
+ }
|
|
|
|
+ function leapMonth(y) {
|
|
|
|
+ return (lunarInfo[y - 1900] & 0xf);
|
|
|
|
+ }
|
|
|
|
+ function monthDays(y, m) {
|
|
|
|
+ return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
|
|
|
|
+ }
|
|
|
|
+ function Lunar(y, m, d) {
|
|
|
|
+ var i, leap = 0,
|
|
|
|
+ temp = 0;
|
|
|
|
+ var offset = (Date.UTC(y, m, d) - Date.UTC(1900, 0, 31)) / 86400000;
|
|
|
|
+ for (i = 1900; i < 2050 && offset > 0; i++) {
|
|
|
|
+ temp = lYearDays(i);
|
|
|
|
+ offset -= temp;
|
|
|
|
+ }
|
|
|
|
+ if (offset < 0) {
|
|
|
|
+ offset += temp;
|
|
|
|
+ i--;
|
|
|
|
+ }
|
|
|
|
+ this.year = i;
|
|
|
|
+ leap = leapMonth(i);
|
|
|
|
+ this.isLeap = false;
|
|
|
|
+ for (i = 1; i < 13 && offset > 0; i++) {
|
|
|
|
+ if (leap > 0 && i == (leap + 1) && this.isLeap == false) {--i;
|
|
|
|
+ this.isLeap = true;
|
|
|
|
+ temp = leapDays(this.year);
|
|
|
|
+ } else {
|
|
|
|
+ temp = monthDays(this.year, i);
|
|
|
|
+ }
|
|
|
|
+ if (this.isLeap == true && i == (leap + 1)) this.isLeap = false;
|
|
|
|
+ offset -= temp;
|
|
|
|
+ }
|
|
|
|
+ if (offset == 0 && leap > 0 && i == leap + 1) if (this.isLeap) {
|
|
|
|
+ this.isLeap = false;
|
|
|
|
+ } else {
|
|
|
|
+ this.isLeap = true; --i;
|
|
|
|
+ }
|
|
|
|
+ if (offset < 0) {
|
|
|
|
+ offset += temp; --i;
|
|
|
|
+ }
|
|
|
|
+ this.month = i;
|
|
|
|
+ this.day = offset + 1;
|
|
|
|
+ }
|
|
|
|
+ var nStr1 = new Array('', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二');
|
|
|
|
+ var nStr2 = new Array('初', '十', '廿', '卅', '□');
|
|
|
|
+ function GetcDay(d) {
|
|
|
|
+ var s;
|
|
|
|
+ switch (d) {
|
|
|
|
+ case 10:
|
|
|
|
+ s = '初十';
|
|
|
|
+ break;
|
|
|
|
+ case 20:
|
|
|
|
+ s = '二十';
|
|
|
|
+ break;
|
|
|
|
+ case 30:
|
|
|
|
+ s = '三十';
|
|
|
|
+ break;
|
|
|
|
+ default:
|
|
|
|
+ s = nStr2[Math.floor(d / 10)];
|
|
|
|
+ s += nStr1[d % 10];
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ return (s);
|
|
|
|
+ }
|
|
|
|
+ function GetcMon(m) {
|
|
|
|
+ if (m == 1) return '正';
|
|
|
|
+ else return nStr1[m];
|
|
|
|
+ }
|
|
|
|
+ function getlunar() {
|
|
|
|
+ var lObj = new Lunar(nyear, nmonth - 1, nday);
|
|
|
|
+ lmonth = GetcMon(lObj.month);
|
|
|
|
+ lday = GetcDay(lObj.day);
|
|
|
|
+ lleap = lObj.isLeap;
|
|
|
|
+ if (lleap == 1) {
|
|
|
|
+ lmonth = "闰" + lmonth;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ //阴历函数结束
|
|
|
|
+ Draw();
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+ .content {
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .table {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 170rpx;
|
|
|
|
+ padding: 20rpx 0;
|
|
|
|
+ width: 90%;
|
|
|
|
+ right: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ margin: auto;
|
|
|
|
+
|
|
|
|
+ .row {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .col1 {
|
|
|
|
+ width: 40%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+ .col{
|
|
|
|
+ width: 20%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .row:nth-of-type(2n){
|
|
|
|
+ background: rgba(255, 255, 255, 0.6);
|
|
|
|
+ padding: 6rpx 0;
|
|
|
|
+ }
|
|
|
|
+ .row:nth-of-type(2n+1){
|
|
|
|
+ background: rgba(214, 214, 214, 0.7);
|
|
|
|
+ padding: 6rpx 0;
|
|
|
|
+ }
|
|
|
|
+ .row:nth-of-type(1){
|
|
|
|
+ padding: 18rpx 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .row-active{
|
|
|
|
+ background: #92b8f1!important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|