代码实例
关注
分享
扫一扫
文章平均质量分 55
夹心776655
这个作者很懒，什么都没留下…
展开
-
【Vue.js + Element UI】实现商品管理
1.Tab卡添加商品实现整体布局/src/pages/goods/Index.vue<template> <div> <el-button size="small" type="primary" plain @click = "showAddForm">添加</el-button> <u-list @edit = "showEditForm"/> <u-form ref = "form"/> <原创 2021-02-07 11:39:54 · 1399 阅读 · 0 评论 -
【Vue.js + Element UI】之encharts的使用
【Vue.js + Element UI】之encharts的使用echarts的使用ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。在vue中的使用安装npm install -S echarts vue-echarts在组件中的使用/原创 2021-02-07 10:51:04 · 602 阅读 · 0 评论 -
【Vue.js + Element UI】实现文件上传
【Vue.js + Element UI】实现文件上传代码实例Form.vue<template> <!-- el-dialog: 弹出对话框组件 title: 对话框标题 visible: 是否显示 --> <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearForm" > <el-fo原创 2021-02-01 19:41:22 · 456 阅读 · 0 评论 -
【Vue.js + Element UI】实现树形控件、分页显示与动态加载菜单
树形控件:<!-- 显示菜单数据 树形控件 data 要显示的数据 show-checkbox 是否显示checkbox框数据 node-key: node的key 对应的菜单数据的编号 props 节点配置 {children(下级节点): '菜单数据中对应的下级名称', label(节点显示的名称): '菜单数据中的标题'} default-expand-all 是否展开所有的节点原创 2021-01-31 22:55:22 · 3164 阅读 · 0 评论 -
【Vue.js + Element UI】实现左侧导航栏制作
【Vue.js + Element UI】实现右侧导航栏制作利用Element UI进行页面搭建/components/Menu.vue<template> <div class="aside"> <!-- 导航菜单组件 el-menu: 容器组件 @open 监听下拉打开 @close 监听下拉菜单打开 default-active string 默认选中的菜单项的index的值 text-col原创 2021-01-28 10:19:59 · 6332 阅读 · 1 评论 -
【Vue.js+Element UI+ Node.js】实现完整登录验证
【Vue.js+Element UI+ Node.js】实现登录验证1.配置主页和登录页的路由router/src/main.jsimport Vue from 'vue'// 引入Element UI组件import ElementUI from 'element-ui'// 引入Element UI样式文件import 'element-ui/lib/theme-chalk/index.css'import App from './App'import router from './原创 2021-01-26 22:02:02 · 606 阅读 · 0 评论 -
【Vue-cli】组件化实现购物车，包括单选按钮全选按钮联动
代码实例App.vue<template> <div id="app"> <index></index> </div></template><script>// 引入主页indeximport Index from './pages/Index';export default { name: 'App', components: { Index }};</s.原创 2021-01-25 11:13:01 · 965 阅读 · 0 评论 -
【Vue.js】利用组件实现后台管理布局
【Vue.js】实现后台管理布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue组件实现后台布局</title> <script src="ht原创 2021-01-21 14:41:17 · 325 阅读 · 0 评论 -
【Vue.js】实现随机抽奖
【Vue.js】实现随机抽奖![在这里插入图片描述](https://img-blog.csdnimg.cn/20210121130157383.png代码实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-01-21 13:04:27 · 2369 阅读 · 1 评论 -
【Vue.js】之过滤器和利用过滤器实现新闻列表
过滤器 过滤器（对模板中显示的数据进行处理，然后返回一个新的数据）声明全局注册 不推荐 Vue.filter(name, function) 必须在new Vue()的前面声明局部注册new Vue({ ... filters: { 过滤器的名称 (value) {} }})只作用于定义的实例内部模板中使用: 1. 没有参数的过滤器 <p>{{数据 | 过滤器1的名称 | 过滤器2的名称 ...}}</p> <原创 2021-01-20 23:10:47 · 356 阅读 · 0 评论 -
【Vue.js】之监听实现搜索功能与翻译功能
监听器（watch）watch监听器的用法相当于是我们监视一个数据的变化，在这个数据变化时执行一些操作，这个操作可以是任何操作声明：watch: { 要监听的属性: function (newValue, oldValue) {}, 要监听的属性: '函数名' // methods中的函数 要监听的属性: { handler (newValue, oldValue) { console.log('watch', newUser) } }原创 2021-01-20 22:54:09 · 432 阅读 · 0 评论 -
【Vue.js】实现商品添加、列表展示和删除商品
【Vue.js】实现商品添加、列表展示和删除商品代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Product Management</title>原创 2021-01-20 12:53:29 · 3151 阅读 · 0 评论 -
【Vue.js】渲染商品列表
Vue.js框架渲染商品列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue渲染商品列表</title> <script src="https:原创 2021-01-19 17:41:29 · 1432 阅读 · 0 评论 -
【Vue.js/Vue-cli】实现To do list
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TodoList</title> <script src="https://cdn.jsdelivr...原创 2021-01-19 16:50:21 · 285 阅读 · 0 评论 -
【JQuery】实现轮播图
代码实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图1</title> <style> * { .原创 2021-01-18 21:43:09 · 179 阅读 · 0 评论 -
【CSS3 + JQuery】实现手风琴效果
描述: 实现手风琴效果1.简易版（纯JQ,不带动画）划上每一个标题, 让其紧跟的图片宽度变成295px,其余图片宽度变成0<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手原创 2020-12-23 10:58:26 · 234 阅读 · 0 评论 -
【CSS3+JQuery】实现万花筒旋转效果
描述:使用css3动画使四个盒子旋转,每隔500ms 随机一个div 改变成随机背景色 rgb(255, 255, 255)技术点1.CSS3旋转2.随机改变颜色代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale原创 2020-12-23 10:37:22 · 340 阅读 · 0 评论 -
【JQuery】入门之操作样式
描述:1. 点击显示div样式按钮 让右侧内容块显示出来2. 划上每一个小方块 进行对应样式的设置3. 点击确定 隐藏右侧内容块4. 点击取消 让div变成初始样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2020-12-22 12:33:09 · 104 阅读 · 0 评论 -
【Javascript】入门之输入框的编辑保存
描述: 操作内容1. 点击编辑 让输入框和保存取消按钮显示 让标签的内容赋值给输入框2. 点击保存 让输入框的内容赋值给标签 让输入框和保存取消按钮隐藏3. 点击取消 让输入框和保存取消按钮隐藏1.原生Javascript实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w原创 2020-12-21 17:57:49 · 1624 阅读 · 0 评论 -
【JQuery + HTML+CSS】之表单元素
表单元素form双标签，默认占一整行声明一个表单区域作用：用于收集不同类型的用户输入信息input单标签，可以并排显示,，默认边框，和边距type：text:文本输入框password 密码框，默认掩码显示radio 单选框checkbox 复选框button 普通按钮submit 提交按钮，默认有提交两个字，默认有提交功能，需要配合name属性reset 重置按钮，默认有重置两个字，清空输入框的内容file 文件上传按钮image 图片按钮 默认有提交动作原创 2020-12-21 14:41:43 · 160 阅读 · 0 评论 -
【Javascript】进阶之无缝轮播图在项目中的应用
无缝轮播图在项目中的应用(利用Ajax获取数据)代码实现1.HTML布局 <!-- banner --> <div id="banner" class="fl"> <!-- banner list --> <ul class="bannerlist"> <!-- <li> <img src="原创 2020-12-20 16:18:43 · 216 阅读 · 0 评论 -
【Javascript】进阶之实现多页面渲染、分页效果和筛选功能
描述: 实现多页面渲染课程和分页效果的实现代码实现1.HTML布局部分: <!-- course list --> <ul class = "courselist clearfix" id = "courselist"> <!-- <li> <a class="img"> <img src="原创 2020-12-19 23:14:25 · 545 阅读 · 1 评论 -
【HTML+CSS】之如何改变复选框样式
描述: 通过CSS改变复选框默认样式input[type = "checkbox"]{ width: 16px; height: 16px; vertical-align: middle; -webkit-appearance: none; /*清除默认样式*/ border: 1px solid #D1D1D1;}input[type = "checkbox"]:checked{ background:url("../img/checked.jpg"原创 2020-12-19 15:42:23 · 2009 阅读 · 2 评论 -
【Javascript】进阶之实现评论分页与发表评论功能
描述：实现评论分页与发表评论1.评论分页，通过上一页、下一页和输入页数跳转2.发表评论是需要先判断是否登录，登录后显示个人中心和退出，再发表评论，如果选择匿名评论，则显示匿名代码实现HTML1.样式部分： <div class="comment fl"> <h3>歌曲评价(<b id="commentlength"></b>)</h3> <u原创 2020-12-19 10:50:46 · 1358 阅读 · 1 评论 -
【Javascript】进阶之video在项目中的实现
功能1.点击歌曲，切换到对应视频2.选中的歌曲黑色背景橘黄颜色，且划上有黑色背景3.点击白天模式，切换成白天模式样式4.倍速功能代码实现1.HTML <!-- video part --> <div class="uppanel"> <div class="container clearfix"> <h3 class="title" id="title">01 阿冗-你的原创 2020-12-19 10:31:18 · 565 阅读 · 1 评论 -
【Javascript】进阶之利用touch.js让熊猫旋转
描述: 按住图片进行旋转 让图片跟随鼠标进行对应方向的旋转touch.jstouch.on('div', 'swipe tap', 'p,li', function(ev){ ev.startRotate(); // 开始旋转 console.log(ev); // CustomEvent 事件对象 console.log(ev.originEvent); // 原生事件对象 console.log(ev.type); // 事件类型 console.log(e原创 2020-12-18 17:37:52 · 340 阅读 · 1 评论 -
【Javascript】进阶之实现移动端无缝轮播
描述:移动端实现无缝轮播代码实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js原创 2020-12-18 15:39:22 · 172 阅读 · 0 评论 -
【Javascript】入门之验证注册信息
描述:html <main class="clearfix"> <div class="leftpanel fl"> <form action="#" id = "registerform"> <div> <span>手机: </span> <input type="text"原创 2020-12-16 10:07:04 · 338 阅读 · 0 评论 -
【Javascript】进阶之localStorage在登录注册中的应用
描述1. 进入首页, 判断本地缓存的手机号和密码是否都存在, 如果都存在显示已经登录和显示个人中心; 如果其中有一项不存在则状态为未登录, 显示登录注册按钮。2. 注册的时候, 在缓存中有一个数组 ，存储当前创建的账户信息3. 登录的时候,获取数组,验证对象是否在数组中存在localStorage基本语法 // localStorage: 缓存数据 json数据 console.log(localStorage); // 存储数据: 1. localSt原创 2020-12-16 07:03:27 · 993 阅读 · 1 评论 -
【Javascript】进阶之选项卡在项目中的运用(二)
描述: 鼠标移入不同板块, 显示对应板块的内容, 不移入的时候为默认板块, 所有数据存储在JSON文件中, 通过AJAX获取代码实例HTML <!-- online course --> <div class="onlinecourse clearfix"> <!-- title --> <h3 class="fl">精品网课</h3>原创 2020-12-13 19:47:34 · 139 阅读 · 1 评论 -
【Javascript】进阶之选项卡在项目中的运用(一)
描述: 点击对应文字描述, 切换到对应的图片(AJAX信息交互方式)代码实现HTML <!-- hot live --> <div class="hotlive clearfix"> <!-- title --> <h3 class="fl">热门直播</h3> <div class="more fr">原创 2020-12-13 10:44:55 · 165 阅读 · 1 评论 -
【Javacript】入门之正则匹配密码和邮箱
描述: 1.正则匹配密码6-18密码:初级: 纯数字和纯字母中级: 数字和字母的组合 , 首位必须是字母高级: 数字和字母和特殊符号的组合, 首位是字母代码实现 // 1.设置密码 var str = 'qwerty'; // 2.初级: 纯数字或者纯字母 var reg = /^\d{6,18}$|^[a-zA-Z]{6,18}$/; console.log(reg.test(str)); //原创 2020-12-10 16:47:31 · 244 阅读 · 1 评论 -
【Javascript】入门之面向对象创建实例
描述: 运用面向对象的方法创建飞机对象实例代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>面向对象创建飞机</title> <style>原创 2020-12-09 14:41:27 · 172 阅读 · 0 评论 -
【Javascript】入门之实现轮播图效果(无缝轮播/箭头切换/圆点切换)
描述:1. 布局, 有几张图就有几个小圆点2. 在页面中，每隔5s图片切换到下一章3. 点击左箭头, 让图片依次切换 4–3--2–1--44. 点击右箭头, 让图片依次切换 1–2--3–4--15. 点击小圆点，图片切换到对应的6. 鼠标划上div，清除定时器7. 划下div, 定时器重新开启代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-12-08 20:23:12 · 3698 阅读 · 1 评论 -
【Javascript】入门之元素拖拽
描述: 实现元素拖拽功能代码实现:// 拖拽元素函数function drag(ele) { // ele: 元素 // 按下div ele.onmousedown = function (evs) { // 按下的时候 求鼠标距离元素左侧的距离 鼠标当前距离页面左侧 - 元素到页面左侧的距 var ev = window.event || evs; var ml = ev.clientX - ele.offsetLeft;原创 2020-12-08 13:11:22 · 113 阅读 · 0 评论 -
【Javascript】入门之列表的增删改
描述: 判断目标源/触发源target的内容是删除还是修改。如果是修改, 弹出一个带有输入框的对话框, 点击确定修改内容; 如果是删除, 找到父元素li，删除整行; 点击添加， 弹出带有输入框的对话框， 当输入框没有内容或者点击取消的时候 不添加节点。如果输入框中有内容， 创建一个li, 添加到ul中。代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-12-08 13:07:41 · 565 阅读 · 1 评论 -
【Javascript】入门之模拟单选框
描述: 点击每一个li 将li的内容赋值给 div 给当前点击的li加上背景色, 点击空白部分隐藏代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟单选框<原创 2020-12-08 12:58:29 · 332 阅读 · 0 评论 -
【Javascript】入门之右键模拟菜单
描述：列表项随着鼠标右键的位置移动, 类似于模拟菜单代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>右键模拟菜单</title> <style原创 2020-12-07 15:32:39 · 258 阅读 · 0 评论 -
【Javascript】入门之实现盒子水平垂直居中
描述: 用JS动态实现盒子水平垂直居中(考虑scroll和resize的情况)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-12-07 11:00:35 · 907 阅读 · 0 评论 -
【Javascript】入门之放大镜功能的实现
描述：当鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置, 使放大镜的移动方向与大图的水平和垂直方向相反如何设计页面元素技术要点：事件捕捉和定位难点：计算涉及技术onmouseover：当鼠标指针移动到指定的对象上时发生onmouseout：鼠标指针移出指定对象时发生onmousemove：鼠标指针移动时发生offsetLeft | offsetTop | offsetWidth | offsetHeightevent.clientX | event原创 2020-12-06 20:18:31 · 202 阅读 · 0 评论