如何解决如何同时将两个不同的divs内部HTML设置为变量？
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootBox.js/5.4.0/bootBox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
td{border:3px solid orange}
#newGame{Box-sizing:border-Box;border: 3px solid #8B2A16;color:yellow;z-index:1;animation: MotionScale 7s alternate linear infinite;position:absolute;top:45%;left:45%;}
body{background-color:#8B2A16}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
@keyframes MotionScale {
from {
/*
Identity matrix is used as basis here.
The matrix below describes the
following transformations:
Translates every X point by +50px
Translates every Y point by +100px
Translates every Z point by 0
Scales down by 10%
*/
transform: matrix3d( 1,.45,1.75,2.5,.0,1,50,100,1.1 );
}
50% {
transform: matrix3d( 1,0.9 );
}
to {
transform: matrix3d( 1,-.45,1.1 )
}
}
</style>
</head>
<body>
<button onclick="beginWithUnclejourney()">Apes</button>
<div style="Box-sizing:border-Box;border:3px solid green; height:1500px; width:1500px; position:absolute; top: 45%; left: 45%;background-image:url('../Media/chessBoard1.png')" id="postulatedDiv"></div>
<div id="newGame"><h1><a style="color:yellow" onclick="testTheUnits()">Uncle Units First Round</a></h1></div>
</body>
<script>
function testTheUnits(){document.body.style.backgroundColor="#742818";setTimeout(function(){document.body.style.backgroundColor="#522015"},1000);setTimeout(function(){document.body.style.backgroundColor="#2C120D"},2000);setTimeout(function(){document.body.style.backgroundColor="#160907"},3000);setTimeout(function(){document.body.style.backgroundColor="#060302"},4000);setTimeout(function(){let theMoonSvg = document.createElementNS("http://www.w3.org/2000/svg","svg");theMoonSvg.setAttribute('id','theMoonSvg');theMoonSvg.setAttribute('height','500');theMoonSvg.setAttribute('width','500');theMoonSvg.setAttribute('style','z-index:1;position:absolute;top:1%;left:7%;transition:transform 3s');document.body.appendChild(theMoonSvg);let theMoon = document.createElementNS("http://www.w3.org/2000/svg","circle");theMoon.setAttribute('id','theMoon');theMoon.setAttribute('cx','225');theMoon.setAttribute('cy','225');theMoon.setAttribute('r','225');theMoon.setAttribute('fill','blue');theMoon.setAttribute('stroke','yellow');theMoon.setAttribute('stroke-width','4');document.querySelector("#theMoonSvg").appendChild(theMoon);theMoon.setAttribute("onmouSEOver","increaseMoonAndStartGame()");theMoon.setAttribute("style","z-index-1");let theMoonText = document.createElementNS("http://www.w3.org/2000/svg","text");theMoonText.setAttribute('id','theMoonText');theMoonText.setAttribute('x','115');theMoonText.setAttribute('y','225');theMoonText.setAttribute('style','z-index:1');theMoonSvg.appendChild(theMoonText);theMoonText.innerHTML="hover to begin";theMoonText.setAttribute("fill","yellow");theMoonText.setAttribute("font-size","3em")},5000);}
function increaseMoonAndStartGame(){document.querySelector("#theMoonSvg").style.transform="matrix3d(1,300,175,.65)";setTimeout(function(){document.querySelector("#theMoonText").innerHTML="Begin";},3000);
setTimeout(function(){document.querySelector("#theMoonSvg").remove();document.body.style.backgroundColor="green";document.body.innerHTML='<table style="color:orange;border:3px solid black"><thead><tr><td>Pick Your Uncle</td></tr></thead><tbody><tr><td><h1><a style="color:orange" onclick="uncleOne()">Uncle who plays mario for atleast One hundred goldStars,reads magazines,and drinks Yuengling</a></h1></td><td><h1><a style="color:orange" onclick="uncleTwo()">Uncle who makes his own bug spray,doesn\'t use a wallet and listens to country music</a></h1></td><td><h1><a style="color:orange" onclick="uncleThree()">Uncle who has velcro instead of shoe laces,keeps up with conspiracy theroies and eats more nuts than doughnuts</a></h1></td></tr></tbody></table>'},3500)}
var whatIsTheUnclesName;
function uncleOne(){bootBox.prompt({
className:'uncleName',title: "Name Your Uncle",centerVertical: true,callback: function(result){ whatIsTheUnclesName=result;
if(result===null){alert("try again?");bootBox.hideAll();location.reload()}
else{bootBox.alert("Your uncle\'s name is:" + result,function(){testUncleStart()})}
}});uncleStart="uncleOne";}
function uncleTwo(){bootBox.prompt({
className:'uncleName',function(){testUncleStart()})}
}});uncleStart="uncleTwo";}
function uncleThree(){bootBox.prompt({
className:'uncleName',function(){testUncleStart()})}
}});uncleStart="uncleThree";}
function testUncleStart(){if(uncleStart=="uncleOne"){bootBox.alert("you chose:" + whatIsTheUnclesName + ":: Attributes: Uncle who plays mario for atleast One hundred goldStars,and drinks Yuengling",function(){setTimeout(function(){beginWithUnclejourney()},1000)} )}else if(uncleStart=="uncleTwo"){bootBox.alert("you chose:" + whatIsTheUnclesName + ":: Attributes: Uncle who makes his own bug spray,doesn\'t use a wallet and listens to country music",1000)} )}else if(uncleStart=="uncleThree"){bootBox.alert("you chose:" + whatIsTheUnclesName + ":: Attributes: Uncle who has velcro instead of shoe laces,keeps up with conspiracy theroies and eats more nuts than doughnuts",1000)} )}}
function beginWithUnclejourney(){document.body.innerHTML="<h1><a style=\"color:orange\" onclick=\"freckleMetonsForBurnCooknessOntheGrillSet()\">Begin with "+whatIsTheUnclesName+"</a></h1>"}
var uncleStart;;
var timerBoxInterval;
var shrimpGrill;
var shrimp;
var shrimp02;
var shrimp03;
var shrimp04;
var shrimp05;
var shrimp06;
var pane;
var x=0;
var ace;
var time01 = 0;
var time02 = 0;
var time03 = 0;
var time04 = 0;
var time05 = 0;
var time06 = 0;
var plated01;
function platedTemper01(){shrimp = document.createElement("div"); document.body.appendChild(shrimp);shrimp.setAttribute("id","shrimpCook01");shrimp.style="Box-sizing:border-Box;position:absolute;background-color:green;height:50px;width:50px;top:80%;left:1%;color:orange;z-index:-1";shrimp.innerHTML=time01;if(time01>0&&time01<200){alert("that is food")}else{alert("send it back")}}
function platedTemper02(){shrimp02 = document.createElement("div"); document.body.appendChild(shrimp02);shrimp02.setAttribute("id","shrimpCook02");shrimp02.style="Box-sizing:border-Box;position:absolute;background-color:green;height:50px;width:50px;top:80%;left:1%;color:orange;z-index:-1";shrimp02.innerHTML=time02;if(time02>0&&time02<200){alert("that is food")}else{alert("send it back")}}
function freckleMetonsForBurnCooknessOntheGrillSet(){
document.body.innerHTML="";var timerBox = document.createElement("div");document.body.appendChild(timerBox);timerBox.setAttribute("id","timerBox");timerBox.style="Box-sizing:border-Box;position:absolute;top:1%;left:55%;background-color:green;height:225px;width:225px;z-index:-1";timerBoxInterval = setInterval(function(){timerBox.innerHTML=time01},1000);
setInterval(function() {
const height01 = document.querySelector("#shrimpCook01").style.top.split('px')[0];
const width01 = document.querySelector("#shrimpCook01").style.left.split('px')[0];
if(Number(width01) > 400 && Number(height01) < 100){document.querySelector("#shrimpCookGrill").removeChild(shrimp);platedTemper01()} else if ( Number(height01) > 400){time01++} else if( Number(height01) <= 400){time01--} else{}shrimp.innerHTML=time01;
},1000);
setInterval(function() {
const height02 = document.querySelector("#shrimpCook02").style.top.split('px')[0];
const width02 = document.querySelector("#shrimpCook02").style.left.split('px')[0];
if(Number(width02) > 400 && Number(height02) < 100){document.querySelector("#shrimpCookGrill").removeChild(shrimp02);platedTemper02()} else if ( Number(height02) > 400){time02++} else if( Number(height02) <= 400){time02--} else{}shrimp02.innerHTML=time02;
},1000);
shrimpGrill = document.createElement("div");document.body.appendChild(shrimpGrill);shrimpGrill.setAttribute("id","shrimpCookGrill");shrimpGrill.style="Box-sizing:border-Box;position:relative;background-color:black;height:500px;width:500px;z-index:1";
shrimp = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp);shrimp.setAttribute("id","shrimpCook01");shrimp.style="Box-sizing:border-Box;position:absolute;background-color:green;height:50px;width:50px;top:1%;left:1%;color:orange;z-index:-1";
shrimp02 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp02);shrimp02.setAttribute("id","shrimpCook02");shrimp02.style="Box-sizing:border-Box;position:absolute;background-color:green;height:50px;width:50px;top:11%;left:1%;color:orange;z-index:-1";
shrimp03 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp03);shrimp03.setAttribute("id","shrimpCook03");shrimp03.style="Box-sizing:border-Box;position:absolute;background-color:green;height:50px;width:50px;top:21%;left:1%;color:orange;z-index:-1";
shrimp04 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp04);shrimp04.setAttribute("id","shrimpCook04");shrimp04.style="Box-sizing:border-Box;position:absolute;background-color:green;height:50px;width:50px;top:31%;left:1%;color:orange;z-index:-1";
shrimp05 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp05);shrimp05.setAttribute("id","shrimpCook05");shrimp05.style="Box-sizing:border-Box;position:absolute;background-color:green;height:50px;width:50px;top:41%;left:1%;color:orange;z-index:-1";
shrimp06 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp06);shrimp06.setAttribute("id","shrimpCook06");shrimp06.style="Box-sizing:border-Box;position:absolute;background-color:green;height:50px;width:50px;top:51%;left:1%;color:orange;z-index:-1";
pane = $('#shrimpCookGrill'),Box = $('#shrimpCook01'),w = pane.width() - Box.width(),d = {},x = 3;
function newv(v,a,b) {
var n = parseInt(v,10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
Box.css({
left: function(i,v) { return newv(v,37,39); },top: function(i,38,40); }
});
},20);
}
function toggleDiv(){pane = $('#shrimpCookGrill'),Box = $('#shrimpCook0'+i),x = 1;
function newv(v,39);},200);
}
function togglep(){toggleDiv();
}
document.body.onkeydown = function(event){
event = event || window.event;
var keycode = event.charCode || event.keyCode;
if(keycode === 81){
togglep();i++;if(i>6){i=1;console.log(i)}
}
}
var i = 1;
</script>
</html>setInterval（function（）{
const height01 = document.querySelector（“＃shrimpCook01”）。style.top.split（'px'）[0]; const width01 = document.querySelector（“＃shrimpCook01”）。style.left.split（'px'）[0];
if（Number（width01）> 400 && Number（height01） 400）{ time01 ++} else if（Number（height01）
setInterval（function（）{
const height02 = document.querySelector（“＃shrimpCook02”）。style.top.split（'px'）[0]; const width02 = document.querySelector（“＃shrimpCook02”）。style.left.split（'px'）[0];
if（Number（width02）> 400 && Number（height02） 400）{ time02 ++} else if（Number（height02）
单击猿，然后单击以不确定的开头。我使用2个不同的间隔来表示两组不同的时间，但只有第一个div的时钟开始，如果我用箭头键移动第二个div，则时钟开始但我想让它开始。我可以使用向左，向右，向上和向下箭头键移动div，并通过按q按钮来切换div。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
