每2秒随机化图片Javascript

Question

我想在我的网页中每2秒随机分配三张图片。

当前这是我的代码

function randomImage() {
  var fileNames = [
    "image1.png",
    "image2.jpg",
    "image3.png"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById('#background').innerHTML = 'url(' +
    fileNames[randomIndex] + ')';
}
randomImage();
setInterval(randomImage, 1000);

我认为这是语法错误，因为没有任何显示。我已经审核了几次，但是由于我对Java还是很陌生，所以要花很长时间。 请帮忙，谢谢！

Answer 1

应该是

public class SQRT {
    public
    static double sqrt(double x, double epsilon) {
        double error, y = x;
        int count = 0; 
        do { 
            y = 0.5 * (y + x/y);
            if(x > y*y){
                error = x - y*y;

            }
            else{
                error = y*y - x;
                count++;
            }
        } while (error > epsilon);
        return y;
    } 
    public static void main(String[] args) {
        System.out.println("Sqrt of 3.1415 is " + sqrt(3.1415, 0.0001));
    }
}

Answer 2

我认为这应该可行（注意：未经测试的代码）：

df1 %>% 
  left_join(lookup_df, by = "state_abbrev") %>% 
  mutate(state_name.x = coalesce(state_name.x, state_name.y)) %>% 
  rename(state_name = state_name.x) %>%
  select(-state_name.y)

Answer 3

您需要设置目标元素的style.backgroundImage属性，而不是innerHtml。同样，在使用getElementById DOM查询时，您不应仅包含ID的名称。＃p

function randomImage() {
  var fileNames = [
      "image1.png",
      "image2.jpg",
      "image3.png"
    ],
    randomIndex = Math.floor(Math.random() * fileNames.length),
    backgroundImage = 'url(' + fileNames[randomIndex] + ')';

  document.getElementById('background').style.backgroundImage = backgroundImage;
}

randomImage();
setInterval(randomImage, 1000);

Answer 4

.innerHTML将字符串解析为HTML，如果您想更改图像位置的url，则有两种常见的情况适用：

使用<img>标签

     <img src="image1.png">
     document.querySelector('img').src = `image${i}.png`;

使用样式属性的JS属性imageBackground

     <figure class='bkg'></figure>
     document.querySelector('.bkg').style.imageBackground = `url(image${i}.png)`;

---

似乎有些滞后，但是索引是随机的，因此：

  

2sec图像1，2sec图像1，2sec图像1等等... 已经具有相同索引的6sec

长度为3的随机索引出现索引的机会是33％。请注意控制台每2秒记录一次索引。

---

此演示使用<b>属性的<img>属性切换实际标签（用<div>或display替换实际的标签。

演示

[style]

function randomImage() {
  var images = Array.from( document.querySelectorAll('b'));
  var randomIndex = Math.floor(Math.random() * images.length);
  console.log(randomIndex);
  for (let img of images) {
    img.style.display = '';
  }
  images[randomIndex].style.display = 'block';
}

setInterval(randomImage, 2000);

b {
  display: none;
  font-size: 40vh;
  text-align: center;
}

.as-console-wrapper {
  width: 30%;
  margin-left:70%;
  min-height: 100%
}

Answer 5

尝试一下：

var ele = document.getElementById ('background') ;

var fileNames = [
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et"
] ;

function randomImage() {
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  ele.style.backgroundImage = 'url(' + fileNames[randomIndex] + ')' ;
}

randomImage() ;
setInterval(randomImage, 1000) ;

#background { width: 200px; height:150px; }

<p id="background"></p>