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

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您的代码。

点击屏幕，图片会随机变化。

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

阅读 W3 Schools 编写的Javascript Style Guide ，他们很好地向新手解释了全球著名的 javascript 约定。

---

 var IMG = new Array( 'https://i.picsum.photos/id/562/200/200.jpg?hmac=F4ylYRNFPH6rDzYo48_NUieJXXI2yaMl9ElwGeFQHZo', 'https://i.picsum.photos/id/650/200/200.jpg?hmac=gu3C13pBxCSHokbnumczMYlmWRLt3CFGx1sDaPpfRnk', 'https://i.picsum.photos/id/67/200/200.jpg?hmac=sN5XCCMqqmBvgDbYmAowWy2VToCkSYP5igDL_iRxK3M'); 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>