Question

基本上，我具有从文件夹中选择两个不同随机图像的功能。此刻，我每次使用onClick="window.location.reload()来运行该函数。

我是否可以在不刷新页面的情况下调用函数onClick？

谢谢。

body {
  border: 0;
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font: 2.1vw/1.2em HelveticaNeue, Arial, sans-serif;
  letter-spacing: .02em
}

.logo {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  text-align: center;
  z-index: 100
}

#one,
#two {
  position: fixed;
  width: 50vw;
  top: 0;
  display: table
}

#one {
  left: 0;
  text-align: right
}

#two {
  right: 0;
  text-align: left
}

.inner {
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
  width: 100vw
}

<script>
  var IMG = new Array()
  IMG[0] = 'https://cdn.shopify.com/s/files/1/0224/5205/products/Siser_EasyWeed_Bright_Red_2048x.jpg?v=1523704262'
  IMG[1] = 'http://thezilla.com/wp-content/uploads/2015/07/blue.png'
  IMG[2] = 'http://d18nh7ureywlth.cloudfront.net/wp-content/uploads/6901-vibrant-green.jpg'

  var j = 0
  var p = IMG.length;
  var preBuffer = new Array()
  for (i = 0; i < p; i++) {
    preBuffer[i] = new Image()
    preBuffer[i].src = IMG[i]
  }
  var WI1 = Math.floor(Math.random() * p);
  var WI2 = Math.floor(Math.random() * (p - 1));
  if (WI2 >= WI1) {
    WI2 += 1;
  }

  function showImage1() {
    document.write('<img src="' + IMG[WI1] + '">');
  }

  function showImage2() {
    document.write('<img src="' + IMG[WI2] + '">');
  }
</script>
<div class=logo onClick="window.location.reload()"><span class=inner>( RANDOM DYPTICHS )</span></div>
<div id=one><span class=inner><script>showImage1();</script></span></div>
<div id=two><span class=inner><script>showImage2();</script></span></div>

Answer 1

理想情况下，也无需使用Ajax。

我只是使用了addEventListener('click'...)和encapsulated您的代码。

单击屏幕，图像将随机更改。

要注意：养成在需要的地方添加（;）的习惯，Java对冒号不是严格的（除非使用"use strict"），但它可能导致冒号将来有很多错误。另外，请在'中的属性中使用逗号（"或HTML）。

阅读W3 Schools撰写的Javascript Style Guide，他们做了   向新手介绍著名的javascript约定的好工作   遍布全球。

var IMG = new Array(
  'https://cdn.shopify.com/s/files/1/0224/5205/products/Siser_EasyWeed_Bright_Red_2048x.jpg?v=1523704262',
  'https://thezilla.com/wp-content/uploads/2015/07/blue.png',
  'https://d18nh7ureywlth.cloudfront.net/wp-content/uploads/6901-vibrant-green.jpg');

function getRandomImagePair() {
  var j = 0;
  var p = IMG.length;
  var preBuffer = new Array();

  for (i = 0; i < p; i++) {
    preBuffer[i] = new Image();
    preBuffer[i].src = IMG[i];
  }

  WI1 = Math.floor(Math.random() * p);
  WI2 = Math.floor(Math.random() * (p - 1));

  if (WI2 >= WI1) {
    WI2 += 1;
  }

  document.querySelector('#imgOne').src = IMG[WI1];
  document.querySelector('#imgTwo').src = IMG[WI2];
}

getRandomImagePair();

document.querySelector('.logo .inner').addEventListener('click', e => {
  getRandomImagePair();
});

body {
  border: 0;
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font: 2.1vw/1.2em HelveticaNeue, Arial, sans-serif;
  letter-spacing: .02em
}

.logo {
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  text-align: center;
  z-index: 100;
}

#one,
#two {
  position: fixed;
  width: 50vw;
  top: 0;
  display: table
}

#one {
  left: 0;
  text-align: right
}

#two {
  right: 0;
  text-align: left
}

.inner {
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
  width: 100vw
}

<div class='logo'><span class='inner'>( RANDOM DYPTICHS )</span></div>
<div id='one'><span class='inner'><img id="imgOne" src="#" /></span></div>
<div id='two'><span class='inner'><img id="imgTwo" src="#" /></span></div>

调用函数而不是重新加载页面

1 个答案: