moment.js代码没有出现

时间:2015-06-12 19:02:15

标签: javascript jquery momentjs

找到了一个非常好的代码来自jsfiddle,http://jsfiddle.net/ivangrs/zf80q3nh/我的项目在stackoverflow上发布了,但是在从网站上抓取代码后我无法看到实现代码的任何内容!请帮忙?

这是我复制的代码

HTML:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<script>



function addlist1(element1, selected_element) {
    var select1 = document.getElementById(element1);
    var newOpt = ["ONE", "TWO", "THREE", "FOUR", "FIVE"]; 
    var newopt1 ;
    var newopt2 ;

    if(selected_element == 'mySelect' || selected_element == 'mySelect1' || selected_element == 'mySelect2'
        || selected_element == 'mySelect3'|| selected_element == 'mySelect4' || selected_element == 'mySelect5'){
        var sel = document.getElementById('mySelect');
          newopt1 = newOpt.slice(0, sel.selectedIndex);
          newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
          newOpt = newopt1.concat(newopt2);

     if(selected_element == 'mySelect1' || selected_element == 'mySelect2'|| selected_element == 'mySelect3'
             || selected_element == 'mySelect4' || selected_element == 'mySelect5'){
        var sel = document.getElementById('mySelect1');
          newopt1 = newOpt.slice(0, sel.selectedIndex);
          newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
          newOpt = newopt1.concat(newopt2);

       if(selected_element == 'mySelect2'|| selected_element == 'mySelect3'
             || selected_element == 'mySelect4' || selected_element == 'mySelect5'){   
        var sel = document.getElementById('mySelect2');
          newopt1 = newOpt.slice(0, sel.selectedIndex);
          newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
          newOpt = newopt1.concat(newopt2);

         if(selected_element == 'mySelect3'|| selected_element == 'mySelect4' 
                 || selected_element == 'mySelect5'){
        var sel = document.getElementById('mySelect3');

          newopt1 = newOpt.slice(0, sel.selectedIndex);
          newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
          newOpt = newopt1.concat(newopt2);

          if( selected_element == 'mySelect4'  || selected_element == 'mySelect5'){
           var sel = document.getElementById('mySelect4');

          newopt1 = newOpt.slice(0, sel.selectedIndex);
          newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
          newOpt = newopt1.concat(newopt2);

              if(selected_element == 'mySelect5'){
                var sel = document.getElementById('mySelect5');

          newopt1 = newOpt.slice(0, sel.selectedIndex);
          newopt2 = newOpt.slice(sel.selectedIndex + 1, newOpt.length);
          newOpt = newopt1.concat(newopt2);
            } 
          }
          }
       }
      }
    }


     for(var i = 0; i < newOpt.length; i++) {
         var opt = newOpt[i];
         select1.options[i].value  = opt.valueOf();
         select1.options[i].text = opt.valueOf();
         } 
}


 function createList() {
     alert('onload');
     var select = document.getElementById("mySelect"); 
        var select1 = document.getElementById("mySelect1");
var select2 = document.getElementById("mySelect2");
var select3 = document.getElementById("mySelect3");
var select4 = document.getElementById("mySelect4");
var select5 = document.getElementById("mySelect5");


     var options = ["ONE", "TWO", "THREE", "FOUR", "FIVE"]; 
     for(var i = 0; i < options.length; i++) {
         var opt = options[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            select.appendChild(el);
     }
 for(var i = 0; i < options.length; i++) {
         var opt = options[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
           select1.appendChild(el);
     }
 for(var i = 0; i < options.length; i++) {
         var opt = options[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;

select2.appendChild(el);
     }
 for(var i = 0; i < options.length; i++) {
     var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;

select3.appendChild(el);
 }
 for(var i = 0; i < options.length; i++) {
     var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;

select4.appendChild(el);
 }
 for(var i = 0; i < options.length; i++) {
     var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;

select5.appendChild(el);
 }
 }

 function removelist(element_id) {
        alert('remove');
        var selected_element = element_id.id;
        alert(selected_element);
        var e0 = document.getElementById("mySelect");
        var e1 = document.getElementById("mySelect1");
        var e2 = document.getElementById("mySelect2");
        var e3 = document.getElementById("mySelect3");
        var e4 = document.getElementById("mySelect4");
        var e5 = document.getElementById("mySelect5");

    if(selected_element == 'mySelect'){
        addlist1("mySelect1", selected_element);
        addlist1("mySelect2", selected_element);
        addlist1("mySelect3", selected_element);
        addlist1("mySelect4", selected_element);
        addlist1("mySelect5", selected_element);
        e1.remove(4);
        e2.remove(4);
        e3.remove(4);
        e4.remove(4);
        e5.remove(4);   
        } else if(selected_element == 'mySelect1'){

            addlist1("mySelect2", selected_element);
            addlist1("mySelect3", selected_element);
            addlist1("mySelect4", selected_element);
            addlist1("mySelect5", selected_element);
            e2.remove(4);
            e2.remove(3);
            e3.remove(4);
            e3.remove(3);
            e4.remove(4);
            e4.remove(3);
            e5.remove(4);
            e5.remove(3);

            }  else if(selected_element == 'mySelect2'){

                addlist1("mySelect3", selected_element);
                addlist1("mySelect4", selected_element);
                addlist1("mySelect5", selected_element);
                e3.remove(4);
                e3.remove(3);
                e3.remove(2);
                e4.remove(4);
                e4.remove(3);
                e4.remove(2);
                e5.remove(4);
                e5.remove(3);
                e5.remove(2);

                }  else if(selected_element == 'mySelect3'){

                    addlist1("mySelect4", selected_element);
                    addlist1("mySelect5", selected_element);
                    e4.remove(4);
                    e4.remove(3);
                    e4.remove(2);
                    e4.remove(1);
                    e5.remove(4);
                    e5.remove(3);
                    e5.remove(2);
                    e5.remove(1);


                    }  else if(selected_element == 'mySelect4'){

                        addlist1("mySelect5", selected_element);
                        e5.remove(5);
                        e5.remove(4);
                        e5.remove(3);
                        e5.remove(2);
                        e5.remove(1);

                        }

           }


 </script>
<body onload ="createList()">
<form id="mainForm" action= "" method ="get">
Criteria One:
<select id="mySelect" onchange="removelist(this)">
</select>
<select id="mySelect1" onchange="removelist(this)">
</select>
<select id="mySelect2" onchange="removelist(this)">
</select>
<select id="mySelect3" onchange="removelist(this)">
</select>
<select id="mySelect4" onchange="removelist(this)">
</select>
<select id="mySelect5">
</select>
         </form>
</body>
</html>

javascript.js:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>
    <script src="js/javascript.js"></script>
</head>

<body>
    <div class='time-frame'>
        <div id='time-part'></div>
        <div id='date-part'></div>

    </div>
    <br>
</body>

</html>

style.css CSS:

$(document).ready(function() {
    var interval = setInterval(function() {
        var momentNow = moment();
        $('#time-part').html(momentNow.format(' hh:mm:ss a'))

        $('#date-part').html(momentNow.format('dddd').substring(0, 8) + ' ' + momentNow.format('DD MMMM YYYY'));

    });

    $('#stop-interval').on('click', function() {
        clearInterval(interval);
    });
});

更新:我已经实现了@below雷达建议的更改,但时间没有出现,只有停止时间按钮。

1 个答案:

答案 0 :(得分:0)

您忘记了javascript.js中setInterval函数的持续时间

         $(document).ready(function() {
            var interval = setInterval(function() {
                var momentNow = moment(); $('#time-part').html(momentNow.format(' hh:mm:ss a'))

                $('#date-part').html(momentNow.format('dddd').substring(0,8) + ' '+ momentNow.format('DD MMMM YYYY'));

            }, 100);

            $('#stop-interval').on('click', function() {
                clearInterval(interval);
            });
        });

您忘记了身体停止按钮的输入:

            <div class='time-frame'>
                <div id='date-part'></div>
                <div id='time-part'></div>
            </div>
            <br>
            <input type='button' id='stop-interval' value='Stop time' />