我试图让代码为我的 marzipano 项目创建一个数据文件，它使用这个 data.js，我不想为每个项目创建每个链接，所以我尝试循环它，但它不打印它进入我的html页面。我想将其打印为文本，以便可以将结果复制并粘贴到我的 js 文件中，有没有办法修复我的代码或更好的方法？
P.S:我对 javascript 完全是菜鸟
提前谢谢
function auto(number){
i = 0;
while (i < number) {
//Fist Scene
if(i === 0){
document.write('
<p>
{
"id": "0",
"name": "0",
"levels": [
{
"tileSize": 256,
"size": 256,
"fallbackOnly": true
},
{
"tileSize": 512,
"size": 512
},
{
"tileSize": 512,
"size": 1024
},
{
"tileSize": 512,
"size": 2048
}
],
"faceSize": 2000,
"initialViewParameters": {
"yaw": -3.0907815953112916,
"pitch": 0.06648956035942888,
"fov": 1.5707963267948966
},
"linkHotspots": [
{
"yaw": -3.128953846954726,
"pitch": 0.47317799909128944,
"rotation": 0,
"target": "1"
}
],
"infoHotspots": []
},</p>
')
}
//Last Scene
else if (i === number){
document.write('
<p>
{
"id": "'i'",
"name": "'i'",
"levels": [
{
"tileSize": 256,
"size": 256,
"fallbackOnly": true
},
{
"tileSize": 512,
"size": 512
},
{
"tileSize": 512,
"size": 1024
},
{
"tileSize": 512,
"size": 2048
}
],
"faceSize": 2000,
"initialViewParameters": {
"yaw": -3.1332154632455715,
"pitch": 0.062442602034723294,
"fov": 1.5707963267948966
},
"linkHotspots": [
{
"yaw": 0.008275683165861025,
"pitch": 0.3876084470351344,
"rotation": 0,
"target": "'i-1'"
}
],
"infoHotspots": []
}</p>'
)
}
//Actual loop
else if (i < number){
document.write('
{
"id": "i",
"name": "i",
"levels": [
{
"tileSize": 256,
"size": 256,
"fallbackOnly": true
},
{
"tileSize": 512,
"size": 512
},
{
"tileSize": 512,
"size": 1024
},
{
"tileSize": 512,
"size": 2048
}
],
"faceSize": 2000,
"initialViewParameters": {
"yaw": -3.0859786632885857,
"pitch": 0.058860826755053,
"fov": 1.5707963267948966
},
"linkHotspots": [
{
"yaw": 0.007751782217697567,
"pitch": 0.39202518148107757,
"rotation": 0,
"target": "'i-1'"
},
{
"yaw": -3.1285088198075375,
"pitch": 0.48530966110218543,
"rotation": 0,
"target": "'i+1'"
}
],
"infoHotspots": []
},<br>
')
}
}
}
}
auto(13);<html>
<head>
</head>
<body>
<script src="auto.js"></script>
</body>
</html>最佳答案
首先要说的是:
- 请勿使用
document.write()循环中。它会自行重写您的文档。 - 当字符串是多行字符串时，使用反引号(`)进行换行。
- 最好使用
pre标签来显示格式化数据，例如JSON或任何code片段。 - 使用
while时循环照顾incrementer和decrementer在你的while阻止阻止infinite循环播放。
我认为以下解决方案适合您。
function auto(number){
var e = document.getElementById("data");
i = 0;
var html = "";
while (i <= number) {
//Fist Scene
if(i === 0){
html += `
<pre>
{
"id": "` + i + `",
"name": "0",
"levels": [
{
"tileSize": 256,
"size": 256,
"fallbackOnly": true
},
{
"tileSize": 512,
"size": 512
},
{
"tileSize": 512,
"size": 1024
},
{
"tileSize": 512,
"size": 2048
}
],
"faceSize": 2000,
"initialViewParameters": {
"yaw": -3.0907815953112916,
"pitch": 0.06648956035942888,
"fov": 1.5707963267948966
},
"linkHotspots": [
{
"yaw": -3.128953846954726,
"pitch": 0.47317799909128944,
"rotation": 0,
"target": "1"
}
],
"infoHotspots": []
},</pre>
`;
}
//Last Scene
else if (i === number){
html += `
<pre>
{
"id": "` + i + `",
"name": "` + i + `",
"levels": [
{
"tileSize": 256,
"size": 256,
"fallbackOnly": true
},
{
"tileSize": 512,
"size": 512
},
{
"tileSize": 512,
"size": 1024
},
{
"tileSize": 512,
"size": 2048
}
],
"faceSize": 2000,
"initialViewParameters": {
"yaw": -3.1332154632455715,
"pitch": 0.062442602034723294,
"fov": 1.5707963267948966
},
"linkHotspots": [
{
"yaw": 0.008275683165861025,
"pitch": 0.3876084470351344,
"rotation": 0,
"target": "` + (i-1) + `"
}
],
"infoHotspots": []
}</pre>
`;
}
//Actual loop
else if (i < number){
html += `
<pre>{
"id": "` + i + `",
"name": "` + i + `",
"levels": [
{
"tileSize": 256,
"size": 256,
"fallbackOnly": true
},
{
"tileSize": 512,
"size": 512
},
{
"tileSize": 512,
"size": 1024
},
{
"tileSize": 512,
"size": 2048
}
],
"faceSize": 2000,
"initialViewParameters": {
"yaw": -3.0859786632885857,
"pitch": 0.058860826755053,
"fov": 1.5707963267948966
},
"linkHotspots": [
{
"yaw": 0.007751782217697567,
"pitch": 0.39202518148107757,
"rotation": 0,
"target": "` + (i-1) + `"
},
{
"yaw": -3.1285088198075375,
"pitch": 0.48530966110218543,
"rotation":0,
"target": "` + (i+1) + `"
}
],
"infoHotspots": []
}</pre>
`;
}
i++;
}
e.innerHTML = html;
}
auto(13);<html>
<head>
</head>
<body>
<script src="auto.js"></script>
<div id="data"><div>
</body>
</html>关于Javascript document.write 循环问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40729742/