背景

时间累计值，在顶层一般以秒为计算单位， 所以到页面上如果直接显示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代码， 并且也需要通过本次开发的测试用例代码， 保证质量的继承性。

效果

代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4.     <title>Second2DHMS</title>
  5.     <script src="jquery.js" type="text/javascript"></script>
  6.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  7. </head>
  8. <body>
  9.     <div id="TimeScalar">
  10.     </div>
  11.  
  12.     <script>
  13. console.log = console.log || {}
  14.  
  15. /*******************************************************************************
  16. Description:
  17. Changes:
  18. *******************************************************************************/
  19. function Second2DHMS(num)
  20. {
  21.     var s = num%60;
  22.     num=parseInt(num/60);
  23.     var m = num%60;
  24.     num = parseInt(num/60);
  25.     var h = num%24;
  26.     num = parseInt(num/24);
  27.     var d = num;
  28.     //console.log(d+'天'+h+'时'+m+'分'+s+'秒')
  29.  
  30.     return {
  31.         day: d,
  32.         hour: h,
  33.         minute: m,
  34.         second: s
  35.     }
  36. }
  37.  
  38. function FillSelectOption(controlId, min, max)
  39. {
  40.     $("#"+controlId).empty();
  41.     //缓存提速
  42.     var domCache = [];
  43.     for (var i = min; i <= max; i++)
  44.     {
  45.         domCache.push("<option title='" +i+ "' value='" +i+ "'>"+i+"</option>");
  46.     }
  47.     $("#"+controlId).append(domCache.join());
  48. }
  49.  
  50. /* 天控件 值选中后，改变时控件可选值 */
  51. $("#TimeScalar").on("change", "#Day", function(event){
  52.     var day = $(this).val();
  53.  
  54.     var maxDay = Math.floor(range.max / 86400);
  55.     var maxDayRemain = range.max % 86400;
  56.     var maxHour = Math.floor(maxDayRemain / 3600);
  57.     var minDay = Math.floor(range.min / 86400);
  58.     var minDayRemain = range.min % 86400;
  59.     var minHour = Math.floor(minDayRemain / 3600);
  60.     /* 天值 最大和最小 都是一个值
  61.         例如 {min:4294967294, max:4294967295}
  62.         49710天6时28分15秒
  63.         49710天6时28分14秒
  64.      */
  65.     if ( minDay == maxDay )
  66.     {
  67.         FillSelectOption("Hour", minHour, maxHour);
  68.         $(this).data("cursor", "MinMax");
  69.     }
  70.     /* 天值 在 最大 和 最小 之间 */
  71.     else if ( day > minDay && day < maxDay )
  72.     {
  73.         FillSelectOption("Hour", 0, 23);
  74.         $(this).data("cursor", "Middle");
  75.     }
  76.     /* 天值 为最大 */
  77.     else if ( day == maxDay )
  78.     {
  79.         FillSelectOption("Hour", 0, maxHour);
  80.         $(this).data("cursor", "Max");
  81.     }
  82.     /* 天值 为最小 */
  83.     else if ( day == minDay )
  84.     {
  85.         FillSelectOption("Hour", minHour, 23);
  86.         $(this).data("cursor", "Min");
  87.     }
  88.     else
  89.     {
  90.     }
  91.     /* 更新分控件可选值，
  92.         一旦选择了最大值，这些控件范围有可能是部分可选项，
  93.         如果天选择不为最大值，则这些控件需要包括全部可选项。*/
  94.     $("#Hour").change();
  95.  
  96.     event.stopPropagation();
  97. });
  98.  
  99. /* 时控件 值选中后，改变分控件可选值 */
  100. $("#TimeScalar").on("change", "#Hour", function(event){
  101.     var hour = $(this).val();
  102.  
  103.     var maxDayRemain = range.max % 86400;
  104.     var maxHour = Math.floor(maxDayRemain / 3600);
  105.     var maxHourRemain = range.max % 3600;
  106.     var maxMinute = Math.floor(maxHourRemain / 60);
  107.     var minDayRemain = range.min % 86400;
  108.     var minHour = Math.floor(minDayRemain / 3600);
  109.     var minHourRemain = range.min % 3600;
  110.     var minMinute = Math.floor(minHourRemain / 60);
  111.  
  112.     /* 时值 最大和最小 都是一个值
  113.         例如 {min:4294967294, max:4294967295}
  114.         49710天6时28分15秒
  115.         49710天6时28分14秒
  116.      */
  117.     if ( $("#Day").data("cursor") == "MinMax"
  118.         && minHour == maxHour )
  119.     {
  120.         FillSelectOption("Minute", minMinute, maxMinute);
  121.         $(this).data("cursor", "MinMax");
  122.     }
  123.     else if ( ($("#Day").data("cursor") == "Max"
  124.         || $("#Day").data("cursor") == "MinMax" )
  125.         && hour == maxHour )
  126.     {
  127.         FillSelectOption("Minute", 0, maxMinute);
  128.         $(this).data("cursor", "Max");
  129.     }
  130.     else if ( ($("#Day").data("cursor") == "Min"
  131.         || $("#Day").data("cursor") == "MinMax" )
  132.         && hour == minHour )
  133.     {
  134.         FillSelectOption("Minute", minMinute, 59);
  135.         $(this).data("cursor", "Min");
  136.     }
  137.     else
  138.     {
  139.         FillSelectOption("Minute", 0, 59);
  140.         $(this).data("cursor", "Middle");
  141.     }
  142.     /* 更新秒控件可选值，
  143.         一旦选择了最大值，这些控件范围有可能是部分可选项，
  144.         如果天选择不为最大值，则这些控件需要包括全部可选项。*/
  145.     $("#Minute").change();
  146.  
  147.     event.stopPropagation();
  148. });
  149.  
  150. /* 分控件 值选中后，改变秒控件可选值 */
  151. $("#TimeScalar").on("change", "#Minute", function(event){
  152.     var minute = $(this).val();
  153.  
  154.     var maxHourRemain = range.max % 3600;
  155.     var maxMinute = Math.floor(maxHourRemain / 60);
  156.     var maxMinuteRemain = range.max % 60;
  157.     var maxSecond = Math.floor(maxMinuteRemain / 1);
  158.     var minHourRemain = range.min % 3600;
  159.     var minMinute = Math.floor(minHourRemain / 60);
  160.     var minMinuteRemain = range.min % 60;
  161.     var minSecond = Math.floor(minMinuteRemain / 1);
  162.  
  163.     /* 分值 最大和最小 都是一个值
  164.         例如 {min:4294967294, max:4294967295}
  165.         49710天6时28分15秒
  166.         49710天6时28分14秒
  167.      */
  168.     if ( $("#Day").data("cursor") == "MinMax"
  169.         && $("#Hour").data("cursor") == "MinMax"
  170.         && minMinute == maxMinute )
  171.     {
  172.         FillSelectOption("Second", minSecond, maxSecond);
  173.     }
  174.     else if ( ($("#Day").data("cursor") == "Max"
  175.             || $("#Day").data("cursor") == "MinMax" )
  176.         && ( $("#Hour").data("cursor") == "Max"
  177.             || $("#Hour").data("cursor") == "MinMax" )
  178.         && minute == maxMinute )
  179.     {
  180.         FillSelectOption("Second", 0, maxSecond);
  181.     }
  182.     else if ( ($("#Day").data("cursor") == "Min"
  183.             || $("#Day").data("cursor") == "MinMax" )
  184.         && ( $("#Hour").data("cursor") == "Min"
  185.             || $("#Hour").data("cursor") == "MinMax" )
  186.         && minute == minMinute )
  187.     {
  188.         FillSelectOption("Second", minSecond, 59);
  189.     }
  190.     else
  191.     {
  192.         FillSelectOption("Second", 0, 59);
  193.     }
  194.  
  195.     event.stopPropagation();
  196. });
  197.  
  198. function InitTimeScalar(range)
  199. {
  200.     // console.log('--------------- init time ['+range.min+''+range.max+'] -------');
  201.     // Second2DHMS(range.min)
  202.     // Second2DHMS(range.max)
  203.  
  204.     /* 控件初始化 */
  205.     $("#TimeScalar").empty();
  206.     $("#TimeScalar").append('\
  207.         <select id="Day"></select><label for="Day">天</label>\
  208.         <select id="Hour"></select><label for="Hour">时</label>\
  209.         <select id="Minute"></select><label for="Minute">分</label>\
  210.         <select id="Second"></select><label for="Second">秒</label>');
  211.  
  212.     var minDay = Math.floor(range.min / 86400);
  213.     var maxDay = Math.floor(range.max / 86400);
  214.  
  215.     /* 填充天控件可选项 */
  216.     FillSelectOption("Day", minDay, maxDay);
  217.  
  218.     /* 触发天控件change，初始化填充时分秒控件可选项 */
  219.     $("#Day").change();
  220.  
  221.     /* 如果最大单位未达到，则隐藏掉对应控件 */
  222.     var maxDay = Math.floor(range.max / 86400);
  223.     if ( maxDay == 0 )
  224.     {
  225.         $("#Day").hide();
  226.         $("label[for='Day']").hide();
  227.  
  228.         var maxHour = Math.floor(range.max / 3600);
  229.         if ( maxHour == 0 )
  230.         {
  231.             $("#Hour").hide();
  232.             $("label[for='Hour']").hide();
  233.  
  234.             var maxMinute = Math.floor(range.max / 60);
  235.             if ( maxMinute == 0 )
  236.             {
  237.                 $("#Minute").hide();
  238.                 $("label[for='Minute']").hide();
  239.             }
  240.         }
  241.     }
  242. }
  243.  
  244. function SetTimeControlValue(second)
  245. {
  246.     var dhmsJson = Second2DHMS(second);
  247.  
  248.     $("#Day").val(dhmsJson.day);
  249.     $("#Day").change();
  250.  
  251.     $("#Hour").val(dhmsJson.hour);
  252.     $("#Hour").change();
  253.  
  254.     $("#Minute").val(dhmsJson.minute);
  255.     $("#Minute").change();
  256.  
  257.     $("#Second").val(dhmsJson.second);
  258. }
  259.  
  260. function GetTimeControlValue()
  261. {
  262.     var d = $("#Day").val();
  263.     var h = $("#Hour").val();
  264.     var m = $("#Minute").val();
  265.     var s = $("#Second").val();
  266.  
  267.     var totolSec = d * 86400
  268.         + h * 3600
  269.         + m * 60
  270.         + s * 1;
  271.  
  272.     return totolSec;
  273. }
  274.  
  275. /*******************************************************************************
  276. Description: 测试用例
  277. Changes:
  278. *******************************************************************************/
  279. /* 考虑使用jsunit
  280.     整个控件考虑使用模块化思想
  281.  */
  282. function TestSetGet(second, bResult)
  283. {
  284.     //console.log("----- test set time value("+second+") --------" );
  285.  
  286.     SetTimeControlValue(second);
  287.     var realSec = GetTimeControlValue();
  288.     var bRealResult = ( realSec == second );
  289.  
  290.     if ( bResult != bRealResult )
  291.     {
  292.         console.warn("!!!! second("+second+") test failed! realSec="+realSec);
  293.     }
  294.     else
  295.     {
  296.         console.log("second("+second+") test success!");
  297.     }
  298. }
  299.  
  300. /* 一般范围测试：
  301. 1、页面载入，没有后台赋值， 查看各个控件可选范围：
  302.     天 0-49710
  303.     时 0-23
  304.     分 0-59
  305.     秒 0-59
  306. 2、MAX测试：
  307.     a. 选择天为 49710， 查看时选择范围为 0-6
  308.     b. 选择时为 6， 查看分选择范围为 0-28
  309.     c. 选择分为 28， 查看秒选择范围为 0-15, 选择秒15 OK
  310.     d. 再次切换分为 27， 查看秒 可选范围 为 0-59
  311.     e. 再次切换时为 5， 查看分 可选值为 0-59
  312.     f. 再次切换天为 49709，查看时 可选值为 0-23
  313.     49710天6时28分15秒
  314. */
  315. var range = {min:0, max:4294967295}
  316. InitTimeScalar(range);
  317.  
  318. TestSetGet(4294967295, true);
  319. TestSetGet(4294967296, false);
  320. TestSetGet(100, true);
  321. TestSetGet(0, true);
  322. TestSetGet(-1, false);
  323.  
  324. /* range相差1s测试
  325.         范围为 {min:4294967294, max:4294967295}
  326.         49710天6时28分15秒
  327.         49710天6时28分14秒
  328.     查看各个控件可选值
  329.         天 - 49710
  330.         时 - 6
  331.         分 - 28
  332.         秒 - 14-15
  333. */
  334. var range = {min:4294967294, max:4294967295}
  335. InitTimeScalar(range);
  336.  
  337. TestSetGet(4294967295, true);
  338. TestSetGet(4294967296, false);
  339. TestSetGet(4294967294, true);
  340. TestSetGet(4294967293, false);
  341.  
  342. /* range相差1分钟测试
  343.     范围 {min:4294967235, max:4294967295}
  344.     49710天6时28分15秒
  345.     49710天6时27分15秒
  346.     查看各个控件可选值
  347.         天 - 49710
  348.         时 - 6
  349.         分 - 27-28
  350.         秒 - 15-59 选择分为 27
  351.         秒 - 0-15 选择分为 28
  352.  */
  353. var range = {min:4294967235, max:4294967295}
  354. InitTimeScalar(range);
  355.  
  356. TestSetGet(4294967295, true);
  357. TestSetGet(4294967296, false);
  358. TestSetGet(4294967235, true);
  359. TestSetGet(4294967234, false);
  360.  
  361. /* range相差1小时测试
  362.     范围 {min:4294963695, max:4294967295}
  363.     49710天6时28分15秒
  364.     49710天5时28分15秒
  365.     查看各个控件可选值
  366.         天 - 49710
  367.         时 - 5-6
  368.         分 - 28-59 选择时为 5
  369.         分 - 0-28 选择时为 6
  370.         秒 - 15-59 选择分为 28，时为5
  371.         秒 - 0-59 选择分为 29，时为5
  372.         秒 - 0-15 选择分为 28， 时为6
  373.         秒 - 0-59 选择分为 27， 时为6
  374.  */
  375. var range = {min:4294963695, max:4294967295}
  376. InitTimeScalar(range);
  377.  
  378. TestSetGet(4294967295, true);
  379. TestSetGet(4294967296, false);
  380. TestSetGet(4294963695, true);
  381. TestSetGet(4294963694, false);
  382.  
  383. /* range相差1天测试
  384.     范围 {min:4294880895, max:4294967295}
  385.     49710天6时28分15秒
  386.     49709天6时28分15秒
  387.     查看各个控件可选值
  388.         天 - 49709-49710
  389.         时 - 6-23 选择天为49709
  390.         时 - 0-6 选择天为49710
  391.         选择天为49709，时为7， 查看分秒范围都为 0-59
  392.         选择天为49710，时为5， 查看分秒范围都为 0-59
  393.  */
  394. var range = {min:4294880895, max:4294967295}
  395. InitTimeScalar(range);
  396.  
  397. TestSetGet(4294967295, true);
  398. TestSetGet(4294967296, false);
  399. TestSetGet(4294880895, true);
  400. TestSetGet(4294880894, false);
  401.  
  402. /* range最大值为1天测试，查看最大和最小值如下可选
  403.     1天0时0分0秒
  404.     0天0时0分0秒
  405.  */
  406. var range = {min:0, max:86400}
  407. InitTimeScalar(range);
  408.  
  409. TestSetGet(86400, true);
  410. TestSetGet(86401, false);
  411. TestSetGet(0, true);
  412. TestSetGet(-1, false);
  413.  
  414. /* range最大值不足1天测试
  415.     天控件未显示，时分秒最大最小值可选如下
  416.     0天23时59分59秒
  417.     0天0时0分0秒
  418.  */
  419. var range = {min:0, max:86399}
  420. InitTimeScalar(range);
  421.  
  422. TestSetGet(86399, true);
  423. TestSetGet(86400, false);
  424. TestSetGet(0, true);
  425. TestSetGet(-1, false);
  426.  
  427. /* range最大值为1小时
  428.     时分秒最大最小值可选如下
  429.     0天1时0分0秒
  430.     0天0时0分0秒
  431.  */
  432. var range = {min:0, max:3600}
  433. InitTimeScalar(range);
  434.  
  435. TestSetGet(3600, true);
  436. TestSetGet(3601, false);
  437. TestSetGet(0, true);
  438. TestSetGet(-1, false);
  439.  
  440. /* range最大值为 3599
  441.     时分秒最大最小值可选如下
  442.     0天0时59分59秒
  443.     0天0时0分0秒
  444.  */
  445. var range = {min:0, max:3599}
  446. InitTimeScalar(range);
  447.  
  448. TestSetGet(3599, true);
  449. TestSetGet(3600, false);
  450. TestSetGet(0, true);
  451. TestSetGet(-1, false);
  452.  
  453. /* range最大值 1分钟
  454.     0天0时1分0秒
  455.     0天0时0分0秒
  456. */
  457. var range = {min:0, max:60}
  458. InitTimeScalar(range);
  459.  
  460. TestSetGet(60, true);
  461. TestSetGet(61, false);
  462. TestSetGet(0, true);
  463. TestSetGet(-1, false);
  464.  
  465. /* range最大值 59
  466.     0天0时0分59秒
  467.     0天0时0分0秒
  468. */
  469. var range = {min:0, max:59}
  470. InitTimeScalar(range);
  471.  
  472. TestSetGet(59, true);
  473. TestSetGet(60, false);
  474. TestSetGet(0, true);
  475. TestSetGet(-1, false);
  476. TestSetGet(59, true);
  477.  
  478.     </script>
  479. </body>
  480. </html>

在火狐上运行后， 控制台上打印如下：

aaarticlea/png;base64,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" alt="" />

引申

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!" );
});

JavasSript实现秒转换为“天时分秒”控件和TDD测试方法应用的更多相关文章

  1. ios开发之--把秒转换为天时分秒

    把秒转换成时分秒: - (NSString *)timeFormatted:(int)totalSeconds { ; ) % ; ; return [NSString stringWithForma ...

  2. 精确到秒的JQuery日期控件

    项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下, ...

  3. sqlserver 时间差转换为天时分秒

    DECLARE @starttime DATETIME = '2016-12-01' , @endtime DATETIME = '2016-12-02 14:56:39.927'; DECLARE ...

  4. C# WPF 低仿网易云音乐（PC）歌词控件

    原文:C# WPF 低仿网易云音乐(PC)歌词控件 提醒:本篇博客记录了修改的过程,废话比较多,需要项目源码和看演示效果的直接拉到文章最底部~ 网易云音乐获取歌词的api地址 http://music ...

  5. DataGridView控件

    DataGridView控件 DataGridView是用于Windows Froms 2.0的新网格控件.它可以取代先前版本中DataGrid控件,它易于使用并高度可定制,支持很多我们的用户需要的特 ...

  6. (九)ASP.NET自定义用户控件(2)

    http://www.cnblogs.com/SkySoot/archive/2012/09/04/2670678.html 用户控件 在 .NET 里,可以通过两种方式把自己的控件插入到 Web 窗 ...

  7. C#调用ActiveX控件

    背景:最近项目中需要用到ActiveX控件,项目是在.Net平台下开发的.因此就直接在项目中添加了对ActiveX控件的引用,添加引用成功.在代码中实例化类的实例也没有问题,但在调用其方法或属性时总是 ...

  8. DataGridView控件-[引用]

    DataGridView控件 DataGridView是用于Windows Froms 2.0的新网格控件.它可以取代先前版本中DataGrid控件,它易于使用并高度可定制,支持很多我们的用户需要的特 ...

  9. C#中引用第三方ocx控件引发的问题以及解决办法

    调用OCX控件的步骤:1.在系统中注册该ocx控件,命令:regsvr32.exe 控件位置(加 /u 参数是取消注册)2.在.net的工具箱中添加该控件,拖到form中去就可以了. 不用工具箱的话, ...

随机推荐

  1. 使用for( var each in record){} 去寻找object里面的内容；

    for(var each in object){ alert(each); }

  2. Codeforces Round #209 (Div. 2) A. Table

    #include <iostream> #include <vector> using namespace std; int main(){ int n,m; cin > ...

  3. 转载：冷门js技巧

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  4. [Cocos2D-x For WP8]CocosDenshion音频播放

    Cocos2D-x的音频分为长时间的背景音乐和短的音效两种,我们可以通过SimpleAudioEngine::sharedEngine()方法来获取音频播放的引擎,然后调用对音频相关的操作方法就可以了 ...

  5. Code[VS] 2370 LCA 题解

    Code[VS] 2370 小机房的树 题解 RMQ 树链剖分 题目描述 Description 小机房有棵焕狗种的树,树上有N个节点,节点标号为0到N-1,有两只虫子名叫飘狗和大吉狗,分居在两个不同 ...

  6. ubuntu 无声音的解决

    以下“失声疗法”是针对HDMI被设置为默认输出的情况: aplay -l 是用来查看音视频设备与卡号信息的: 然后 1.sudo gedit /etc/asound.conf 2.在文件中写入defa ...

  7. [LintCode] Valid Number 验证数字

    Validate if a given string is numeric. Have you met this question in a real interview? Yes Example & ...

  8. JAVA代码实现下载单个文件，和下载打包文件

    //下载单个文件调用方法 /**     * response     * imgPath 下载图片地址    * fileName 保存下载文件名称    * @date 2015年4月14日 下午 ...

  9. val, lazy, def

    val strVal = scala.io.Source.fromFile("test.txt").mkString //在strVal被定义的时候获取值,如果test.txt不存 ...

  10. html制作一个美观的搜索框

    一般情况下搜索栏就是form标签中的一个input标签. 如: <form> <input type="text" placeholder=" 搜索关键 ...