如何实现“使用jQuery的不可能简单的图像随机化器”.没有jQuery

How can the "Impossibly Simple Image Randomizer with jQuery" be accomplished.. without jQuery

本文关键字：jQuery 图像 简单 随机化 没有 不可能 何实现 实现 使用      更新时间：2023-09-26

我想在div中注入一个随机background-image。我遇到了以下代码，它使用 jQuery 库完美地完成了此操作：

设置图像数组： 

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];

使用先前定义的数组设置随机背景的div：

$('#div').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

事情是这样的 - 我想这样做而不必加载 jQuery 库。我喜欢上面代码的简单性，但我是Javascript语言的新手，我不知道重新格式化它以便在没有jQuery的情况下使用。

我花了一些时间寻找上述代码的Javascript替代品，但它们都相对较长或不必要地"忙碌"。非常感谢对此的任何帮助。

这也可以在普通JS中轻松完成：

var div = document.querySelector('#div');
div.style.backgroundImage = 'url(images/' + 
   images[Math.floor(Math.random() * images.length)] + ')';

一个普通的JavaScript代码可能是

document.getElementById('div').style.backgroundImage = 'url(images/'+images[Math.floor(Math.random() * images.length)]+')';

jQuery如此受欢迎的原因是因为它允许在所有平台和浏览器上创建如此清晰简洁的编码。因此，如果你真的打算在纯 JavaScript 中重现这种级别的清洁......我怀疑这是否可能。我可能会建议你尝试并重新创建它作为一个自学JavaScript的项目，但我怀疑有人能想出一个使用jQuery作为基础的更干净的解决方案。

相关文章：