Javascript 如何解决Safari上三个js在我的网页上触发的错误？
我的朋友经营着一家在线广播电台，所以在他的生日那天，我为他创建了一个网页。我是javascript新手，所以这对我来说是一次很好的学习经历。经过一段时间的摆弄，我成功地让它在台式机和手机上顺利工作。然而，我没能在手机上测试，当我昨天把它给他看的时候，它就不起作用了 因此，我在Browserstack上获得了一个免费帐户，并发现了Safari上产生的错误，但我不知道如何着手修复它们 以下是该页面的链接： 先编码，然后是下面的错误Javascript 如何解决Safari上三个js在我的网页上触发的错误？,javascript,css,three.js,safari,webgl,Javascript,Css,Three.js,Safari,Webgl,我的朋友经营着一家在线广播电台，所以在他的生日那天，我为他创建了一个网页。我是javascript新手，所以这对我来说是一次很好的学习经历。经过一段时间的摆弄，我成功地让它在台式机和手机上顺利工作。然而，我没能在手机上测试，当我昨天把它给他看的时候，它就不起作用了 因此，我在Browserstack上获得了一个免费帐户，并发现了Safari上产生的错误，但我不知道如何着手修复它们 以下是该页面的链接： 先编码，然后是下面的错误 <!DOCTYPE html> <html&g
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> The Hatch Radio Station </title>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
overflow: hidden;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
flex-direction: column;
justify-content: center;
background: black;
color: white;
font-size: 1cm;
font-family: 'Anton', sans-serif;
}
.horizcontainer {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
flex-direction: row;
justify-content: center;
}
#c {
width:100vh;
height:100vh;
}
.overlay {
position: absolute;
width:100%;
height:100%;
color: white;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
flex-direction: column;
justify-content: center;
}
#Schedule {
font-size: 0.5cm;
}
</style>
<script src="https://threejs.org/build/three.js"> </script>
</head>
<body>
<div class="horizcontainer">
<canvas id="c">
</canvas>
</div>
<div class="overlay">
<div>
THE HATCH
</div>
<div id="Schedule">
Next Live Session: Martin Robinson @ 8:00pm 3rd May
</div>
<iframe id="player" width="400px" height="50" src="https://s1.citrus3.com:2000/AudioPlayer/TheHatch?mount=/stream&"></iframe>
</div>
</body>
<script>
class Section {
constructor(zpos, sectionlist){
let hatchsize = sectionlist.hatchsize
let wallthickness = sectionlist.wallthickness
let sectionsize = sectionlist.sectionsize
let ladderoffsetfromwall = sectionlist.ladderoffsetfromwall
let ladderwidth = sectionlist.ladderwidth
let ladderheight = sectionlist.ladderheight
let material = sectionlist.material
let ladderhorizwidth = hatchsize - (2 * (ladderoffsetfromwall + wallthickness))
this.allobjects = []
this.right = new THREE.BoxGeometry(wallthickness, hatchsize, sectionsize);
this.rightwall = new THREE.Mesh(this.right, material);
scene.add(this.rightwall)
this.rightwall.position.x = hatchsize /2
this.left = new THREE.BoxGeometry(wallthickness, hatchsize, sectionsize);
this.leftwall = new THREE.Mesh(this.left, material);
scene.add(this.leftwall);
this.leftwall.position.x = (hatchsize / 2) * -1
this.ttop = new THREE.BoxGeometry(hatchsize, wallthickness, sectionsize);
this.ttopwall = new THREE.Mesh(this.ttop, material);
scene.add(this.ttopwall);
this.ttopwall.position.y = hatchsize / 2
this.bottom = new THREE.BoxGeometry(hatchsize, wallthickness, sectionsize);
this.bottomwall = new THREE.Mesh(this.bottom, material);
scene.add(this.bottomwall);
this.bottomwall.position.y = (hatchsize / 2) * -1
this.leftladdergeom = new THREE.BoxGeometry(ladderwidth, ladderheight, sectionsize);
this.leftladder = new THREE.Mesh(this.leftladdergeom, material);
scene.add(this.leftladder);
this.leftladder.position.y = ((hatchsize / 2) * -1) + wallthickness
this.leftladder.position.x = ((hatchsize / 2) * -1) + wallthickness + ladderoffsetfromwall
this.rightladdergeom = new THREE.BoxGeometry(ladderwidth, ladderheight, sectionsize);
this.rightladder = new THREE.Mesh(this.rightladdergeom, material);
scene.add(this.rightladder);
this.rightladder.position.y = ((hatchsize / 2) * -1) + wallthickness
this.rightladder.position.x = ((hatchsize / 2)) - wallthickness - ladderoffsetfromwall
this.horizladdergeom = new THREE.BoxGeometry(ladderhorizwidth, ladderheight, ladderwidth);
this.horizladder = new THREE.Mesh(this.horizladdergeom, material);
scene.add(this.horizladder);
this.horizladder.position.y = ((hatchsize / 2) * -1) + wallthickness
var hue = Math.floor(Math.random() * 360).toString()
var color = new THREE.Color("hsl(" + hue + ", 100%, 50%)");
this.light = new THREE.PointLight(color, 1, 0, 1000)
let innergap = (hatchsize - (1 * wallthickness))
let lightposx = (Math.random() * innergap) - (innergap / 2)
let lightposy = (Math.random() * innergap) - (innergap / 2)
this.light.position.set(lightposx, lightposy, 0)
scene.add(this.light);
this.allobjects.push(this.rightwall)
this.allobjects.push(this.leftwall)
this.allobjects.push(this.ttopwall)
this.allobjects.push(this.bottomwall)
this.allobjects.push(this.leftladder)
this.allobjects.push(this.rightladder)
this.allobjects.push(this.horizladder)
this.translatez(zpos)
this.randomise()
this.light.position.z += zpos
}
translatez(zamount){
this.allobjects.map((anobject) => {
anobject.position.z += zamount
})
}
randomise(){
this.allobjects.map((anobject) => {
if(anobject.type == "Mesh"){
let xscale = (Math.random() / 10) - 0.05 + 1
let yscale = (Math.random() / 10) - 0.05 + 1
anobject.scale.set(xscale, yscale, 1)
let rotate = (Math.random() /10) - 0.05
anobject.rotation.z = rotate
}
})
var hue = Math.floor(Math.random() * 360).toString()
var color = new THREE.Color("hsl(" + hue + ", 100%, 50%)");
this.light.color = color
}
}
class Hatch {
constructor(numsections){
this.hatchsize = 1; // xy size of hatch
this.wallthickness = 0.1
this.sectionsize = 0.37; // depth of each section
this.ladderoffsetfromwall = 0.178
this.ladderwidth = 0.078
this.ladderheight = 0.078
this.material = new THREE.MeshPhongMaterial({color: 0x696969});
this.sections = []
this.numsections = numsections
this.firstsectionindex = 0
this.overlap = 0.1
this.generatesections()
}
addsection(){
let zpositionofnew = (this.sections.length * (this.sectionsize - this.overlap ) * -1) + this.overlap
this.sections.push(new Section(zpositionofnew, this))
}
generatesections(){
for (var i = 0; i < this.numsections; i++) {
this.addsection()
this.sections[i].light.intensity /= (this.numsections - i)
}
}
translatez(zamount){
this.sections.map((asection => {asection.translatez(zamount)}))
}
rotate(){
let firstsection = this.sections[this.firstsectionindex]
if (firstsection.bottomwall.position.z + (this.sectionsize / 2) > camera.position.z + 0.2){
this.firstsectionindex += 1
if (this.firstsectionindex == this.sections.length) {
this.firstsectionindex = 0
}
firstsection.translatez(this.sections.length * (this.sectionsize - this.overlap ) * -1) + this.overlap
firstsection.randomise()
}
}
}
class Cyclic {
constructor(period, range) {
this.period = period
this.range = range
}
getval(numiterations) {
// numiterations will be big Int16Array
let yposition = numiterations % this.period
let yangle = Math.sin((Number(yposition) / this.period) * Math.PI * 2)
return yangle * this.range
}
}
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setPixelRatio( 1 );
// change fontsize
let reldist = 0
if (canvas.clientHeight > canvas.clientWidth) {
reldist = canvas.clientWidth
}
else {
reldist = canvas.clientHeight
}
const fov = 75;
const aspect = 1; // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix()
camera.position.z = 1;
const scene = new THREE.Scene();
myhatch = new Hatch(35)
renderer.render(scene, camera);
let numiterations = 0
ycyclic = new Cyclic(10 * 7, 0.037)
xcyclic = new Cyclic(31 * 6, 0.015)
angcyclic = new Cyclic(27 * 7, 0.022)
advancecamera = function() {
numiterations += 1
camera.position.y = ycyclic.getval(numiterations)
camera.position.x = xcyclic.getval(numiterations)
camera.rotation.z = angcyclic.getval(numiterations)
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix()
myhatch.translatez(0.006)
myhatch.rotate()
renderer.render(scene, camera);
};
setInterval(advancecamera, 17)
</script>
</html>
哈奇电台
身体{
保证金：0；
溢出：隐藏；
显示：-webkit盒；/*旧版-iOS 6-，Safari 3.1-6，BB7*/
显示：-webkit盒；/*旧版-iOS 6-，Safari 3.1-6，BB7*/
显示器：-ms flexbox；/*TWEENER-IE 10*/
显示：-webkit flex；/*新增-Safari 6.1+.iOS 7.1+，BB10*/
显示：flex；/*新，规范-Firefox、Chrome、Opera*/
弯曲方向：立柱；
证明内容：中心；
背景：黑色；
颜色：白色；
字号：1厘米；
字体系列：“安东”，无衬线；
}
.horizcontainer{
显示：-webkit盒；/*旧版-iOS 6-，Safari 3.1-6，BB7*/
显示器：-ms flexbox；/*TWEENER-IE 10*/
显示：-webkit flex；/*新增-Safari 6.1+.iOS 7.1+，BB10*/
显示：flex；/*新，规范-Firefox、Chrome、Opera*/
弯曲方向：行；
证明内容：中心；
}
#c{
宽度：100vh；
高度：100vh；
}
.覆盖{
位置：绝对位置；
宽度：100%；
身高：100%；
颜色：白色；
显示：-webkit盒；/*旧版-iOS 6-，Safari 3.1-6，BB7*/
显示器：-ms flexbox；/*TWEENER-IE 10*/
显示：-webkit flex；/*新增-Safari 6.1+.iOS 7.1+，BB10*/
显示：flex；/*新，规范-Firefox、Chrome、Opera*/
弯曲方向：立柱；
证明内容：中心；
}
#时间表{
字体大小：0.5cm；
}
舱口
下一个现场会议：Martin Robinson@5月3日晚上8:00
班级{
建造商（zpos，分项清单）{
让hatchsize=sectionlist.hatchsize
让墙厚度=截面列表。墙厚度
让sectionsize=sectionlist.sectionsize
让ladderoffsetfromwall=截面列表。ladderoffsetfromwall
让ladderwidth=sectionlist.ladderwidth
让ladderheight=sectionlist.ladderheight
let material=sectionlist.material
让ladderhorizwidth=图案填充-（2*（ladderoffsetfromwall+wallthickness））
this.allobjects=[]
this.right=新的三个.BoxGeometry（壁厚、阴影大小、截面尺寸）；
this.rightwall=新的三个网格（this.right，材质）；
scene.add（this.rightwall）
此.rightwall.position.x=hatchize/2
this.left=新的三个.BoxGeometry（壁厚、阴影大小、截面尺寸）；
this.leftwall=新的三点网格（this.leftwall，材质）；
添加（this.leftwall）；
this.leftwall.position.x=（hatchsize/2）*-1
this.ttop=新的三箱几何图形（舱口大小、壁厚、截面尺寸）；
this.ttopwall=新的三个网格（this.ttop，材料）；
scene.add（this.ttopwall）；
此.ttopwall.position.y=hatchsize/2
this.bottom=新的三个.BoxGeometry（阴影大小、壁厚、截面尺寸）；
this.bottomwall=新的三个网格（this.bottom，材质）；
场景。添加（此。底墙）；
this.bottomwall.position.y=（hatchsize/2）*-1
this.leftladdergeom=新的三个.BoxGeometry（钢包宽度、钢包高度、截面尺寸）；
this.leftladder=新的三点网格（this.leftladdergeom，材质）；
添加（此.leftladder）；
这个.leftladder.position.y=（（hatchsize/2）*-1）+壁厚
此.leftladder.position.x=（（hatchsize/2）*-1）+壁厚+梯段偏移量
this.rightladdergeom=新的三个.BoxGeometry（钢包宽度、钢包高度、截面尺寸）；
this.rightladder=新的三个网格（this.rightladdergeom，材质）；
scene.add（this.rightladder）；
此.rightladder.position.y=（（阴影大小/2）*-1）+壁厚
this.rightladder.position.x=（（hatchsize/2））-wallthickness-ladderoffsetfromwall
this.horizladdergeom=新的三个.BoxGeometry（ladderhorizwidth、ladderheight、ladderwidth）；
this.horizladder=新的三个网格（this.horizladdergeom，材质）；
场景。添加（此。水平梯子）；
this.horizladder.position.y=（（hatchsize/2）*-1）+壁厚
var hue=Math.floor（Math.random（）*360）.toString（）
var color=新的三种颜色（“hsl（“+hue+”，100%，50%）”）；
this.light=新的三点光源（颜色，1,0,1000）
设innergap=（图案填充-（1*壁厚））
设lightposx=（Math.random（）*