demo
文章平均质量分 92
日常练习的小案例,希望常回头看看,能有所收获
Jdoit CW
一个要做全栈的前端小陈
Just move on---陈稳
展开
-
webpack实现vue-cli(ToDoList)
用你的webpack实现vue-cli本文围绕前端工程化,用webpack从零搭建一个完整项目的过程本文核心知识点:webpack的使用vue组件化思想Element-UI的使用别走别走,迫不及待看结果了吧:想学吗,来俺教你(献丑,哈哈)实现步骤:写在前面:此案例用于强化你的webpack使用(须对webpack有一定的了解),若本文有错误以及运行出错,欢迎随时来扰我这只:爱学习的小白创建项目文件夹(vue_todo)生成项目描述文件(npm init -y)在项目根目录下创原创 2020-05-17 09:57:27 · 12727 阅读 · 0 评论 -
Vuex + Mockjs = ToDoList
目标对Vuex、mockjs、Element_UI进行强化练习拿下Vuex写在前面写在前面:本 demo 为Vue脚手架搭建的简洁版的ToDoList;主要用到技术栈:Vuex、mockjs、Element_UI。希望有能对大家有用的地方。原创 2020-07-13 16:48:44 · 10756 阅读 · 0 评论 -
【React】实时疫情数据展示
内容React 组件化思想React 中使用 axios 请求ECharts 中国地图的应用效果预览样式可忽略,主聊 React 。实现步骤React 核心思想组件化,此处就把页面分为5个不同的组件:根组件(index.js)、头部组件(header.js)、搜索组件(search.js)、数据表组件(form.js)、地图组件(map.js)。大大提高了项目的可扩展性1. 根组件(index.js)主要用于渲染,数据传递,和承载各个根组件import React from 're原创 2020-08-26 18:16:13 · 10938 阅读 · 0 评论 -
给自己的无知记一次过(jsonp的跨域请求)
写在前面:最近在回顾ajax请求时,对跨域数据请求产生了极大的兴趣,奈何刚开始自己天真的以为jsonp无敌到可以跨域拿到任何开放接口的数据,于是开启了自己的踩坑之路。最先是顺利的用jsonp拿到了淘宝的搜索框提示,以为“就这”。谁曾想痛苦来的那么突然,接着在请求一些网上免费接口时便陷入深渊,那么来分享一下我的爬坑之路。入坑1. 用jsonp请求淘宝搜索框提示原提示框:打开开发者工具,找到搜索接口,自己用jsonp请求此接口:示例代码: $.ajax({原创 2020-06-07 21:48:21 · 14373 阅读 · 9 评论 -
最全面的无缝滚动轮播图(只为解放你的双手)
文章目录1. 轮播图效果展示2. 轮播图剖析2.1. 原理简介2.2. 功能需求3. 代码分析3.1. HTML代码分析3.2. JavaScript代码逐步引导写在前面:最近在给自己的二手网页添加动画时发现轮播图还真是无处不在,样式也是五花八门。于是手写轮播图的想法涌上心头,经过一番折腾之后,它诞生了。优化了些内容,对无js基础的小伙伴也很友好(只需改动样式,js动态变化)。1. 轮播图效果展示2. 轮播图剖析2.1. 原理简介2.2. 功能需求3. 代码分析3.1. HTML代码分析3.原创 2020-05-30 19:34:27 · 16123 阅读 · 1 评论 -
用本地存储教你写ToDoList
本文用本地存储写一个简洁版的toDolist本文核心知识点:本地存储的应用jQuery的事件、节点、元素应用JavaScript的基础应用没错又是它,我最爱toDolist,来吧,展示:功能:文本框里面输入内容,按下回车,就可以生成待办事项。点击待办事项复选框,就可以把当前数据添加到已完成事项里面。点击已完成事项复选框,就可以把当前数据添加到待办事项里面。可以计算出完成与未完成任务的数量但是本页面刷新或重新打开页面,内容不会丢失。效果:1. 分析:toDoList原创 2020-06-04 21:22:53 · 5588 阅读 · 0 评论 -
用正则进行表单验证(含密码强弱展示)
写在前面:刚回顾完正则表达式正则基础,就来对表单下手啦。本文用正则表达式进行一些表单的基础验证,同时验证密码时展示密码强弱。希望跟大家多多交流。1. 效果展示2. demo分析2.1 功能:如果用户名输入合法, 则后面提示信息为: 验证通过,并且颜色为绿色如果用户名输入不合法, 则后面提示信息为: 验证失败, 并且颜色为红色当密码状态发生改变时,提示用户密码安全程度2.2 思路:定义验证不同板块的不同正则规范因为验证思路一致,故把验证机制封装为函数当表单中按键弹起就开始验证.如原创 2020-06-09 21:07:47 · 12423 阅读 · 0 评论 -
javascript面向对象编程练习------tab栏
本文用JavaScript面向对象思想写tab栏本文旨在对JavaScript面向对象加深印象,练习下思路本文核心知识点:JavaScript面向对象的思想面向对象中this指向问题1. 功能需求点击 tab栏,可以切换效果.点击 + 号, 可以添加 tab 项和内容项.点击 x 号, 可以删除当前的tab项和内容项.双击tab项文字或者内容项文字可以修改里面的文字内容细节处做优化(避免tab填满溢出,删完报错等)2.效果预览3.demo准备获取到标题元素获取到内容元原创 2020-06-05 21:40:38 · 5919 阅读 · 0 评论 -
javascript面向对象编程练习------贪吃蛇
js面向对象编程之贪吃蛇骚话不多说,ok直接开工~~首先:面向对象编程,我们要找到项目中具体的对象,此处为(食物(food),蛇(snake),游戏本身(game))也可不把游戏本身作为对象,逻辑体现出来即可。接着分析每个对象的具体的属性及方法:1)food 对象:属性有:位置,大小,颜色;方法有:渲染在页面,随机不同位置生成;2)snake对象:属性有:位置,大小,总节数(计分方便)...原创 2020-04-07 14:00:38 · 393 阅读 · 0 评论