代码之家 › 专栏 › 技术社区 › Federico

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

html javascript

Federico · 技术社区 · 6 年前

基本上,我有一个从文件夹中选取两个不同随机图像的函数。目前我正在使用 onClick="window.location.reload() 每次单击时运行函数。

不管怎样,我可以称之为Funcion吗 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>

1 回复 | 直到 6 年前

Alex 6 年前

理想情况下,也不需要使用Ajax。

我只是用了一个 addEventListener('click'...) 和 encapsulated 你的代码。

点击屏幕,图像将随机改变。

注意: 养成增加( ; )在需要的地方,javascript并不严格(除非使用 "use strict" )但是在将来它会引起很多的错误。另外,使用逗号( ' 或 " )在你的属性中 HTML .

读 Javascript Style Guide 由W3学校编写,他们做一个很好地向新手解释著名的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>