Question

如何在不编写如下代码的大代码的情况下在jQuery中打印时隙？

function myFunction()
{

var x = document.getElementById("seltime");
var timeslots=["00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30","24:00"];

 for (var i=0; i<timeslots.length; i++)
    {
             var option = document.createElement("option");
             option.text += timeslots[i];
             option.value += timeslots[i];
             x.add(option);
    }
 }
myFunction();

Answer 1

这里快速（http://jsfiddle.net/jm2romkv/）：

function myFunction()
{

var x = document.getElementById("seltime");
var timeSlotFn = getSlotIncrFn();
 // adjust 50 for more/less values
 for (var i=0; i<50; i++)
    {
             var option = document.createElement("option");
             var timeSlot = timeSlotFn();
             console.log(timeSlot);
    }
}

function getSlotIncrFn() {
    var curr = "00:00";
    return function() {
        var hour_min = curr.split(":");

        if (parseInt(hour_min[0]) == 24) {
            hour_min = ["00", "00"];
        }

        if (hour_min[1] == "00") {
            hour_min[1] = "30";
        } else {
            hour_min[1] = "00";
            var hour = parseInt(hour_min[0]) + 1;
            hour = hour < 10 ? "0" + hour : hour;
            hour_min[0] = hour;
        }
        curr = hour_min.join(":");
        return curr;
    };
};

myFunction();

Answer 2

我能想到的最短的时间：

function myFunction() {
    var options = '';
    for (var h = 0; h <= 24; h++) {
        for (var m = 0; m < 60; m = m + 30) {
            var value  = (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m);
            options += '<option value="' + value + '">' + value + '</option>';
            if (h == 24 && m == 0) break;
        }
    }
    $(".seltime").append(options);
}

myFunction();

此版本也更高效，因为它不会在循环中附加DOM元素，而只会构建一个选项字符串。

演示：http://jsfiddle.net/ot7x015p/1

Answer 3

仅限Jquery 试试这个：

function myFunction()
 {

 var timeslots=["00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30","24:00"];

 for (var i=0; i<timeslots.length; i++)
{
   var option = $("<option value='"+timeslots[i]+"'>"+timeslots[i]+"</option>");
   $("#seltime").append(option);      

}

}

Answer 4

使用jQuery你可以很简单地这样做：

function myFunction()
{
var timeslots=["00:00","00:30","01:00","01:30","02:00","02:30","03:00","03:30","04:00","04:30","05:00","05:30","06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30","24:00"];
    // Iterate over each timeslot and append it to `#selTime`
    $.each(timeslots, function(index, item){
       $('#selTime').append('<option value="' + item + '">' + item + '</option>'); 
    });
 }
myFunction();

演示：http://jsfiddle.net/robschmuecker/52hgu2od/1/

Answer 5

你也可以用jquery来试试这个简单的版本。演示：http://jsfiddle.net/vnqo2o2b/

    function myFunction()
    {
       var $selTime = $("#seltime");
       var minute=00;
       var hour = 00;
        while(!(hour==24 && minute<=30))
        {
            if(minute == 60) {
                hour++;
                minute =0;
            }
            var time = (hour<=9? "0"+hour : hour) + ":" + (minute == 0 ? "00": minute);
            $selTime.append(
                $('<option></option>').val(time).html(time)
            );
            minute += 30;
        }
     }
    myFunction();

从数组中的值创建Option元素

5 个答案:

演示：http://jsfiddle.net/ot7x015p/1