Tạo Trình tạo trích dẫn ngẫu nhiên bằng JavaScript Chỉ tạo một trích dẫn mỗi ngày

Question

Tôi đã tạo trình tạo trích dẫn ngẫu nhiên cho ứng dụng Angular của mình. Mã thành phần trông như thế này:

qotd = this.quotes[Math.floor(Math.random() * this.quotes.length)]; 

Đó là kéo từ dữ liệu mà trông như thế này:

quotes = [ 
    { 
     quote: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod magna magna, euismod tincidunt libero dignis.", 
     author: 'Sorato Violasa' 
    }, 
    { 
     quote: "Nullam dignissim accumsan magna vitae rhoncus. Phasellus euismod magna magna, euismod tincidunt libero dignis.", 
     author: 'Vito Dignaora' 
    }, 
    { 
     quote: "In tincidunt imperdiet augue, quis sollicitudin mi tincidunt ut.", 
     author: 'Hivalo Amettioa' 
    }, 
    { 
     quote: "hasellus accumsan erat vitae enim blandit, quis euismod ipsum sollicitudin.", 
     author: 'Grasha Plojiva' 
    }, 
    ]; 

Và sau đó theo quan điểm của tôi, tôi làm điều này:

<div class="quotes"> 
    <p class="quote"> 
     {{qotd.quote}} <br><br> 
     ~ {{qotd.author}} 
    </p> 
</div> 

Có điều là, ngay bây giờ điều này sẽ tạo ra một báo giá mới mỗi lần tải lại thành phần, có thể nhiều lần trong một phiên duy nhất. Những gì tôi nhận ra bây giờ sẽ là tốt hơn là để làm cho một máy phát điện báo giá hàng ngày. Vì vậy, nó sẽ chỉ tạo ra một báo giá mới nếu ngày thay đổi. Cách đơn giản nhất để thực hiện một cái gì đó như thế này là gì? Thật dễ dàng đủ để tạo ra ngày và ngày trong tuần, như thế này:

date = new Date(); 
    dayNumber = this.date.getDay(); 

Nhưng làm thế nào tôi sẽ tính toán khi ngày của những thay đổi trong tuần để bắn ra một trường hợp mới?

Answer 1

Xem xét sơ đồ nơi máy chủ chuẩn bị 3 trích dẫn: một cho ngày hôm qua, hôm nay và ngày mai. Mỗi ngày mới, ngày hôm qua bị xóa và ngày mai mới được thêm vào. Bằng cách đó, báo giá trên khách hàng có thể được thay đổi ngay sau nửa đêm giờ địa phương của khách hàng và mọi người đều thấy cùng một câu nói trên cùng một ngày địa phương.

Không nơi nào trên Trái đất dài hơn 14 giờ so với UTC, vì vậy nếu máy chủ căn cứ các khóa trên UTC, mỗi khách hàng sẽ có số lượng báo giá phù hợp và toàn bộ cơ sở dữ liệu báo giá không được đẩy tới mọi khách hàng mỗi lần thay đổi .

var quotes = { 
 
    '20171012':{quote:'one',author:'fred'}, 
 
    '20171013':{quote:'two',author:'mary'}, 
 
    '20171014':{quote:'three',author:'sue'} 
 
}; 
 

 
function showQuote(quotes) { 
 
    var d = new Date(); 
 
    var key = '' + d.getFullYear() + 
 
      ('0'+(d.getMonth()+1)).slice(-2) + 
 
      ('0'+d.getDate()).slice(-2); 
 
    return quotes[key] 
 
} 
 

 
// On 2017-10-13 shows quote: two, author: mary 
 
console.log(showQuote(quotes));

Answer 2

Một cách tiếp cận bạn có thể chụp được tiết kiệm ngày hiện tại trên máy khách qua localStorage. Trong thành phần của bạn, hãy kiểm tra xem chúng ta có khóa currentDay trong localStorage của chúng tôi hay không, nếu không tạo nó, hãy lưu giá trị currentDay và bên trong của một đối tượng là qotd.

Lần sau khi bạn tải lại thành phần của mình, bạn nên có một qotd được gán trong localStorage của bạn, vì vậy những gì chúng tôi làm là kiểm tra ngày lưu trong localstorage và hiện tại chúng tôi tạo ra. Nếu chúng khác nhau, chúng ta biết ngày đã thay đổi.

//PSUEDOCODE (haven't tested, but should give you a good idea) 
    function(){ 
    this.qotd = this.quotes[Math.floor(Math.random() * this.quotes.length)]; 

    if(!window.localStorage.getItem('todayDate')){  
     let currentDay = new Date().getDay(); 
     let storageItem = JSON.stringify({ 
      currentDay, 
      qotd: this.qotd 
     }) 
     window.localStorage.setItem('currentDay',storageItem) 
     } 
     else { 
     var existingQOTD = JSON.parse(window.localStorage.getItem('todayDate')); 
     let currentDay = new Date().getDay(); 
     if(existingQOTD.currentDay !== currentDay){ 
     let storageItem = JSON.stringify({ 
      currentDay, 
      qotd: this.qotd 
     }) 
      window.localStorage.setItem('currentDay', storageItem) 
     } 

     } 
    }