循环的Javascript document.write问题
循环的Javascript document.write问题
提问于 2016-11-22 05:29:40
我试图让代码为我的marzipano项目创建一个数据文件，它使用这个data.js，我不想为每个项目创建每个链接，所以我试图循环它，但它没有打印到我的html页面中。我想把它打印成文本，这样我就可以将结果复制并粘贴到我的js文件中，有没有办法修复我的代码，或者有更好的方法呢？
附言:我对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>
回答 1
Stack Overflow用户
发布于 2016-11-22 05:47:51
首先，我要说的是：
- 不要在循环中使用
document.write()。它会重写文档本身。当字符串是多行字符串时， - 会使用反引号(`)对其进行换行。
- 最好使用
pre标记来显示带格式数据，如使用JSON或任何使用while循环的code代码。注意D15块中的incrementer和D14，以防止循环。H217G218
我认为下面的解决方案对你有效。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40729742
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号