前端案例
关注
分享
扫一扫
文章平均质量分 53
KathyLJQ
这个作者很懒，什么都没留下…
展开
-
前端案例-33 VueRouter基础案例汇总
使用window.onhashchange实现简单的路由<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca.原创 2021-06-27 12:16:47 · 285 阅读 · 1 评论 -
前端案例-32 Vue 结合node.js实现购物车页面的前后端交互
结构：html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质原创 2021-06-25 16:22:37 · 1780 阅读 · 3 评论 -
前端案例-31 express 服务器框架，路由的使用，以及mysql的连接
web服务器// 导入expressconst express = require('express')const cors = require('cors') //导入自定义路由const userRouter = require('./js/router.js')// 创建web服务器const app = express() // app.use(bodyParser.urlencoded({ extended: false }))app.use(cors()).原创 2021-06-20 20:35:16 · 195 阅读 · 0 评论 -
前端案例-31 Vue组件案例
插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&.原创 2021-06-19 13:02:14 · 436 阅读 · 0 评论 -
前端案例-30 Vue常用特性案例汇总
表单的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit.原创 2021-06-17 10:43:38 · 368 阅读 · 2 评论 -
前端案例-29 Vue基础语法案例汇总
模板语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip.原创 2021-06-15 17:35:15 · 348 阅读 · 0 评论 -
前端案例-28 node简单的服务器
目录结构const http = require('http')const fs = require('fs')const path = require('path')const server = http.createServer();server.on('request', (req, res) => { console.log(req.url) console.log(req.method) // var fpath = null;原创 2021-06-14 19:05:05 · 131 阅读 · 0 评论 -
前端案例-27 jQuery 本地存储，todolist
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src.原创 2021-05-13 17:39:27 · 172 阅读 · 0 评论 -
前端案例-26 jQuery元素添加删除，事件绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src.原创 2021-05-12 13:27:11 · 175 阅读 · 0 评论 -
前端案例-23 jQuery鼠标经过高亮显示案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-30 10:29:05 · 407 阅读 · 0 评论 -
前端案例-22 云朵移动案例
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-04-18 20:24:42 · 457 阅读 · 1 评论 -
前端案例-21 轮播图,js文件的页面引入
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.原创 2021-04-18 15:41:08 · 322 阅读 · 0 评论 -
前端案例-20 左右移动的盒子，封装，回调函数，缓动效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-17 16:31:08 · 239 阅读 · 0 评论 -
前端案例-19 pageXOffset的应用，侧边栏定位方式的切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-17 14:26:22 · 362 阅读 · 0 评论 -
前端案例-17 模态框的拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-15 21:57:12 · 155 阅读 · 0 评论 -
前端案例-18 移动的放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-16 15:53:42 · 278 阅读 · 0 评论 -
前端案例-16 页面之间参数传递
login.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <.原创 2021-04-13 23:03:40 · 165 阅读 · 0 评论 -
前端案例-15 定时页面跳转案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-13 22:23:34 · 251 阅读 · 0 评论 -
前端案例-14 验证码倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-11 22:06:08 · 182 阅读 · 0 评论 -
前端案例-13 倒计时秒杀案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-11 22:04:30 · 258 阅读 · 0 评论 -
前端案例-12 物流搜索框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-11 17:58:26 · 179 阅读 · 0 评论 -
前端案例-11 移动天使案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-11 16:40:17 · 151 阅读 · 0 评论 -
前端案例-10 动态加载删除表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-11 12:32:39 · 150 阅读 · 1 评论 -
前端案例-9 鼠标经过显示下拉框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-10 22:14:40 · 378 阅读 · 0 评论 -
前端案例-8 tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-10 16:27:39 · 155 阅读 · 0 评论 -
前端案例-7 复选框全选功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-10 14:07:45 · 274 阅读 · 0 评论 -
前端案例-6 鼠标经过表格行给出颜色标识
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.原创 2021-04-10 12:36:26 · 219 阅读 · 0 评论 -
前端案例-5 模拟百度首页
index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <title></title> </head> <body&..原创 2021-04-02 13:35:44 · 267 阅读 · 0 评论 -
前端案例-4 Boostrap布局移动页面
案例前准备：下载Boostraphttps://www.bootcss.com/解压后找到里面的CSS文件夹3. 将bootstrap中的css 文件夹放到项目目录的bootstrap文件夹中项目中要使用到的Bootstrap类：container类|响应式布局的容器|固定宽度|类前缀|列数||–|--|–|--||大屏>=1200px | 宽度为1170px | .col-lg-| 12列 ||大屏>=1200px | 宽度为1170px | .col-lg-| 1原创 2021-03-28 12:33:21 · 444 阅读 · 0 评论 -
前端案例-3 rem布局移动页面
效果图：less+媒体查询+rem步骤：(1)下载node（本版本为node-v14.16.0-x64）下载完直接双击下一步直到安装完成（在cmd中输入node -v确认是否安装成功，若安装成功会提示当前版本号，否则安装不成功）https://pan.baidu.com/s/1rSeVOqsoLuLCqjsYhlNDEQ提取码：8iyz(2)在cmd中安装less,命令行中输入npm install -g less,安装完成后输入lessc -v 确认安装是否成功，如果出现当前less版本号原创 2021-03-27 15:58:31 · 317 阅读 · 0 评论 -
前端案例-2 flex布局移动页面
normalize.css/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css *//** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size afte..原创 2021-03-25 21:30:01 · 290 阅读 · 0 评论 -
前端案例-1 动画
北极熊<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.原创 2021-03-20 12:07:08 · 203 阅读 · 0 评论