<html>
<head>
<title>Random manga</title>
<script src="./js/my.js"></script>
<link type="text/css" rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="al">
<div id="pic">
<img src="" id="img" style="visibility: hidden;">
</div>
<button id="btng" onclick="my()">Suggest me manga</button>
</div>
</body>
</html>
這是按鈕 div 和其他內容的 html 下面是 css
body
{
background : white;
color : black;
}
#pic
{
border-radius : 25px;
background-color : #f2f2f2;
-webkit-border-radius : 35px;
-moz-border-radius : 75px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
background-size : cover;
text-align : center;
height: 400px;
width: 400px;
background-size : cover;
background-repeat: no-repeat;
background-position: center;
}
#btng
{
backface-visibility: hidden;
background-color: #405cf5;
border-radius: 6px;
border-width: 0;
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
color: #fff;
font-size: 100%;
height: 44px;
line-height: 1.15;
margin: 12px 0 0;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition: all .2s,box-shadow .08s ease-in;
width: 50%;
}
#btng:focus {
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}
#al
{
text-align : center;
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
}
#img{
height: 100%;
width: 100%;
}
And below the function for onclick on button
function my(){
var bt=document.getElementById("btng");
bt.textContent = "Suggest me another";
var my = new Array("im/R.jpg","im/S.jpg","im/E.jpg");
var randomNum = Math.floor(Math.random() * my.length);
var backgroundImage = my[randomNum];
document.getElementById("img").src = my[randomNum];
document.getElementById("pic").style.backgroundImage=`url(${backgroundImage})`;
}
The onclick event only runs after the button is clicked twice or thrice sometimes I tried doing something to slove it but I was unsuccessful, is there any way to do it? Here is the live preview:- https://mangasuggestions.000webhostapp.com/index.html
Please click on buttons 4/5 times to get the problem I am facing.
uj5u.com熱心網友回復：
onclick 事件和功能正常作業。圖片沒有更新是因為和randomNum上一張一樣。
我們的目標是防止使用之前生成的相同數字。
一種方法是跟蹤最后生成的亂數，并重新生成直到它與前一個不同。
主要邏輯
let randomNum;
do {
randomNum = Math.floor(Math.random() * images.length);
} while (randomNum === prevRandomNum);
prevRandomNum = randomNum
完整代碼（對原始代碼進行一些修改）
// Keep track of the last random number
let prevRandomNum = -1
function my(){
const btn = document.getElementById("btng");
btn.innerText = "Suggest me another";
const images = ["im/R.jpg","im/S.jpg","im/E.jpg"];
let randomNum;
do {
randomNum = Math.floor(Math.random() * images.length);
} while (randomNum === prevRandomNum);
prevRandomNum = randomNum
const backgroundImage = images[randomNum];
document.getElementById("pic").style.backgroundImage=`url(${backgroundImage})`;
}
uj5u.com熱心網友回復：
請使按鈕型別=“按鈕”。它似乎作業。
<button id="btng" type="button" onclick="my()">Suggest me another</button>
uj5u.com熱心網友回復：
正如@AndrewLi 已經回答的那樣，生成的亂數可能與最后一個相同。
而不是多次生成新數字（使用 while 回圈）。
您可以從陣列中過濾掉當前顯示的影像。
function my(){
var bt=document.getElementById("btng");
bt.textContent = "Suggest me another";
var img = document.getElementById("img");
var my = new Array("/im/R.jpg","/im/S.jpg","/im/E.jpg").filter((src) => src !== new URL(img.src).pathname);
var randomNum = Math.floor(Math.random() * my.length);
var backgroundImage = my[randomNum];
document.getElementById("img").src = my[randomNum];
document.getElementById("pic").style.backgroundImage=`url(${backgroundImage})`;
}
但要使其作業，您需要提供陣列中影像的絕對路徑。
所以/im/R.jpg而不是im/R.jpg
uj5u.com熱心網友回復：
這可能是最有效的方法，無需過濾導致回圈的值或重新生成值，以防我們使用某些索引操作獲得重復值。
解釋
對于第一張影像，我們可以選擇陣列有效索引集中的任何影像，即0 to array.length - 1我們可以使用Math.floor(Math.random() * array.length). 然后我們將選定的索引存盤在一個變數currentImageIdx中。
對于下面的任何影像，我們生成一個step值，該值確定我們想要從當前索引移動到下一個值的步數。我們需要在1 to array.length - 1我們可以使用的范圍內選擇它，Math.floor(1 Math.random() * (arrayLength - 1))因為這將確保我們永遠不會繼續前進，以至于我們回到與當前相同的索引。然后，我們只需將該步長值添加到當前索引并使用模取余數以確保我們沒有超出范圍。
移動到下一個索引的示例
對于以下示例，假定具有 3 個值的陣列：
- 我們目前處于索引狀態
0，因此我們應該前進 1 或 2 步。如果我們繼續前進 3 個步驟，我們將0再次處于此狀態，因為(start index step) % array.length將轉換為(0 3) % 3 = 0并且我們將再次處于起始索引處。 - 如果我們處于索引 1，我們可以再次移動 1 或 2 步，但不能移動 3，因為
(start index step) % array.length會轉換為(1 3) % 3 = 1并且我們將再次處于起始索引。 - 這同樣適用于索引 2
這適用于任何大小的陣列。除了在陣列中只有一個元素的情況下，每次當然都會選擇一個元素。
let currentImageIdx = undefined;
function my() {
var bt = document.getElementById("btng");
bt.textContent = "Suggest me another";
var my = new Array("https://dummyimage.com/20x20/000/fff", "https://dummyimage.com/20x20/00FF00/000", "https://dummyimage.com/20x20/FF0000/000");
let backgroundImageIdx;
// it is imporant to check for undefined here as currentImageIdx != 0 would also trigger this case if it just was if(!currentImageIdx) and may produce the same picture twice
if (currentImageIdx !== undefined) backgroundImageIdx = getNextImage(currentImageIdx, my.length)
else backgroundImageIdx = Math.floor(Math.random() * my.length);
document.getElementById("img").src = my[backgroundImageIdx];
currentImageIdx = backgroundImageIdx;
console.log(`selected image ${currentImageIdx}`);
document.getElementById(
"pic"
).style.backgroundImage = `url(${my[backgroundImageIdx]})`;
}
function getNextImage(currentIndex, arrayLength) {
// generate random step value between 1 and array.length - 1
// with three elements: either 1 and 2
var step = Math.floor(1 Math.random() * (arrayLength - 1));
// add the step value to current index and make sure we're not out of bounds
console.log(`(${currentIndex} ${step}) % ${arrayLength} = ${(currentIndex step) % arrayLength}`)
return (currentIndex step) % arrayLength;
}<div id="al">
<div id="pic">
<img src="" id="img" style="visibility: hidden;">
</div>
<button id="btng" onclick="my()">Suggest me manga</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450908.html
標籤：javascript html css