JavasSript实现秒转换为“天时分秒”控件和TDD测试方法应用
背景
时间累计值，在顶层一般以秒为计算单位， 所以到页面上如果直接显示xx秒， 如果秒的值很大， 则用户得不到直观的感受， 到底有多长时间，
在日长生活中， 人们以天 时 分 秒为单位来记录时间累计值， 这样更容易为人们接受， 提高易用性。
本文就为了解决这个问题， 在页面控件 和 累计值秒 之间建立转换， 提供显示和配置。
设计思路
将秒转换为 天 时 分 秒 控件， 此处控件为下拉框， 从右到左， 分为四级， 每一级的单位权值递减，
天 的可选值 为 0 - +无穷， 1天=86400秒
时 的可选值 为 0 - 23， 1时=3600秒
分 的可选值为 0-59， 1分=60秒
秒 的可选值为 0-59
时间控件支持的范围 range=[x, y], y>=x>=0
但是，需要注意当上一级单位下拉框选择为边界值时候， 则下一级下拉框中， 可选项可能不能填满， 例如
range = [0, 60], 分可选值为 0-1， 当分选择为 0时候， 秒可选值为 0-59， 当分选择为1时候， 秒可选值为0
同时对于最大值达不到的 单位控件， 则需要隐藏。
时间控件 静态包括 天 时 分 秒 四个子控件（四个下拉框），
控件加载时候， 根据range初始化时间控件， 此时该最大值达不到的单位控件需要隐藏掉， 各个子控件填充可选内容， 此过程记录为 InitTime
下一级控件需要根据上一级控件的当前值， 来填充可选值， 此功能实现需要在上一级的控件的 change事件中实现， 并且按照级别递归触发change。
开发过程
写完初始化函数， 和天 时 分 的change事件，
书写TDD相关的测试代码， 将各个用例写入测试代码， 则拉起一个测试网， 调试过程中， 此网可以一步一步添加，
在添加过程中， 遇到问题， 可会修改时间控件代码， 修改完毕后， 则添加下一个用例，
直到添加调试完所有你认可的测试用例。
这样开发后的控件， 经过足够多的用例检验， 质量可以保证。
而且为以后的维护打下基础， 如果后期需要微调此控件， 则微调后， 通过微调自己的TDD代码， 并且也需要通过本次开发的测试用例代码， 保证质量的继承性。
效果
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Second2DHMS</title> <script src="jquery.js" type="text/javascript"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body> <div id="TimeScalar"> </div> <script> console.log = console.log || {} /******************************************************************************* Description: Changes: *******************************************************************************/ function Second2DHMS(num) { var s = num%60; num=parseInt(num/60); var m = num%60; num = parseInt(num/60); var h = num%24; num = parseInt(num/24); var d = num; //console.log(d+'天'+h+'时'+m+'分'+s+'秒') return { day: d, hour: h, minute: m, second: s } } function FillSelectOption(controlId, min, max) { $("#"+controlId).empty(); //缓存提速 var domCache = []; for (var i = min; i <= max; i++) { domCache.push("<option title='" +i+ "' value='" +i+ "'>"+i+"</option>"); } $("#"+controlId).append(domCache.join()); } /* 天控件 值选中后，改变时控件可选值 */ $("#TimeScalar").on("change", "#Day", function(event){ var day = $(this).val(); var maxDay = Math.floor(range.max / 86400); var maxDayRemain = range.max % 86400; var maxHour = Math.floor(maxDayRemain / 3600); var minDay = Math.floor(range.min / 86400); var minDayRemain = range.min % 86400; var minHour = Math.floor(minDayRemain / 3600); /* 天值 最大和最小 都是一个值 例如 {min:4294967294, max:4294967295} 49710天6时28分15秒 49710天6时28分14秒 */ if ( minDay == maxDay ) { FillSelectOption("Hour", minHour, maxHour); $(this).data("cursor", "MinMax"); } /* 天值 在 最大 和 最小 之间 */ else if ( day > minDay && day < maxDay ) { FillSelectOption("Hour", 0, 23); $(this).data("cursor", "Middle"); } /* 天值 为最大 */ else if ( day == maxDay ) { FillSelectOption("Hour", 0, maxHour); $(this).data("cursor", "Max"); } /* 天值 为最小 */ else if ( day == minDay ) { FillSelectOption("Hour", minHour, 23); $(this).data("cursor", "Min"); } else { } /* 更新分控件可选值， 一旦选择了最大值，这些控件范围有可能是部分可选项， 如果天选择不为最大值，则这些控件需要包括全部可选项。*/ $("#Hour").change(); event.stopPropagation(); }); /* 时控件 值选中后，改变分控件可选值 */ $("#TimeScalar").on("change", "#Hour", function(event){ var hour = $(this).val(); var maxDayRemain = range.max % 86400; var maxHour = Math.floor(maxDayRemain / 3600); var maxHourRemain = range.max % 3600; var maxMinute = Math.floor(maxHourRemain / 60); var minDayRemain = range.min % 86400; var minHour = Math.floor(minDayRemain / 3600); var minHourRemain = range.min % 3600; var minMinute = Math.floor(minHourRemain / 60); /* 时值 最大和最小 都是一个值 例如 {min:4294967294, max:4294967295} 49710天6时28分15秒 49710天6时28分14秒 */ if ( $("#Day").data("cursor") == "MinMax" && minHour == maxHour ) { FillSelectOption("Minute", minMinute, maxMinute); $(this).data("cursor", "MinMax"); } else if ( ($("#Day").data("cursor") == "Max" || $("#Day").data("cursor") == "MinMax" ) && hour == maxHour ) { FillSelectOption("Minute", 0, maxMinute); $(this).data("cursor", "Max"); } else if ( ($("#Day").data("cursor") == "Min" || $("#Day").data("cursor") == "MinMax" ) && hour == minHour ) { FillSelectOption("Minute", minMinute, 59); $(this).data("cursor", "Min"); } else { FillSelectOption("Minute", 0, 59); $(this).data("cursor", "Middle"); } /* 更新秒控件可选值， 一旦选择了最大值，这些控件范围有可能是部分可选项， 如果天选择不为最大值，则这些控件需要包括全部可选项。*/ $("#Minute").change(); event.stopPropagation(); }); /* 分控件 值选中后，改变秒控件可选值 */ $("#TimeScalar").on("change", "#Minute", function(event){ var minute = $(this).val(); var maxHourRemain = range.max % 3600; var maxMinute = Math.floor(maxHourRemain / 60); var maxMinuteRemain = range.max % 60; var maxSecond = Math.floor(maxMinuteRemain / 1); var minHourRemain = range.min % 3600; var minMinute = Math.floor(minHourRemain / 60); var minMinuteRemain = range.min % 60; var minSecond = Math.floor(minMinuteRemain / 1); /* 分值 最大和最小 都是一个值 例如 {min:4294967294, max:4294967295} 49710天6时28分15秒 49710天6时28分14秒 */ if ( $("#Day").data("cursor") == "MinMax" && $("#Hour").data("cursor") == "MinMax" && minMinute == maxMinute ) { FillSelectOption("Second", minSecond, maxSecond); } else if ( ($("#Day").data("cursor") == "Max" || $("#Day").data("cursor") == "MinMax" ) && ( $("#Hour").data("cursor") == "Max" || $("#Hour").data("cursor") == "MinMax" ) && minute == maxMinute ) { FillSelectOption("Second", 0, maxSecond); } else if ( ($("#Day").data("cursor") == "Min" || $("#Day").data("cursor") == "MinMax" ) && ( $("#Hour").data("cursor") == "Min" || $("#Hour").data("cursor") == "MinMax" ) && minute == minMinute ) { FillSelectOption("Second", minSecond, 59); } else { FillSelectOption("Second", 0, 59); } event.stopPropagation(); }); function InitTimeScalar(range) { // console.log('--------------- init time ['+range.min+''+range.max+'] -------'); // Second2DHMS(range.min) // Second2DHMS(range.max) /* 控件初始化 */ $("#TimeScalar").empty(); $("#TimeScalar").append('\ <select id="Day"></select><label for="Day">天</label>\ <select id="Hour"></select><label for="Hour">时</label>\ <select id="Minute"></select><label for="Minute">分</label>\ <select id="Second"></select><label for="Second">秒</label>'); var minDay = Math.floor(range.min / 86400); var maxDay = Math.floor(range.max / 86400); /* 填充天控件可选项 */ FillSelectOption("Day", minDay, maxDay); /* 触发天控件change，初始化填充时分秒控件可选项 */ $("#Day").change(); /* 如果最大单位未达到，则隐藏掉对应控件 */ var maxDay = Math.floor(range.max / 86400); if ( maxDay == 0 ) { $("#Day").hide(); $("label[for='Day']").hide(); var maxHour = Math.floor(range.max / 3600); if ( maxHour == 0 ) { $("#Hour").hide(); $("label[for='Hour']").hide(); var maxMinute = Math.floor(range.max / 60); if ( maxMinute == 0 ) { $("#Minute").hide(); $("label[for='Minute']").hide(); } } } } function SetTimeControlValue(second) { var dhmsJson = Second2DHMS(second); $("#Day").val(dhmsJson.day); $("#Day").change(); $("#Hour").val(dhmsJson.hour); $("#Hour").change(); $("#Minute").val(dhmsJson.minute); $("#Minute").change(); $("#Second").val(dhmsJson.second); } function GetTimeControlValue() { var d = $("#Day").val(); var h = $("#Hour").val(); var m = $("#Minute").val(); var s = $("#Second").val(); var totolSec = d * 86400 + h * 3600 + m * 60 + s * 1; return totolSec; } /******************************************************************************* Description: 测试用例 Changes: *******************************************************************************/ /* 考虑使用jsunit 整个控件考虑使用模块化思想 */ function TestSetGet(second, bResult) { //console.log("----- test set time value("+second+") --------" ); SetTimeControlValue(second); var realSec = GetTimeControlValue(); var bRealResult = ( realSec == second ); if ( bResult != bRealResult ) { console.warn("!!!! second("+second+") test failed! realSec="+realSec); } else { console.log("second("+second+") test success!"); } } /* 一般范围测试： 1、页面载入，没有后台赋值， 查看各个控件可选范围： 天 0-49710 时 0-23 分 0-59 秒 0-59 2、MAX测试： a. 选择天为 49710， 查看时选择范围为 0-6 b. 选择时为 6， 查看分选择范围为 0-28 c. 选择分为 28， 查看秒选择范围为 0-15, 选择秒15 OK d. 再次切换分为 27， 查看秒 可选范围 为 0-59 e. 再次切换时为 5， 查看分 可选值为 0-59 f. 再次切换天为 49709，查看时 可选值为 0-23 49710天6时28分15秒 */ var range = {min:0, max:4294967295} InitTimeScalar(range); TestSetGet(4294967295, true); TestSetGet(4294967296, false); TestSetGet(100, true); TestSetGet(0, true); TestSetGet(-1, false); /* range相差1s测试 范围为 {min:4294967294, max:4294967295} 49710天6时28分15秒 49710天6时28分14秒 查看各个控件可选值 天 - 49710 时 - 6 分 - 28 秒 - 14-15 */ var range = {min:4294967294, max:4294967295} InitTimeScalar(range); TestSetGet(4294967295, true); TestSetGet(4294967296, false); TestSetGet(4294967294, true); TestSetGet(4294967293, false); /* range相差1分钟测试 范围 {min:4294967235, max:4294967295} 49710天6时28分15秒 49710天6时27分15秒 查看各个控件可选值 天 - 49710 时 - 6 分 - 27-28 秒 - 15-59 选择分为 27 秒 - 0-15 选择分为 28 */ var range = {min:4294967235, max:4294967295} InitTimeScalar(range); TestSetGet(4294967295, true); TestSetGet(4294967296, false); TestSetGet(4294967235, true); TestSetGet(4294967234, false); /* range相差1小时测试 范围 {min:4294963695, max:4294967295} 49710天6时28分15秒 49710天5时28分15秒 查看各个控件可选值 天 - 49710 时 - 5-6 分 - 28-59 选择时为 5 分 - 0-28 选择时为 6 秒 - 15-59 选择分为 28，时为5 秒 - 0-59 选择分为 29，时为5 秒 - 0-15 选择分为 28， 时为6 秒 - 0-59 选择分为 27， 时为6 */ var range = {min:4294963695, max:4294967295} InitTimeScalar(range); TestSetGet(4294967295, true); TestSetGet(4294967296, false); TestSetGet(4294963695, true); TestSetGet(4294963694, false); /* range相差1天测试 范围 {min:4294880895, max:4294967295} 49710天6时28分15秒 49709天6时28分15秒 查看各个控件可选值 天 - 49709-49710 时 - 6-23 选择天为49709 时 - 0-6 选择天为49710 选择天为49709，时为7， 查看分秒范围都为 0-59 选择天为49710，时为5， 查看分秒范围都为 0-59 */ var range = {min:4294880895, max:4294967295} InitTimeScalar(range); TestSetGet(4294967295, true); TestSetGet(4294967296, false); TestSetGet(4294880895, true); TestSetGet(4294880894, false); /* range最大值为1天测试，查看最大和最小值如下可选 1天0时0分0秒 0天0时0分0秒 */ var range = {min:0, max:86400} InitTimeScalar(range); TestSetGet(86400, true); TestSetGet(86401, false); TestSetGet(0, true); TestSetGet(-1, false); /* range最大值不足1天测试 天控件未显示，时分秒最大最小值可选如下 0天23时59分59秒 0天0时0分0秒 */ var range = {min:0, max:86399} InitTimeScalar(range); TestSetGet(86399, true); TestSetGet(86400, false); TestSetGet(0, true); TestSetGet(-1, false); /* range最大值为1小时 时分秒最大最小值可选如下 0天1时0分0秒 0天0时0分0秒 */ var range = {min:0, max:3600} InitTimeScalar(range); TestSetGet(3600, true); TestSetGet(3601, false); TestSetGet(0, true); TestSetGet(-1, false); /* range最大值为 3599 时分秒最大最小值可选如下 0天0时59分59秒 0天0时0分0秒 */ var range = {min:0, max:3599} InitTimeScalar(range); TestSetGet(3599, true); TestSetGet(3600, false); TestSetGet(0, true); TestSetGet(-1, false); /* range最大值 1分钟 0天0时1分0秒 0天0时0分0秒 */ var range = {min:0, max:60} InitTimeScalar(range); TestSetGet(60, true); TestSetGet(61, false); TestSetGet(0, true); TestSetGet(-1, false); /* range最大值 59 0天0时0分59秒 0天0时0分0秒 */ var range = {min:0, max:59} InitTimeScalar(range); TestSetGet(59, true); TestSetGet(60, false); TestSetGet(0, true); TestSetGet(-1, false); TestSetGet(59, true); </script> </body> </html>
在火狐上运行后， 控制台上打印如下：
引申
TDD属于单元测试范畴， 除了自己写TDD测试函数， 也可以借助测试框架 XUnit
js有对应的 JSUnit
1、 JsUnit 官网 http://www.jsunit.net/
github上项目（若干年前， 已经不再维护， 替换品为 Jasmine）
https://github.com/pivotal/jsunit
使用方法介绍：
http://www.cnblogs.com/youcai/archive/2012/02/10/2345689.html
与其比较： JsUnit适合较大测试对象， 测试结果比较直观， 本控件规模小， 就不用此工具了。
此工具， 对于本文对象， 测试用例， 需要针对每种测试range， 单独开一个html， 然后组成一个 suite， 比较麻烦。
2、 https://github.com/jasmine/jasmine
Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it's suited for websites, Node.js projects, or anywhere that JavaScript can run.
日后研究。
3、 QUnit 基于JQuery的测试框架：
http://qunitjs.com/
对于本文若干测试range， 可以容纳与一个js文件中执行， 可以后续尝试。
QUnit.test( "hello test", function( assert ) {assert.ok( 1 == "1", "Passed!" );});