換一個圓圈的影像-有解無憂

我有一個按鈕和一個點擊更改背景影像的功能

但它只作業一次。如何使單擊按鈕始終有效并且影像的更改不會停止，而是依次更改？

function myFunction() {
   document.getElementById("image").style.backgroundImage = "url(https://i.picsum.photos/id/187/200/200.jpg?hmac=b_8v5WKwO-_jC2FqfZOP_n9niD1jQvZHB31GoegK2Ww)";
}

#image {
  width: 200px;
  height: 200px;
  background-image: url("https://i.picsum.photos/id/1008/200/200.jpg?hmac=I0T_cpYR-61pUlB0jVB4I5B7tL0fvzN5MgslAOirM50");
}
  
button {
  margin-bottom: 10px;
}

<button onclick="myFunction()">Change</button>

<div id="image"></div>

uj5u.com熱心網友回復：

function myFunction() {
               document.getElementById("image").classList.toggle("newBg");
            }

 #image {
      width: 200px;
      height: 200px;
      background-image: url("https://i.picsum.photos/id/1008/200/200.jpg?hmac=I0T_cpYR-61pUlB0jVB4I5B7tL0fvzN5MgslAOirM50");
    }
   
   
   #image.newBg{
    background-image: URL("https://i.picsum.photos/id/187/200/200.jpg?hmac=b_8v5WKwO-_jC2FqfZOP_n9niD1jQvZHB31GoegK2Ww");
    }
      
    button {
      margin-bottom: 10px;
    }

<button onclick="myFunction()">Change</button>
    
    <div id="image"></div>

如果您想在每次單擊時更改影像，則需要切換它。您可以簡單地使用許多其他解決方案中的基于類的方法。

例如：

function myFunction() {
           document.getElementById("image").classList.toggle("newBg");
        }

#image {
  width: 200px;
  height: 200px;
  background-image: url("https://i.picsum.photos/id/1008/200/200.jpg?hmac=I0T_cpYR-61pUlB0jVB4I5B7tL0fvzN5MgslAOirM50");
}

#image.newBg{
background-image: URL("https://i.picsum.photos/id/187/200/200.jpg?hmac=b_8v5WKwO-_jC2FqfZOP_n9niD1jQvZHB31GoegK2Ww");
}
  
button {
  margin-bottom: 10px;
}

<button onclick="myFunction()">Change</button>

<div id="image"></div>

uj5u.com熱心網友回復：

使用這個js檔案。它會作業。

const id=document.getElementById("image");
let num=1;
async function myFunction() {
 while(true){
    await sleep();
 }  
 }

async function sleep(){

const slp= await fun();
console.log("2 sec later ");
createImg();
}

function fun(){
const promise=new Promise(function(resolve,reject){
setTimeout(function(){
    resolve("");
},2000)
})
return promise;
}
function createImg()
{
    let url = `url(https://source.unsplash.com/random/200x200?sig=${num})`;
    id.style.backgroundImage=url;
    num  ;
}

uj5u.com熱心網友回復：

有一個名為邊框半徑的 CSS 元素將其應用于影像，它將變為圓形

border-radius: 50%;

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/425028.html

標籤：javascript html css

上一篇：如何創建這樣的文本效果（HTML/CSS）？帶有插入符號的文本

下一篇：如何縮短按鈕值？-CSS