使JavaScript随机报价生成器每天生成一个报价

我为我的Angular应用程序创建了一个随机报价生成器。该组件的代码如下所示：使JavaScript随机报价生成器每天生成一个报价

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

这与看起来像这样的数据拉：

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' 
    }, 
    ];

然后在我看来，我这样做：

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

的事情是，现在这将在每次组件重新加载时生成一个新的报价，这可能会在单个会话中多次。我现在意识到会更好的是把它作为一个每日报价生成器。所以如果日期发生变化，它只会产生一个新的报价。什么是最简单的方式来实现这样的事情？这是很容易产生的一周的日期和星期，像这样：

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

但我将如何计算时，以一周的变化一天火了一个新的实例？

来源

2017-10-12 Muirik

你为什么要在客户端上做这件事？只需在服务器上执行一次，每天一次。 – RobG

公平点。这将工作。但我仍然很好奇在客户端如何做到这一点。比如说，当你访问一个你可以读取的API（用于获取引号）时，但仅此而已。 – Muirik

也许通过使用PRNG并采用今天'Math.floor（Date.now（）/ 864e5）'种子的时间戳。因此我可以创建一个“随机”数字的可重复序列，例如洗牌这个数组，或者获取一个索引......或者更简单一些，比如'index =（Date.now（）/ 864e5^0xa702fa）％数组。长度' – Thomas

考虑一个服务器准备3个报价的方案：一个用于昨天，今天和明天。每一个新的一天，昨天都会被删除，并增加一个新的明天。这样客户的报价可以在午夜客户当地时间之后改变，并且每个人在当地同一天看到相同的报价。

地球上的地球与UTC的时差不超过14小时，因此如果服务器将按键设置为UTC，则每个客户端都将具有适当的引号数量，并且整个报价数据库不会在每次客户端更改时都推送到每个客户端。

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));

来源

2017-10-12 22:46:11 RobG

-1

一种方法，你可以采取通过localStorage保存在客户端上的当前日期。在您的组件中，检查我们的localStorage中是否有currentDay密钥，如果没有创建，请将currentDay值和qotd保存在对象的内部。

下次重新载入组件时，您应该已经在localStorage中分配了一个qotd，因此我们所做的是检查localstorage中保存的日期以及我们生成的当前日期。如果它们不同，我们知道这一天已经改变。

//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) 
     } 

     } 
    }

来源

2017-10-12 22:54:46

虽然我喜欢这种方法，但它实际上并不奏效。现在，通过上面的实现，每次组件加载时加载新的报价，而不是每天只加载一次。目前正在解决这个问题。 – Muirik

使JavaScript随机报价生成器每天生成一个报价

回答

相关问题