• 前言
  大家好，我是_Peach，一名剛入行的前端，今天無聊寫了個小東西，記錄下
• 項目體驗
  點擊循環菜譜 再次點擊會暫停 哈哈哈哈哈！樣式有點丑 功能還是有的
  
• 功能實現思路

首先先定義一個菜譜數組，這里使用的主要方法是以下幾點

Math.random()?函數返回一個浮點數, ?偽隨機數在范圍從0到小于1，也就是說，從0（包括0）往上，但是不包括1（排除1），然后您可以縮放到所需的范圍。實現將初始種子選擇到隨機數生成算法;它不能被用戶選擇或重置。

Math.floor()?返回小于或等于一個給定數字的最大整數和

使用innerHTML來輸出結果到頁面上

使用setInterval循環，clearInterval來清除定時器

• 代碼實現
  html結構 h1標簽和按鈕

<h1></h1> <a href="javascript:;">今天中午吃啥子</a>

css代碼設置下樣式

* {padding: 0;margin: 0;}body {text-align: center;background: rgba(207, 213, 225);}h1 {margin: 50px auto;}a {display: inline-block;width: 20%;height: 50px;line-height: 50px;color: #fff;font-size: 18px;text-decoration: none;background: #f60;}

js代碼

let text = document.querySelector('h1');let btn = document.querySelector('a')let arr = ['手撕雞', '德記燒鵝', '煲仔飯', '麻辣香鍋', '古法窯雞','榮記燒鵝', '蒜蓉花甲飯', '酸菜魚', '重慶雞公煲', '干炒牛河', '湛江白切雞']let flag = true;btn.addEventListener('click', function () {if (flag) {btn.innerHTML = '不想吃，下一個'clearInterval(timer)timer = null;flag = false;} else {btn.innerHTML = '就吃這個'timer = setInterval(() => {outhtml();}, 100);flag = true;}})function outhtml() {text.innerHTML = arr[Math.floor(Math.random() * arr.length)];}let timer = setInterval(() => {outhtml();}, 100);

總結

以上是生活随笔為你收集整理的中午不知道吃啥子？今天来写一个随机菜谱的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。