Flex 日期计算用法举例

本文详细介绍了在Flex项目中进行日期时间计算的方法,包括计算一个月的最后一天、当前天和当前月的当前天、两时间差值、时间相加及对日期加1天的操作。通过实例代码演示了如何实现这些功能。

最近flex项目中用到了关于日期时间的计算,也从网上找了些资料。自己整理了一下,方便以后查询
1.计算一个月的最后一天:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			  xmlns:s="library://ns.adobe.com/flex/spark"
			  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			  initialize="application1_initializeHandler(event)"
			  >
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			import mx.states.SetStyle;
			
			private function computeFinalDay():void{
				var nowDate:Date = new Date();
				var nowyear:String = nowDate.getFullYear().toString();
				var nowmonth:String = (nowDate.getMonth()+1).toString().length == 1?"0"+(nowDate.getMonth()+1).toString():(nowDate.getMonth()+1).toString();
				
				var lastdaysOfMonth:String = daysOfMonth(nowyear+nowmonth); 
				Alert.show("当月最后一天"+lastdaysOfMonth);
			}
			
		public	function daysOfMonth(Month:String):String{ 
				var currentMonth:Date = new Date(Month.substring(0,4), Month.substring(4,6), 1); 
				var lastMonth:Date = new Date(Month.substring(0,4), String(Number(Month.substring(4,6))-1), 1); 
				var diffDays:Number = currentMonth.valueOf() - lastMonth.valueOf();  
				return currentMonth.getMonth()+"-"+(diffDays/( 24 * 60 * 60 * 1000)); 
			} 


			/**
			 * 初始化函数
			 * 作者:
			 * 日期:
			 * **/
			protected function application1_initializeHandler(event:FlexEvent):void
			{
				computeFinalDay();
			}


		]]>
	</fx:Script>
	
</s:Application>

2.计算当前天和当前月的当前天。
	                       
//计算当前日期的前一天
var _date:Date = new Date();
_date.setDate(_date.getDate()-1);



//计算当前月的第一天
var eyear:int = _date.getFullYear();
var emonth:int = _date.getMonth();
var eday:int = 1 ;

select_date.selectedDate = new Date(eyear, emonth, eday);
selectTo_date.selectedDate = _date;


3.计算两时间的差值
var date1:Date ;

var date2:Date;

var num1:Number =date1.valueOf();

var num2:Number =date2.valueOf();

var different:Number = num2-num1;


var diffDay:int = int(diff/24/60/60/1000);//方法1

var d1Days : int = int(num1/ 24 / 60 / 60 / 1000);
var d2Days : int = int(num2/ 24 / 60 / 60 / 1000); 

说明:日期类型 Date 的方法 valueOf 返回指定日期自 1970年1月1日凌晨开始的间隔毫秒数,然后每天的毫秒数是:24*60*60*1000,然后再计算相差的天数
方法一:计算两个日期之间间隔的毫秒数,再运算得到间隔天数
方法二:计算两个日期基于基准日期的天数,再计算差值

4.时间相加

以下是时间相加的公共方法,参数分别为:datepart代表添加的时间类型(可以为年、月、天等等),number代表添加的时间类型的具体值,代表从那天开始添加。例如:
dateAdd("month",5,new Date())就表示在当前时间基础上添加5个月。

private function dateAdd(datepart:String="", number:Number=0, date:Date=null):Date
    {
     if (date == null)
     {
      date=new Date();
     }

     var returnDate:Date=new Date(date.time);
     switch (datepart.toLowerCase())
     {
      case "fullyear":
      case "month":
      case "date":
      case "hours":
      case "minutes":
      case "seconds":
      case "milliseconds":
       returnDate[datepart]+=number;
       break;
      default:
       break;
     }
     var newdate:Date=new Date(returnDate.getFullYear(), returnDate.getMonth(), returnDate.date - 1);
     return newdate;
    }

5.对日期加1天。
           //给定的日期上加一天
            private function addOneDay(day:int, mydate:Date):Date
            {
                var returnDate:Date = new Date(mydate.time);
                returnDate['date'] += day //day就是你要加的天数,如果是加1天则为1,如果是减天则为-1
                return returnDate;   
            } 


参考地址: www.xiebinghu.iteye.com/blog/569355
(完,待续....................................................)

<template> <div class="content" :class="isDark ? 'is-dark' : ''"> <div class="total-info"> <span class="name" :title="titleText">{{ titleText }}</span> <span class="count"> {{ consumablesInfo.totalNum !== null ? consumablesInfo.totalNum : '--' }} </span> <span class="contrasts"> <img v-if="consumablesInfo.totalNumChange < 0" :src="arrowBottom" alt="" /> <img v-else :src="arrowTop" alt="" /> {{ consumablesInfo.totalNumChange !== null ? consumablesInfo.totalNumChange : '--' }} </span> </div> <!-- 引导线开始 --> <div class="out-line"></div> <div class="out-line2"></div> <div class="out-line3"></div> <div class="out-line4"></div> <div class="out-line5"></div> <div class="out-line6"></div> <div class="out-line7"></div> <div class="out-line8"></div> <div class="out-line10"></div> <!-- 引导线结束 --> <div class="online-info"> <div class="online-servers"> <span class="label" :title="$t('在线资产数')"> <span class="icon"></span> {{ $t('在线资产数') }} </span> <span class="num"> {{ consumablesInfo.onlineNum !== null ? consumablesInfo.onlineNum : '--' }} </span> </div> <div class="online-asset"> <span class="label" :title="$t('资产在线率')">{{ $t('资产在线率') }}</span> <span class="num"> {{ consumablesInfo.onlineRate !== null ? (consumablesInfo.onlineRate * 100).toFixed(2) : '--' }} <span v-if="consumablesInfo.onlineRate !== null">%</span> </span> </div> </div> <div class="offline-info"> <div class="offline-servers"> <span class="label" :title="$t('非在线资产数')"> <span class="icon"></span> {{ $t('非在线资产数') }} </span> <span class="num"> {{ consumablesInfo.totalNum !== null ? consumablesInfo.totalNum - consumablesInfo.onlineNum : '--' }} </span> <span class="contrasts"> <img v-if="consumablesInfo.offlineAssetCntAdd < 0" :src="arrowBottom" alt="" /> <img v-else :src="arrowTop" alt="" /> {{ consumablesInfo.offlineAssetCntAdd !== null ? Math.abs(consumablesInfo.offlineAssetCntAdd) : '--' }} </span> </div> <div class="offline-asset"> <span class="label" :title="$t('资产非在线率')">{{ $t('资产非在线率') }}</span> <span class="num"> {{ consumablesInfo.onlineRate !== null ? ((1 - consumablesInfo.onlineRate) * 100).toFixed(2) : '--' }} <span v-if="consumablesInfo.onlineRate !== null">%</span> </span> <span class="contrasts"> <img v-if="consumablesInfo.offlineAssetRateAdd < 0" :src="arrowBottom" alt="" /> <img v-else :src="arrowTop" alt="" /> {{ consumablesInfo.offlineAssetRateAdd !== null ? Math.abs(consumablesInfo.offlineAssetRateAdd) : '--' }} <span v-if="consumablesInfo.offlineAssetRateAdd !== null">%</span> </span> </div> </div> <div class="status-info"> <div class="legend"> <div> <span class="icon icon1"></span> {{ $t('历史') }} </div> <div> <span class="icon icon2"></span> {{ $t('本月新增') }} </div> <div> <span class="icon icon3"></span> {{ $t('本月流出') }} </div> </div> <div class="list-info"> <div v-for="(item, index) in statusList" :key="index" class="list" :class="item.nameEn"> <div class="top"> <div class="left"> <div class="name" :title="$t(item.name)" :class="{ 'is-link': item.nameEn === 'invigorating' }" @click="handleClick(item)" > {{ $t(item.name) }} </div> </div> <div class="right"> <div class="count"> <span class="his-count" :style="getHisWidth(item)"></span> <span v-if="consumablesInfo[item.netWorth] > 0" class="cur-add" :style="getAddWidth(item)" ></span> <span v-else class="outflow" :style="getOutWidth(item)"></span> <span class="num"> {{ consumablesInfo[item.netWorth] > 0 ? '+' : '' }} {{ consumablesInfo[item.netWorth] !== null ? consumablesInfo[item.netWorth] : '--' }} </span> </div> <div class="bottom"> <span class="total-count"> {{ $t('总量') }}: {{ consumablesInfo[item.total] !== null ? consumablesInfo[item.total] : '--' }} </span> <span class="his"> {{ $t('历史') }}: {{ consumablesInfo[item.total] !== null && consumablesInfo[item.netWorth] !== null ? Math.max(0, consumablesInfo[item.total] - consumablesInfo[item.netWorth]) : '--' }} </span> <span class="net-worth" :title="$t('本月净值')"> {{ $t('本月净值') }}: <i :style="{ color: consumablesInfo[item.netWorth] < 0 ? '#50d4ab' : '' }"> {{ consumablesInfo[item.netWorth] !== null ? consumablesInfo[item.netWorth] : '--' }} </i> </span> </div> </div> </div> </div> </div> </div> </div> </template> <script setup lang="ts"> import { computed, defineEmits, onMounted, ref, watch } from 'vue'; import { useI18n } from 'vue-i18n'; import { useStore } from 'vuex'; import arrowTop from '@/assets/images/01.png'; import arrowBottom from '@/assets/images/02.png'; import { getConsumablesInfoAPI } from '@/apis/dcPlanned.js'; import { ElMessage } from 'element-plus'; import { useMapLevelDataManager } from '@/application/core/infra-layout/composables/useMapLevelDataManager'; import { usePropertyMetricsManager } from '@/application/core/infra-layout/composables/usePropertyMetricsManager'; const propertyMetricsManager = usePropertyMetricsManager(); const mapLevelDataManager = useMapLevelDataManager(); const { mapLevelCode } = mapLevelDataManager; const { t } = useI18n(); interface StatusItem { name: string; nameEn: string; total: keyof consumablesInfoVO; netWorth: keyof consumablesInfoVO; } interface consumablesInfoVO { onlineRate: number | null; onlineRateChange: number | null; totalNum: number | null; totalNumChange: number | null; onlineNum: number | null; onlineNumChange: number | null; vitalizeNum: number | null; vitalizeNumChange: number | null; transmitNum: number | null; transmitNumChange: number | null; constructingNum: number | null; constructingNumChange: number | null; exitNum: number | null; exitNumChange: number | null; [key: string]: number | null; // 动态访问兼容 } const props = defineProps<{ isDark: boolean; activeName: { type: string; default: 'opticalModules'; }; }>(); const store = useStore(); const maxCount = ref(0); const consumablesInfo = ref<Partial<consumablesInfoVO>>({}); const titleText = computed(() => { return props.activeName === 'cables' ? t('线缆数量') : t('低端光模块数量'); }); const statusList = ref<StatusItem[]>([ { name: '在途', nameEn: 'inTransit', total: 'transmitNum', netWorth: 'transmitNumChange', }, { name: '在建', nameEn: 'underConstruction', total: 'constructingNum', netWorth: 'constructingNumChange', }, { name: '盘活中', nameEn: 'invigorating', total: 'vitalizeNum', netWorth: 'vitalizeNumChange', }, { name: '退出', nameEn: 'withdrawal', total: 'exitNum', netWorth: 'exitNumChange', }, ]); // 获取概览信息 const getConsumablesInfo = () => { const params = { type: props.activeName === 'opticalModules' ? 'optical' : 'cables', date: propertyMetricsManager.timeValue, area: mapLevelCode.areaCode ? mapLevelCode.areaCode : '', city: mapLevelCode.cityCode ? mapLevelCode.cityCode : '', }; getConsumablesInfoAPI(params) .then(res => { if (res.success) { if (res.data && Object.keys(res.data).length > 0) { consumablesInfo.value = res.data; gemaxData(); } } else { ElMessage.warning('暂无数据'); } }) .catch((err: Error) => { ElMessage.error(err.message); }); }; // 计算最大值用于条形图比例 const gemaxData = () => { const arr: number[] = []; statusList.value.forEach(item => { const total = consumablesInfo.value[item.total]; const netWorth = consumablesInfo.value[item.netWorth]; if (total !== null && netWorth !== null) { const historyCount = total - netWorth; arr.push(Math.abs(historyCount)); } }); maxCount.value = Math.max(...arr, 1); // 至少为1避免除以0 }; // 条形图宽度计算 const getHisWidth = (item: StatusItem) => { const total = consumablesInfo.value[item.total]; const netWorth = consumablesInfo.value[item.netWorth]; if (total === null || netWorth === null) { return { width: '0%' }; } const historyCount = total - netWorth; const value = Math.abs(historyCount); return { width: `${((value / maxCount.value) * 100).toFixed(2)}%` }; }; const getAddWidth = (item: StatusItem) => { const value = Math.abs(Number(consumablesInfo.value[item.netWorth] ?? 0)); return { width: `${((value / maxCount.value) * 100).toFixed(2)}%` }; }; const getOutWidth = (item: StatusItem) => { const value = Math.abs(Number(consumablesInfo.value[item.netWorth] ?? 0)); return { width: `${((value / maxCount.value) * 100).toFixed(2)}%` }; }; const emits = defineEmits(['detail-show']); // 处理点击“盘活中” const handleClick = (item: StatusItem) => { if (item.nameEn === 'invigorating') { emits('detail-show', true); } }; onMounted(() => { getConsumablesInfo(); }); watch( [ () => mapLevelCode.areaCode, () => mapLevelCode.cityCode, () => propertyMetricsManager.timeValue, () => props.activeName, ], () => getConsumablesInfo(), { deep: true, } ); </script> <style lang="less" scoped> @lineImg: '@/assets/images/line-move.png'; :deep(.el-overlay-dialog) { .el-dialog.is-dark { .el-dialog__header { margin-right: 0 !important; } .search-box { .label { color: #fff; } .el-select { .select-trigger { .el-input__wrapper { background-color: #282b33; color: #dfe1e6; } } } .el-input { .el-input__wrapper { background-color: #282b33; .el-input__inner { color: #dfe1e6; } } } } .el-popper.el-select__popper { background-color: #282b33; } .el-dialog__header, .el-dialog__body { background: #12151f; } .el-dialog__title { color: #fff; } .dialog-box { .label { color: #fff; } } .el-table.is-dark { .el-table__inner-wrapper { border-right: 1px solid #fff; .el-table__header-wrapper { .el-table__header { th { background: #3e4148; color: #dfe1e6; } } } } :deep(.el-scrollbar) { .el-table__empty-block { background: #33363d; } } .el-table__body-wrapper { .el-table__body tr:hover > td.el-table__cell { background-color: #2e3445 !important; } .el-table__body { tr { background: #33363d; .cell { color: #dfe1e6; } } } } } } } .el-overlay-dialog { :deep(.el-dialog) { .el-dialog__header { margin-right: 0; } } } .content.is-dark { background: #282b33; .left-content { .bg-box { background: #2e3445 !important; border-bottom: 1px solid #505050; color: #fff; &.is-active { background: #5e7ce0 !important; filter: none !important; } } } .middle-content { .type, .num { color: #fff; } } .total-info { background: #445266; .name, .contrasts { color: #dfd8c4; } .count { color: #fff; } } .online-info, .offline-info { background: #3c4551; .num { color: #fff; } .label { color: #adb0b8; } } .status-info { background: #2f343d; border-radius: 3px; } } .content { font-size: 14px; background: #fff; padding: 20px; position: relative; margin-bottom: 50px; border-radius: 8px; .label { max-width: 100px; overflow: hidden; text-overflow: ellipsis; display: inline-block; white-space: nowrap; } .name { max-width: 60px; overflow: hidden; text-overflow: ellipsis; display: inline-block; white-space: nowrap; } .net-worth { max-width: 80px; overflow: hidden; text-overflow: ellipsis; display: inline-block; white-space: nowrap; } .out-line { background: url('@{lineImg}') left top no-repeat; transform: translate(-16px, 111px) rotate(90deg); width: 86px; height: 3px; position: absolute; top: -3px; left: -1px; } .out-line2 { background: url('@{lineImg}') left top; transform: translate(-16px, 111px) rotate(90deg); width: 242px; height: 3px; position: absolute; top: 35.5%; left: -10.2%; } .out-line3 { background: url('@{lineImg}') left top; width: 24px; height: 2px; position: absolute; top: 20.4%; left: 5.5%; } .out-line4 { background: url('@{lineImg}') left top; width: 24px; height: 2px; position: absolute; top: 32.3%; left: 5.5%; } .out-line5 { background: url('@{lineImg}') left top; width: 18px; height: 2px; position: absolute; top: 49.8%; left: 10.6%; } .out-line6 { background: url('@{lineImg}') left top; width: 18px; height: 2px; position: absolute; top: 61.6%; left: 10.6%; } .out-line7 { background: url('@{lineImg}') left top; width: 18px; height: 2px; position: absolute; top: 73.6%; left: 10.6%; } .out-line8 { background: url('@{lineImg}') left top; width: 18px; height: 2px; position: absolute; top: 85%; left: 10.6%; } .out-line10 { width: 1px; background: #adb0b8; height: 214px; position: absolute; top: 46%; left: 24.2%; } .total-info { background: linear-gradient(90deg, #e8f5ff, #e9effd); padding: 14px; margin-bottom: 10px; display: flex; align-items: center; .name { font-weight: bold; color: #252b3a; max-width: 120px; } .count { color: #5e7ce0; font-weight: bold; margin: 0 10px; } .contrasts { color: #575d6c; font-size: 10px; } } .online-info, .offline-info { background: #f6faff; padding: 14px; display: flex; width: 97%; margin-bottom: 12px; margin-left: 15px; > div { width: 50%; display: flex; align-items: center; } .num { font-weight: bold; color: #252b3a; margin: 0 10px; } .contrasts { font-size: 10px; color: #575d6c; } .icon { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; } .online-servers { .icon { background: linear-gradient(90deg, #92dd99, #6bc374); } } .offline-servers { .icon { background: linear-gradient(90deg, #afc5d3, #778e9e); } } } .status-info { margin-left: 30px; padding: 10px; background: #f6faff; .legend { display: flex; margin-bottom: 14px; color: #959aa8; margin-left: 15px; > div { margin-right: 20px; font-size: 10px; display: flex; align-items: center; .icon { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; &.icon1 { background: linear-gradient(90deg, #76c0ff, #69a0ff); } &.icon2 { background: linear-gradient(90deg, #d8c1ff, #c89eff); } &.icon3 { background: #f0f5ff; border: 1px dashed #69a0ff; box-sizing: border-box; } } } } } .list-info { margin-left: 15px; .list { margin-bottom: 14px; &.invigorating { cursor: pointer; } .top { display: flex; margin-bottom: 6px; width: 100%; .left { width: 70px; .name { margin-top: 5px; &.is-link { color: #5e7ce0; text-decoration: underline; } } .days { color: #959aa8; font-size: 10px; margin-top: 8px; } } .right { font-size: 12px; color: #959aa8; width: 100%; .count { color: #252b3a; font-weight: bold; display: flex; width: 100%; > span { display: inline-block; height: 24px; width: 100px; line-height: 24px; padding-left: 8px; } .his-count { background: linear-gradient(90deg, #76c0ff, #69a0ff); } .cur-add { background: linear-gradient(90deg, #d8c1ff, #c89eff); } .outflow { background: #f0f5ff; color: #252b3a; border: 1px dashed #69a0ff; box-sizing: border-box; border-left: 0; } } .bottom { margin-top: 5px; font-size: 10px; padding-left: 10px; display: flex; > span { flex: 1; } i { color: #de5076; } .total-count { display: inline-block; width: 40%; font-style: normal; } .net-worth { display: inline-block; width: 40%; } } } } } } } .tooltip-info { font-size: 12px !important; h3 { display: flex; font-size: 12px; justify-content: space-between; padding-bottom: 4px; } .list { p { display: flex; justify-content: space-between; line-height: 24px; color: #575d6c; } } .outflow { display: flex; justify-content: space-between; border-top: 1px solid #e4eaf3; padding: 10px 0; font-weight: bold; } } .dialog-body { .search-box { margin-bottom: 15px; .label { margin-right: 10px; } } .content { display: flex; min-height: 220px; margin-bottom: 0; .left-content { width: 160px; .list-box { margin-top: 15px; border: 1px solid #5e7ce0; background: #5e7ce01a; padding: 10px; } .list { .bg-box { background: #fff; height: 30px; padding: 0 10px; margin-top: 3px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; position: relative; .name { font-size: 12px; } .icon { font-family: fangsong; font-size: 12px; } &.is-active { width: 152px; height: 32px; color: #fff; background-color: rgb(92, 153, 251); filter: drop-shadow(rgba(179, 186, 210, 0.44) 0px 4px 2px); border-radius: 4.5px 0px 0px 4.5px; &::after { content: ''; position: absolute; top: 0; right: -32px; display: inline-block; width: 0; height: 0; border-width: 16.2px; border-style: solid; border-color: transparent transparent transparent rgb(92, 153, 251); } } } } } .middle-content { flex: 1; position: relative; .label-box { position: absolute; z-index: 1; width: 100%; right: 0; top: -10px; span { display: inline-block; font-size: 12px; &.type { position: absolute; top: 0; right: 27%; z-index: 1; } &.num { position: absolute; top: 0; right: 0; z-index: 1; } } } } } } </style> 当切换日期的时候,返回没有数据,但是视图却显示上一次的请求数据
最新发布
11-23
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值