HTML + CSS + JQ + PHP 完成点菜器操作:

ㅤㅤ ㅤㅤ

于 2020-05-18 15:44:20 发布

阅读量584

点赞数 3

CC 4.0 BY-SA版权

分类专栏： php 文章标签： php

本文链接：https://blog.csdn.net/m0_46532221/article/details/106194126

本文介绍了如何利用HTML、CSS、jQuery（JQ）和PHP来创建一个点菜器操作。首先，进行了前期准备工作，包括移动端适配、引入jQuery库和创建包含菜品的文本文件。接着，详细讲解了HTML框架的构建、CSS样式设计以及JavaScript的编写，特别是按钮点击事件的处理。最后，阐述了PHP文件create.php的创建，用于处理获取的菜品信息并随机显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;