影刀高级-JavaScript
导读：一、基础语法 1. 获取数据类型 2. 运算符号 **表示乘方 3. 格式转换&...
一、基础语法
1. 获取数据类型
2. 运算符号
**表示乘方
3. 格式转换
4.反定义方式
5.字符串操作
6. 数组开头插入元素
7. 结尾插入和删除开头
8. 删除结尾，返回删除值
9.删除指定位置
10. 转换字符串
11. 数组连接
12. 按什么排序
二、webAPI
1.document对象
神奇，终于学到上乘功法
2. 操作都在里面
三、实操案例
1. 动态网页
index.html，用qoder生成的：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>水果订单</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <!-- 标题 --> <h1>欢迎光临</h1> <!-- 水果卡片网格 --> <div> <div class="fruit-card card-pink" data-name="苹果" data-price="21"> <div></div> <div>苹果</div> <div>¥21</div> </div> <div class="fruit-card card-green" data-name="西瓜" data-price="19"> <div>🍉</div> <div>西瓜</div> <div>¥19</div> </div> <div class="fruit-card card-yellow" data-name="香蕉" data-price="23"> <div>🍌</div> <div>香蕉</div> <div>¥23</div> </div> <div class="fruit-card card-lime" data-name="柠檬" data-price="33"> <div>🍋</div> <div>柠檬</div> <div>¥33</div> </div> <div class="fruit-card card-orange" data-name="橘子" data-price="10"> <div>🍊</div> <div>橘子</div> <div>¥10</div> </div> <div class="fruit-card card-purple" data-name="葡萄" data-price="13"> <div>🍇</div> <div>葡萄</div> <div>¥13</div> </div> <div class="fruit-card card-pink2" data-name="樱桃" data-price="67"> <div></div> <div>樱桃</div> <div>¥67</div> </div> <div class="fruit-card card-green2" data-name="芒果" data-price="56"> <div></div> <div>芒果</div> <div>¥56</div> </div> <div class="fruit-card card-purple2" data-name="猕猴桃" data-price="32"> <div></div> <div>猕猴桃</div> <div>¥32</div> </div> </div> <!-- 操作按钮 --> <div> <button class="btn btn-green">新建订单</button> <button class="btn btn-green">保存订单</button> <button class="btn btn-green">删除商品</button> </div> <!-- 订单表格 --> <div> <table> <thead> <tr> <th>商品名称</th> <th>数量</th> <th>价格</th> <th>小计</th> </tr> </thead> <tbody id="order-body"> <!-- 动态添加行 --> </tbody> </table> <div> <span>合计</span> <span>¥0</span> </div> </div> <!-- 确认订单按钮 --> <button class="btn btn-confirm">确认订单</button> </div> <script src="script.js"></script> </body> </html>
sytle.css：
/* ===== 全局重置与基础样式 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
sans-serif;
background-color: #eef7f2;
color: #333;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 720px;
margin: 0 auto;
padding: 20px 10px 40px;
}
/* ===== 页面标题 ===== */
.page-title {
text-align: center;
font-size: 2.4rem;
font-weight: 700;
color: #1a8a7a;
margin-bottom: 28px;
letter-spacing: 4px;
}
/* ===== 水果卡片网格 ===== */
.fruit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.fruit-card {
border-radius: 14px;
padding: 20px 12px 16px;
text-align: center;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 140px;
}
.fruit-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.fruit-card:active {
transform: translateY(0);
}
.fruit-emoji {
font-size: 3.2rem;
margin-bottom: 8px;
line-height: 1.2;
}
.fruit-name {
font-size: 0.9rem;
color: #999;
margin-bottom: 4px;
}
.fruit-price {
font-size: 1.35rem;
font-weight: 700;
}
/* 各卡片背景色 */
.card-pink {
background-color: #f5d5d5;
}
.card-pink .fruit-price {
color: #c0392b;
}
.card-green {
background-color: #d5f0d5;
}
.card-green .fruit-price {
color: #2e7d32;
}
.card-yellow {
background-color: #fff5d5;
}
.card-yellow .fruit-price {
color: #e67e22;
}
.card-lime {
background-color: #e0f0d5;
}
.card-lime .fruit-price {
color: #558b2f;
}
.card-orange {
background-color: #ffe8d0;
}
.card-orange .fruit-price {
color: #e67e22;
}
.card-purple {
background-color: #e0e0f5;
}
.card-purple .fruit-price {
color: #5c4a8a;
}
.card-pink2 {
background-color: #f5d5d5;
}
.card-pink2 .fruit-price {
color: #c0392b;
}
.card-green2 {
background-color: #d5f0d5;
}
.card-green2 .fruit-price {
color: #2e7d32;
}
.card-purple2 {
background-color: #e0e0f5;
}
.card-purple2 .fruit-price {
color: #7a5c3a;
}
/* ===== 操作按钮 ===== */
.action-buttons {
display: flex;
gap: 14px;
margin-bottom: 24px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
border: none;
border-radius: 8px;
padding: 12px 20px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
color: #fff;
}
.btn:active {
transform: scale(0.97);
}
.btn-green {
background-color: #3da55a;
flex: 1;
min-width: 120px;
max-width: 200px;
}
.btn-green:hover {
background-color: #359250;
}
.btn-confirm {
background-color: #3da55a;
width: 100%;
padding: 14px 20px;
font-size: 1.05rem;
margin-top: 8px;
}
.btn-confirm:hover {
background-color: #359250;
}
/* ===== 订单表格 ===== */
.order-table-wrapper {
background-color: #fff;
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.order-table {
width: 100%;
border-collapse: collapse;
}
.order-table thead th {
text-align: center;
padding: 10px 8px;
font-size: 0.95rem;
font-weight: 600;
color: #333;
border-bottom: 2px solid #e0e0e0;
}
.order-table tbody td {
text-align: center;
padding: 12px 8px;
font-size: 0.95rem;
color: #555;
border-bottom: 1px solid #f0f0f0;
}
.order-table tbody tr:last-child td {
border-bottom: none;
}
/* 合计行 */
.total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 8px 6px;
border-top: 1px solid #eee;
margin-top: 4px;
}
.total-label {
font-size: 1.2rem;
font-weight: 700;
color: #333;
}
.total-price {
font-size: 1.3rem;
font-weight: 700;
color: #3da55a;
}
/* ===== 响应式适配 ===== */
/* 平板 */
@media screen and (max-width: 600px) {
.page-title {
font-size: 1.8rem;
margin-bottom: 20px;
}
.fruit-grid {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.fruit-card {
min-height: 120px;
padding: 14px 8px 12px;
}
.fruit-emoji {
font-size: 2.4rem;
}
.fruit-price {
font-size: 1.1rem;
}
.action-buttons {
gap: 10px;
}
.btn-green {
padding: 10px 14px;
font-size: 0.9rem;
}
}
/* 手机 */
@media screen and (max-width: 420px) {
body {
padding: 10px;
}
.page-title {
font-size: 1.5rem;
letter-spacing: 2px;
}
.fruit-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.fruit-card {
min-height: 110px;
}
.fruit-emoji {
font-size: 2rem;
}
.action-buttons {
flex-direction: column;
align-items: stretch;
}
.btn-green {
max-width: 100%;
}
.order-table thead th,
.order-table tbody td {
padding: 8px 4px;
font-size: 0.85rem;
}
}script.js：
let menulist = document.querySelectorAll(".fruit-grid>div")
let selectedFoodList=[]
for(let i=0;i<menulist.length;i++){
let liItem=menulist[i]
let name=liItem.children[1].innerHTML
let price=Number(liItem.children[2].innerHTML.slice(1))
liItem.addEventListener('click', function(){
if(selectedFoodList.length!=0){
let isAdded=false
for(let j=0;j<selectedFoodList.length;j++){
if(selectedFoodList[j].name==name){
selectedFoodList[j].count++
isAdded=true
break
}
}
if(isAdded===false){
selectedFoodList.push(
{ name:name,
price:price,
count: 1
}
)
}
}else{
selectedFoodList.push(
{ name:name,
price:price,
count: 1
}
)
}
updateSelectedFoodList()
})
}
//更新网页中的商品列表
function updateSelectedFoodList(){
let selected_Ul=document.querySelector("#order-body")
selected_Ul.innerHTML=""
if(selectedFoodList.length!=0){
let amount=0
for(let i=0;i<selectedFoodList.length;i++){
let li=generateSelectedListItem(selectedFoodList[i])
selected_Ul.appendChild(li)
amount+=selectedFoodList[i].price*selectedFoodList[i].count
}
let total_price=document.querySelector(".total-price")
total_price.innerHTML="¥"+amount
}else{
let total_price=document.querySelector(".total-price")
total_price.innerHTML="¥0"
}
}
//生成商品列表项目
function generateSelectedListItem(item){
let tr=document.createElement("tr")
tr.innerHTML = `
<td>${item.name}</td>
<td>${item.count}</td>
<td>¥${item.price}</td>
<td>¥${item.price*item.count}</td>
`;
return tr;
}
// 新建订单按钮点击事件
let order_button=document.querySelector("button.btn:nth-child(1)")
order_button.addEventListener('click', function(){
selectedFoodList=[]
updateSelectedFoodList()
})
//删除选中商品
let delete_button=document.querySelector("button.btn:nth-child(3)")
delete_button.addEventListener('click', function(){
let length=selectedFoodList.length
if(length==0) return
if(selectedFoodList[length-1].count==1){
selectedFoodList.pop()
}else{
selectedFoodList[length-1].count--
}
updateSelectedFoodList()
})
//保存订单
let save_button=document.querySelector("button.btn:nth-child(2)")
save_button.addEventListener('click', function(){
selectedFoodList=[]
updateSelectedFoodList()
window.alert("保存订单成功")
})
//确认订单
let confirm_button=document.querySelector("button.btn:nth-child(5)")
confirm_button.addEventListener('click', function(){
if(selectedFoodList.length==0){
window.alert("订单为空，请先添加商品！")
}else{
window.alert("商品正在准备中。。。")
selectedFoodList=[]
updateSelectedFoodList()
}
})qoder生成的js：
// 订单数据
let orderItems = [];
// 获取DOM元素
const orderBody = document.getElementById('order-body');
const totalPriceEl = document.querySelector('.total-price');
const fruitCards = document.querySelectorAll('.fruit-card');
// 点击水果卡片添加到订单
fruitCards.forEach(card => {
card.addEventListener('click', function () {
const name = this.dataset.name;
const price = parseFloat(this.dataset.price);
// 检查是否已存在
const existing = orderItems.find(item => item.name === name);
if (existing) {
existing.quantity++;
} else {
orderItems.push({ name, price, quantity: 1 });
}
renderOrder();
});
});
// 渲染订单表格
function renderOrder() {
orderBody.innerHTML = '';
let total = 0;
orderItems.forEach((item, index) => {
const subtotal = item.price * item.quantity;
total += subtotal;
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.name}</td>
<td>${item.quantity}</td>
<td>¥${item.price}</td>
<td>¥${subtotal}</td>
`;
orderBody.appendChild(tr);
});
totalPriceEl.textContent = `¥${total}`;
}
// 新建订单
document.querySelectorAll('.btn-green')[0].addEventListener('click', function () {
orderItems = [];
renderOrder();
});
// 保存订单
document.querySelectorAll('.btn-green')[1].addEventListener('click', function () {
if (orderItems.length === 0) {
alert('订单为空，请先添加商品！');
return;
}
const total = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
alert(`订单已保存！\n共 ${orderItems.length} 种商品，合计 ¥${total}`);
});
// 删除商品（删除最后一项）
document.querySelectorAll('.btn-green')[2].addEventListener('click', function () {
if (orderItems.length === 0) {
alert('订单为空，无需删除！');
return;
}
orderItems.pop();
renderOrder();
});
// 确认订单
document.querySelector('.btn-confirm').addEventListener('click', function () {
if (orderItems.length === 0) {
alert('订单为空，请先添加商品！');
return;
}
const total = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
alert(`订单已确认！\n共 ${orderItems.length} 种商品，合计 ¥${total}`);
orderItems = [];
renderOrder();
});https://www.xinyizhishu.top/yingdaoC/js/
2.影刀中调用
