HTML + CSS + JQ + PHP 完成点菜器操作:
前期准备工作:
-
引入viewport 移动端适配方案:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
通过cdn引入jq库:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
-
创建一个文件,并且文件中包含所有想要点的菜
- 名称为:stu.txt 下面 php中出现的stu.txt 为此文件
鱼香肉丝| 毛血旺| 辣炒鱿鱼丝| 宫爆鸡丁| 辣子鸡| 泡凤爪| 土豆烧排骨| 辣子鸡丁| 灯影牛肉| 干煸牛肉丝| 冬菜扣肉| 开水白菜| 东坡肘子| 干烧鱼| 宫保鸡丁| 川菜回锅肉| 川辣黄瓜| 麻婆豆腐| 夫妻肺片| 子姜鸭| ...............
-
创建一个空的文件,用来接收所点的菜的名称:
- 文件名设定为;user.txt
开始进行编写:
-
编写html框架:
<body> <div class="xx"> 点菜器 </div> <div class="header"> <input type="text" name="number"><button>随机出餐</button> </div> <div class="list"> </div> </body>
-
进行css样式层的搭建:
<style> .xx{ background-color:greenyellow; width: 100px; height: 60px; line-height: 60px; color: #FFF; border: 1px solid #ccc;