簡體   English   中英

如何使用 Javascript 隨機更改計時器上的 HTML 元素 - 跨越 web,而不僅僅是在瀏覽器中?

[英]How do I randomly change an HTML element on a timer using Javascript - across the web, not just within the browser?

對不起,如果我的問題措辭很愚蠢 - 我不知道如何解釋,基本上,我正在練習使用 HTML、CSS 創建一個網站。 和 JavaScript,我的頁面上有一個圖片元素。 在其他元素中。

我想要實現的是每小時隨機更改該圖片。 通過在我的瀏覽器中運行它,我可以完美地做到這一點。 我的問題是,如何為所有用戶隨機更改一個元素(整個互聯網)?

我寫它的方式,它只在我的瀏覽器中運行隨機圖片 function,並在我每次刷新頁面時重置。

我目前正在使用 setInterval() 並不斷檢查時間以查看當前 date.getMinutes() == 0,然后我認為這是一個新小時,我調用 changePicHourly() function。 我沒有問題讓它工作。 但是,很明顯,我頁面的每個訪問者都會看到不同的圖片。 我不想要這個。 我想要跨越時間和空間的一致性。 哈哈。

我不是在要求具體的編碼說明——我更想理解這個概念。 如何在互聯網范圍內改變元素?

希望我說清楚了。 謝謝!!

這將是一種方法。 使用getTime()以秒為單位檢索 UTC 時間,轉換為小時,然后使用最后一位作為世界時間參考來移動圖像。

如果您想在 99 張圖像之間切換,請使用hour變量的最后兩位。 如果你想在更多圖像之間切換,那么你就會理解邏輯......

 const d = new Date(), hours = d.getTime()/(1000*60*60), n = Math.round(hours/100000), imgs = [ 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300', 'https://picsum.photos/id/237/200/300' ]; document.getElementById('root').innerHTML = '<img src=' + imgs[n] + '/>';
 <div id="root"/>

這是一個略有不同的偽隨機數生成器,它基於從當前 UTC 小時計算的種子值:

 const d = new Date(), imgs = [...Array(100)].map((c, i) => 'https://picsum.photos/id/X/200/300'.replace("X", 216 + i)); // define a seed-based random number generator (later: "rand()"), as suggested in // https://stackoverflow.com/questions/521295/seeding-the-random-number-generator-in-javascript function sfc32(a, b, c, d) { return function() { var t = (a + b) | 0; a = b ^ b >>> 9; b = c + (c << 3) | 0; c = (c << 21 | c >>> 11); d = d + 1 | 0; t = t + d | 0; c = c + t | 0; return (t >>> 0) / 4294967296; } } // create a seed, based on the current hour in UTC time: const seed = Math.round(new Date().getTime() / (1000 * 60 * 60)); // initialise the number generator rand() with this seed: const rand = sfc32(0x9E3779B9, 0x243F6A88, 0xB7E15162, seed ^ 0xDEADBEEF); // carry out some initial "mixing"... for (let n = 15; n--;) rand(); // now rand() will deliver a pseudo-random number that will be reproducible for identical seeds. let src = `<img src="${imgs[Math.floor(rand()*100)]}">`; document.getElementById("root").innerHTML = `<img src="${imgs[Math.floor(rand()*imgs.length)]}">`;
 <div id="root"></div>

在表達式[...Array(100)]中,我將可供選擇的圖片數量限制為 100。您當然可以在這里使用任意數量的圖片。

您必須在前端執行此操作,因為您不知道用戶何時會加載您的頁面。

有一組圖像,比如 24 張,一天中的每個小時一張。

當頁面加載時,您會在某個固定點獲得當前時間 - 假設您使用 UTC,您不能為此使用本地時間。 一旦你有了這個標准時間,計算過去的最后一個小時。 使用它來查找要顯示的圖像。

也可以使用它來設置 60 分鍾的超時時間 - 當前分鍾。

在超時時,移動到下一個圖像並設置另一個 60 分鍾的超時 - 當前分鍾。 所以它繼續。

這樣,世界上任何地方的任何用戶都將看到相同的背景圖像,給出或接受一些時間不准確性(這取決於例如他們的系統當時正在做什么)。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM