Question

我正在尝试让代码为我的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>

Answer 1

首先要说些什么：

不要在循环中使用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问题

1 个答案: