找到了一个非常好的代码来自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雷达建议的更改,但时间没有出现,只有停止时间按钮。
答案 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' />