中午不知道吃啥子?今天来写一个随机菜谱
生活随笔
收集整理的這篇文章主要介紹了
中午不知道吃啥子?今天来写一个随机菜谱
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- 前言
大家好,我是_Peach,一名剛入行的前端,今天無聊寫了個小東西,記錄下 - 項目體驗
點擊循環菜譜 再次點擊會暫停 哈哈哈哈哈!樣式有點丑 功能還是有的
- 功能實現思路
- 代碼實現
html結構 h1標簽和按鈕
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);總結
以上是生活随笔為你收集整理的中午不知道吃啥子?今天来写一个随机菜谱的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: CSS知识课堂
- 下一篇: 最近项目中公用的JS