demo
关注
分享
扫一扫
hr226
这个作者很懒，什么都没留下…
展开
-
全图滚动demo
三种方式实现全图滚动：1、css2、jQuery3、SmoothScroll插件三种方式实现全图滚动.html 文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...原创 2019-09-10 11:45:59 · 102 阅读 · 0 评论 -
Gulp 压缩图片demo
1、拷贝文件2、压缩图片3、压缩js代码gulpfile.js在终端中执行命令：gulp 任务名即可完成上面1、2、3（前提：在项目内安装好相关的插件）// 处理任务// 在全局安装和在项目内安装了gulp后，引入gulp模块var gulp = require("gulp");// 在项目内安装了gulp-imagemin模块后引入该模块var imagemin = requ...原创 2019-09-12 22:23:59 · 495 阅读 · 0 评论 -
Gulp 代码合并demo
1、Sass转换2、执行多任务3、代码合并4、监听文件gulpfile.js// 处理任务// 在全局安装和在项目内安装了gulp后，引入gulp模块var gulp = require("gulp");// 在项目内安装了gulp-imagemin模块后引入该模块var imagemin = require("gulp-imagemin");// 压缩js文件，需要引入的ug...原创 2019-09-13 13:15:35 · 205 阅读 · 0 评论 -
webpack初识体验demo
1、npm init2、npm install -g webpack3、npm install webpack --save-dev4、npm install -g webpack-cli5、npm install webpack-cli --save-dev6、webpack app.js -o bundle.js7、webpack app.js -o bundle.js --wat...原创 2019-09-13 14:32:32 · 182 阅读 · 0 评论 -
webpack 运用第三方库&搭建服务器demo
1、使用第三方(JQuery)2、模块化静态文件(CSS)3、使用配置文件webpack.config.js4、使用webpack-dev-server5、使用babel转换插件1、npm install jquery --save-dev2、npm install css-loader style-loader --save-dev3、webpack4、npm install -...原创 2019-09-13 16:38:07 · 130 阅读 · 0 评论 -
Vue简单用户管理源码
一、Vue—安装脚手架1、npm install -g vue-cli //全局安装脚手架2、vue init webpack my-project //创建一个基于webpack模板的新项目（项目名my-project）二、Vue—基础语法<template> <div> <!-- 获取数据 --> <h1>{{ti...原创 2019-09-13 18:33:40 · 497 阅读 · 0 评论 -
Vue2.x在线翻译实战项目源码
index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>online</title> <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bo...原创 2019-09-14 15:46:03 · 253 阅读 · 0 评论 -
vue购物车项目demo
vue@2.6vue-router@3.0vuex@3.0vue-cli@3.xaxios@0.19element-ui2.9https://www.jianshu.com/p/fab89c48268c1、npm install -g @vue/cli2、vue create hello-vue3、npm install element-ui axios --save项目源码：...原创 2019-09-15 20:25:12 · 427 阅读 · 0 评论 -
初识ChartJS(前端第三方库)demo
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-09-12 11:15:14 · 574 阅读 · 0 评论 -
Ajax请求本地数据库demo
ajax5.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ajax 5 - 请求PHP数据</title></head><body> <button id="bu...原创 2019-09-12 10:43:02 · 789 阅读 · 0 评论 -
Promise对象demo
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-09-10 16:57:51 · 112 阅读 · 0 评论 -
使用css变量存储demo
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-09-10 18:13:53 · 158 阅读 · 0 评论 -
弹窗demo
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-09-10 17:33:20 · 287 阅读 · 0 评论 -
使用html+css+js实现页面分割效果demo
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-09-10 18:57:55 · 1267 阅读 · 0 评论 -
图片切换demo
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-09-10 21:32:57 · 155 阅读 · 0 评论 -
移动端表单网页制作demo
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-09-11 17:22:20 · 2136 阅读 · 0 评论 -
Ajax请求的两种方式demo
Ajax请求的两种方式onload VS onreadystatechangeajax1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...原创 2019-09-11 21:38:21 · 627 阅读 · 0 评论 -
Ajax请求json数据demo
ajax2.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ajax 2 - 请求JSON数据</title></head><body> <button id="b...原创 2019-09-11 22:03:56 · 290 阅读 · 0 评论 -
Ajax请求GitHub真实api接口demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>请求GitHub真实api接口</title> <style> .user { display: flex;...原创 2019-09-11 22:18:38 · 374 阅读 · 0 评论 -
Ajax请求PHP接口&传递数据到数据库demo
ajax4.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ajax 4 - 请求PHP接口</title></head><body> <button id="bu...原创 2019-09-11 22:52:39 · 785 阅读 · 0 评论 -
vue 5个demo
<!-- 案例一 --><!-- <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...原创 2019-10-03 15:21:19 · 202 阅读 · 0 评论