用JS写一个简单的类
时间: 2023-09-20 16:03:00 浏览: 44
好的,以下是用JS写一个简单的类的示例代码:
```javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHi() {
console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
}
}
const john = new Person('John', 30);
john.sayHi();
```
这个类叫做`Person`,有两个属性`name`和`age`,以及一个方法`sayHi`。`constructor`方法在创建新对象时被调用,用来初始化属性值。`sayHi`方法用来打印出一个人的姓名和年龄。我们创建了一个叫做`john`的新对象,并且调用了它的`sayHi`方法,输出了`Hi, my name is John and I'm 30 years old.`。
相关问题
用js写一个菜谱分类网页
好的,以下是一个简单的菜谱分类网页的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜谱分类</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.category {
width: 200px;
height: 200px;
margin: 20px;
background-color: #f2f2f2;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 2px 2px 5px #888888;
}
.category:hover {
background-color: #e6e6e6;
}
.category img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>菜谱分类</h1>
<div class="container">
<div class="category" onclick="showRecipes('breakfast')">
<img src="https://picsum.photos/id/1004/300/200" alt="早餐">
<h3>早餐</h3>
</div>
<div class="category" onclick="showRecipes('lunch')">
<img src="https://picsum.photos/id/1015/300/200" alt="午餐">
<h3>午餐</h3>
</div>
<div class="category" onclick="showRecipes('dinner')">
<img src="https://picsum.photos/id/1025/300/200" alt="晚餐">
<h3>晚餐</h3>
</div>
<div class="category" onclick="showRecipes('dessert')">
<img src="https://picsum.photos/id/1062/300/200" alt="甜品">
<h3>甜品</h3>
</div>
</div>
<script>
function showRecipes(category) {
// 在此处编写展示指定分类菜谱的代码
console.log('展示' + category + '菜谱');
}
</script>
</body>
</html>
```
这个网页使用了 HTML 和 CSS 来创建一个包含四个分类的容器,并在每个分类中显示一个图片和标题。当用户点击某个分类时,会触发 `showRecipes` 函数来展示该分类的菜谱。请根据自己的需要修改图片和标题,并在 `showRecipes` 函数中编写展示菜谱的代码。
用js写一个凉菜类介绍网页
好的,以下是一个简单的凉菜类介绍网页的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>凉菜介绍</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.card {
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
margin: 20px;
width: 300px;
padding: 20px;
border-radius: 5px;
transition: transform 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.05);
}
.card img {
max-width: 100%;
border-radius: 5px;
}
.card h2 {
font-size: 20px;
margin-top: 10px;
margin-bottom: 5px;
}
.card p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
.card a {
color: #ff6600;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease-in-out;
}
.card a:hover {
color: #cc5500;
}
</style>
</head>
<body>
<h1>凉菜介绍</h1>
<div class="container">
<div class="card">
<img src="https://i.imgur.com/Nx6mZck.jpg" alt="拌黄瓜">
<h2>拌黄瓜</h2>
<p>清爽可口的拌黄瓜是夏季常见的凉菜之一。将黄瓜切成薄片,加入调料拌匀即可。</p>
<a href="#">了解更多</a>
</div>
<div class="card">
<img src="https://i.imgur.com/7l7Kza5.jpg" alt="凉拌海带">
<h2>凉拌海带</h2>
<p>富含蛋白质和多种营养物质的海带,是一道健康的凉菜。将海带切成丝,加入调料拌匀即可。</p>
<a href="#">了解更多</a>
</div>
<div class="card">
<img src="https://i.imgur.com/BEkDz93.jpg" alt="凉拌豆腐">
<h2>凉拌豆腐</h2>
<p>富含蛋白质和钙质的豆腐,是一道营养丰富的凉菜。将豆腐切成块状,加入调料拌匀即可。</p>
<a href="#">了解更多</a>
</div>
</div>
</body>
</html>
```
这个网页使用了 HTML、CSS 和 JavaScript。其中,HTML 用于定义页面结构,CSS 用于美化页面样式,JavaScript 用于实现交互效果。在这个示例中,我们使用了 flexbox 布局来实现卡片式的凉菜介绍,同时添加了 hover 效果和链接,以增强用户体验。