自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(86)
  • 资源 (32)
  • 收藏
  • 关注

原创 Javascript特效:简单日历

实现JS特效:简单的日历。

2019-12-31 22:33:46 183 1

原创 JavaScript:字符串相关操作

字符串常用操作

2019-12-31 12:30:55 99 1

原创 Javascript:模拟ztree侧边栏的回收

缓动动画实现侧边栏回收

2019-12-30 22:15:46 77

原创 Javascript:简单的表单验证更改样式

实现简单的表单验证样式更改

2019-12-30 21:10:17 308

原创 Javascript特效:不断在页面跑的星星

知识点主要运用到之前封装的动画函数定时器引入我的工具库运行效果不断运动代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...

2019-12-30 16:48:15 141

原创 实战Javascript:结合电商主界面实现轮播图和倒计时秒杀

知识点除了个人信息和秒杀右面的图片,我把这个界面写了一遍。实现了图片的轮播和京东秒杀倒计时运行效果

2019-12-30 16:46:11 206

原创 Javascript特效:音乐钢琴

实现JS特效:通过1-9按键播放音乐。

2019-12-29 16:47:32 235

原创 Javascript特效:音乐导航

实现JS特效:带有音乐特效的导航。

2019-12-29 16:10:17 220

原创 Javascript特效:导航栏楼层效果

实现JS特效:楼层效果。

2019-12-29 15:46:45 205

原创 Javascript特效:旋转木马轮播图

实现JS特效: 旋转木马轮播图。

2019-12-29 15:12:16 285

原创 Javascript特效:秒杀倒计时

实现JS特效: 秒杀倒计时。

2019-12-29 13:47:18 303

原创 Javascript特效:普通轮播图

实现JS特效:带有动画效果的普通轮播图。

2019-12-29 00:44:33 393

原创 Javascript特效:利用封装动画函数模拟关闭安全管家弹窗

实现JS特效: 利用封装好的动画函数,模拟安全管家弹窗点击关闭按钮后关闭。

2019-12-28 19:03:39 227 1

原创 Javascript特效:封装元素动画函数

实现JS特效: 封装一个动画函数。

2019-12-27 22:44:42 134

原创 Javascript:遍历json数据的方法

如何遍历Json数据?

2019-12-27 20:51:37 199

原创 Javascript:访问和设置CSS属性

在JS中,动态设置CSS属性的方法

2019-12-27 20:26:11 96

原创 Javascript特效:获取选中内容分享至微博

实现JS特效: 选中文字并分享到微博。

2019-12-27 19:06:23 87

原创 Javascript特效:字体火焰背景

实现JS特效: 火焰字体。

2019-12-27 17:39:58 405

原创 Javascript特效:字体背景跑马灯

实现JS特效: 字体的背景不断变化。

2019-12-27 17:02:28 101

原创 Javascript特效:侧边广告

实现JS特效: 点击登录,弹出一个div(模拟登录界面),点击div外会关闭蒙版,点击div内部会进行跳转。

2019-12-27 16:21:36 80

原创 Javascript特效:响应式改变页面背景颜色

实现JS特效: 随着界面的宽度变化,显示不同的背景颜色。

2019-12-27 14:29:32 203

原创 Javascript特效:侧边广告

实现JS特效: 侧边广告位随着屏幕滚动不断更正位置。

2019-12-27 10:50:25 80

原创 Javascript特效:吸顶

实现JS特效: 导航栏吸顶。

2019-12-27 10:33:57 185

原创 Javascript特效:瀑布流

实现JS特效: 瀑布流。

2019-12-26 23:27:09 74

原创 Javascript特效:进度条

实现JS特效: 进度条。

2019-12-26 10:23:13 144

原创 Javascript:各种定位clientX、pageY、screenX、offsetY区别

2019-12-26 10:21:12 179

原创 Javascript特效:电商商品展示放大镜

实现JS特效:电商商品放大镜。

2019-12-25 23:25:34 275

原创 Javascript特效:动态获取鼠标位置

实现JS特效:动态获取鼠标位置。

2019-12-25 22:19:59 106

原创 Javascript:事件对象—event

JS事件对象—event

2019-12-25 08:12:06 55

原创 Javascript特效:天猫导航

实现JS特效: 天猫家族。

2019-12-25 01:14:07 106

原创 JavaScript:三大家族

JavaScript三大家族:offset、scroll、client

2019-12-24 15:26:20 175

原创 Javascript特效:轮播图

实现JS特效:轮播图。

2019-12-24 14:43:28 79

原创 Javascript特效:缓动动画

实现JS特效:速度递减的运动。

2019-12-24 14:24:03 71

原创 JavaScript:工具库MyTools.js(自用不断填充····)

MyTools.js

2019-12-24 14:06:02 372

原创 Javascript特效:简单的匀速平移动画

实现JS特效:div简单的水平移动操作。

2019-12-24 13:39:11 409

原创 Javascript特效:循环抽奖

实现JS特效:抽奖,开始旋转,停止得到结果。

2019-12-24 01:35:58 176

原创 Javascript特效:点名册(随机点名)

实现JS特效:点击开始,名字不停运动,结束停止。

2019-12-24 00:32:29 505

原创 Javascript特效:长图滚动

实现JS特效:长图在div内根据鼠标位置上下滚动。

2019-12-24 00:19:07 159

原创 Javascript特效:一个不停的表盘

实现JS特效:显示当前时间的表盘。

2019-12-23 23:06:27 194

原创 Javascript特效:距离某个时间倒计时

实现JS特效:距离某个时间倒计时。

2019-12-23 22:36:46 315

cesium加载百度地图

cesium加载百度地图方法

2020-05-20

基于Vue的移动端的购物商城

实现完整的移动端购物商城界面 包括首页、分类、购物车以及个人中心 购物车与个人中心角色绑定 可以做进一步开发实现完整购物车功能

2020-11-27

Cesium飞行漫游

参考网上代码实现了漫游飞行,简单的飞行。 包括开始飞行、暂停飞行、向前飞行、向后飞行、设定路线、保存路线、清空路线、退出飞行

2020-03-13

基于Vue的移动端购物车单界面实现

基于Vue的移动端购物车单界面实现 主要功能 1. 商品数量的增加与删除 2. 商品的全选以及单件商品的选择 3. 价格与总价的同步

2020-08-21

html实现旋转地球特效

主要是用自定义动画和animation相结合,实现旋转地球特效。 两张图片并排排列,绝对定位,不断改变图片的left值,实现切换效果。 增加阴影。

2020-03-13

SpringMVC实现用户角色管理

SpringMVC用户管理实现 通过SpringMVC与JSP实现用户角色管理

2021-03-30

基于Python和PyQt5开发的瑞幸咖啡点餐系统

使用Python和PyQt5开发的瑞幸咖啡点餐系统,代码可以实现基本的点餐、结算、打印小票、增删操作。

2019-11-09

Node实战——幼教平台

实现幼教平台的幼教资源部分,实现了文章的展示修改,用户的权限控制等。主要熟悉Node中前后端交互以及和数据库进行交互

2020-12-03

React前后端项目实战.zip

安装一下依赖,配置好数据库即可运行 项目分为三端 ① Web服务器 ② 客户端 ③ 后台管理系统 这里主要做了后台管理系统和服务器 前后端分离的项目中,后端Web服务器的作用是:给客户端提供接口,和数据库进行连接。

2021-01-06

hk-todo-react版本

1. 日程表案例无论是在react中,还是在vue中都是十分经典的入门级Demo,非常有助于帮助我们理解和吸收脚手架开发思想,以及vuex或者react-redux状态管理。 2. 我们先不用redux状态管理方式实现, 而是采用传统的方式实现, 看看多组件数据如何传递和回传?

2020-12-18

Node实现留言板功能

1. 执行`npm init` 初始化包 2. 安装所需依赖`>npm i body-parser ejs express moment morgan --save` 3. 格式化时间`moment(new Date()).format('YYYY-MM-DD HH:mm:ss')` 4. ejs 模板引擎的运用 ```javascript // 注册模板引擎 app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); ``` 5. 设置用户表单提交数据的接收中间件 ```javascript // 设置用户表单提交数据的接收中间件,所有提交的信息都会保存在req.body app.use(bodyParser.urlencoded({extended:false})); ``` 6. 界面重定向 ```javascript // 回到主界面 重定向 res.redirect('/'); ```

2020-03-22

使用vuex实现todoList改造

深度监视 概念:为了发现对象内部值的变化,可以在选项参数中指定 deep: true ;注意监听数组的变动不需要这么做 方法使用 第一个handler:其值是一个回调函数;即监听到变化时应该执行的函数 第二个是deep:其值是true或false;确认是否深入监听(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。) 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数 插槽使用 概念:和 HTML 元素一样,我们经常需要向一个组件传递内容,Vue 自定义的 元素可以很愉快的帮助我们实现

2020-07-12

CSS模拟实现QQ浏览器

1. 结合fullpage.js实现全屏滚动 2. CSS中linear-gradient() 函数用于创建一个线性渐变的 "图像"。 3. 背靠背效果: 4. 圆环旋转效果 5. 落空效果

2020-02-15

JavaScript实现像素鸟

下载后可以在webstrom中打开运行。 1. underscore中random产生随机数、without从数组中移除数据 2. 在游戏开发的时候,应该始终用面向对象的思想来做。有一个游戏管控大类(Game)。 3. 用一个json文件,保存我们需要的图片数据,方便在内存中创建每一张图片对象。 4. canvas的宽度和高度不能固定,根据电脑动态设置。 5. 使用ES6语法创建类。 6. FPS (每秒传输帧数(Frames Per Second)) 刷新率FNO 记录当前走过总帧数 7. 在每一次canvas绘制之前,都要进行清屏操作。ctx.clearRect(0, 0, canvas.width, canvas.height); 8. 资源加载。通过AJAX加载资源。静态资源类StaticResourceUtil.js用来加载本地图片。 9. 图片绘制,背景类BackGround.js,用来绘制背景。 通过图片的移动实现游戏的移动。 图片的移动即不断改变图片的X坐标,不断绘制。 图片的无缝移动:绘制图片的两倍,当全部图片宽度走完的时候,将图片X重新改为0. 背景图的速度设置,事物离得越近速度越快,越远速度越慢。 10. 取整、字符串转数字:parseInt(txt); 11. 管道绘制,管道类Pipe.js,用来绘制管道。 管道的高度、位置要随机生成。 但要有最小高度与最大高度。 需要一个管道数组来保存所有的管道。 当管道移出画布,需要将管道从管道数组中移除。 12. 用gameEnd来标志游戏是否结束。 13. 鸟的绘制,鸟类bird.js,用来绘制鸟。 根据帧率不断煽动翅膀。 14. 模拟重力加速度,利用dY,不断更新鸟的y值。导致鸟的下落越来越快。 15. 鸟的旋转。利用save和restore保存和恢复画布的状态。 利用translate旋转画布的x、y轴,旋转鸟恢复。 16. 鼠标点击事件,在鸟的上升过程中,固定值模拟阻力。 17. 边界检测。上边界y<0。下面接y>canvas.height - 地板高度 - 鸟高度 18. 碰撞检测。利用管道进行检测。首先判断鸟有没有进到管道竖着的区域,再判断鸟是在空白天空区域还是管道区域,从而进行检测。 19. 小鸟死亡,在死亡的地方绘制鲜血。鲜血撒完游戏结束。 20. 分数类。根据几位判断分数显示基准线。判断小鸟是否飞到管道竖着的部分,如果飞过,则分数加一。 21. 求一个数字有几位。num.toString().length 22. 游戏初始化。设置背景及图片,点击开始后div隐藏。

2020-03-06

利用Swiper制作手机新闻界面

1. 做移动端开发需要适口 2. freeMode:默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动可能不止一格且不会贴合。 3. freeModeSticky:使得freeMode也能自动贴合。与freeMode一般配合使用。 4. slidesPerView:设置slider容器能够同时显示的slides数量(carousel模式)。 可以设置为数字(可为小数,小数不可loop),或者 'auto'则自动根据slides的宽度来设定数量。 loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。 slidesPerView: 'auto'目前还不支持多行模式(当slidesPerColumn > 1) 5. 绑定分页器 6. text-indent 规定首行缩进 7. 自动轮播设置autoplay中delay 8. 去除移动端点击产生的高亮事件 9. slideChangeTransitionStart():回调函数,swiper从当前slide开始过渡到另一个slide时执行。 在这个方法中,activeIndex代表当前滑动的下标 10. jQuery中直接用index获取当前元素下标 11. eq获取当前兄弟元素中第几个

2020-03-08

部分美团静态首页代码

好久没写html界面了,一个工作的朋友让我帮他写一下,写了写,果然生疏的很,不过还是完成了。 <div class="main-main-content-top-left"> <div class="main-main-content-top-left-prev"><</div> <div class="main-main-content-top-left-next">></div> </div> <div class="main-main-content-top-right"></div> </div> <div class="main-middle-conten

2020-04-22

利用Swiper制作手机全屏相册

1. slideTo():控制Swiper切换到指定slide。 2. touchMove:移动端触摸移动事件 3. watchSlidesProgress:开启这个参数来计算每个slide的progress(进度、进程),Swiper的progress无需设置即开启。 4. swiper的progress值为0-1,当前展示的slide的progress值为0,下一个为-1,上一个为1,以此类推。 5. setTranslate() 当设置wrapper的偏移量时执行。可选swiper对象和wrapper的偏移量作为参数。 6. activeIndex。返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。

2020-03-08

面向对象的方法实现贪吃蛇

利用面向对象的方法,实现贪吃蛇。 1. 利用面向对象的思想实现——一个食物对象、一个蛇对象、一个游戏总控对象。 2. 在使用××.prototype= {}重写原型对象的时候,一定要加上一句constructor:该对象。不然会造成实例化出来的实例的constructor为object。 3. 在underscore中,使用_.random(a,b)即可获得a-b中的一个随机数。 4. 在求食物的随机位置的时候,用到了panel.clientHeight/this.height - 1) * this.height。 原理是使用盒子的高度/小球的高度,可以算得最多放多少个小球。因为要控制小球不能超过边界,所以总数量要减去1,数量×高度即为随机位置的最大值。 5. 在蛇对象中,用body数组存放蛇身体每一个部分对象。蛇的绘制过程就是遍历body,在面板上绘制。 6. 蛇的移动分为两部分。 ① 蛇节移动到前一个蛇节的位置。直到蛇头后一个蛇节移动到蛇头的位置。 ② 根据direction判断蛇头如何移动。 <font color=red> 注意:在游戏绘制的过程中,界面的每一次绘制都要**删除**之前的绘制,不然会叠加到一起。 </font> 7. 在蛇的闭包中建一个局部数组,存储蛇对象,可以更加方便的删除操作。 8. 只有在原型对象中的方法和属性,外界是可以调用的。 9. 蛇的移动(动画)必然需要定时器协助。定时器的时间,即象征着刷新速度,也就是难度。 10. this所在的函数在哪一个对象中,this就指向谁。单独写一个函数的时候,如果调用之前对象的this,需要备份指针(将对象的this赋值给另一个变量)。 11. JavaScript原生的键盘按下事件(keydown) 中,事件有一个keyCode属性,其值代表按下的键。其中:37—left、38—top、39—right、40—bottom。 12. 边界控制。通过判断蛇头与最大X和Y的关系,判断是否碰到边界。 13. confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。 14. window.location.reload(); 重新加载当前文档 15. window.close() 方法用于关闭浏览器窗口。 16. 与食物的碰撞检测:如果蛇头和食物坐标重叠,将蛇尾添加到body中。并重新绘制一个食物点,将之前的食物删掉。

2020-03-04

bootstrap响应式布局

1. CSS 相邻兄弟选择器 + 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。 相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。 2. 手机字体图标:`content: '\e958';` 电话字体图标:`content: '\e942';` 3. bootstrap最外层伸缩容器:`class="container"` 4. bootstrap伸缩布局并居中:`d-flex justify-content-center align-items-center` 5. `jQuery.data(element,[key],[value])`:在元素上存放数据,返回jQuery对象。 例如:在index界面中 ```javascript <div class="carousel-item active" data-sm-img="images/slide_01_900x410.jpg" data-lg-img="images/slide_01_2000x410.jpg"></div> <div class="carousel-item" data-sm-img="images/slide_02_900x410.jpg" data-lg-img="images/slide_02_2000x410.jpg"></div> <div class="carousel-item" data-sm-img="images/slide_03_900x410.jpg" data-lg-img="images/slide_03_2000x410.jpg"></div> ``` 在 js中,可以通过 ```javascript $('.carousel-item').data('lg-img') ``` 获取路径值。 6. bootstrap中圆角`rounded-circle` 7. 可以使用`order-*`调整显示顺序 8. 伸缩布局两步走`container+row` ```javascript <div class="container"> <div class="row"> *** </div> </div> ``` 9. 可以利用`offset`设置偏移量调整位置 10. 将jQuery对象转换为js对象可以直接通过下标取 11. 轮播图可以通过`.carousel('prev')`和`.carousel('next')`触发前后滑动事件 12. jQuery中缩小元素查找范围 ```javascript let $ul = $("#lk_product .nav"); let $allLis = $(".nav-item", $ul); ```

2020-03-19

vue实现TodoList.zip

深度监视 概念:为了发现对象内部值的变化,可以在选项参数中指定 deep: true ;注意监听数组的变动不需要这么做 方法使用 第一个handler:其值是一个回调函数;即监听到变化时应该执行的函数 第二个是deep:其值是true或false;确认是否深入监听(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。) 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数 插槽使用 概念:和 HTML 元素一样,我们经常需要向一个组件传递内容,Vue 自定义的 元素可以很愉快的帮助我们实现

2020-07-07

结合轮播图以及秒杀倒计时,实现简版京东首页

结合轮播图以及秒杀倒计时,写了一个很简单的京东首页。用户信息和秒杀右侧是由图片代替,没有完整写完= =

2019-12-29

结合轮播图、瀑布流等实现花瓣网首页

结合轮播图、瀑布流、吸顶、返回顶部、蒙版登录、等知识点,模拟实现花瓣网首页,实现了切换功能,但是二三页并未写内容

2020-01-10

Node实战—幼教平台

项目初始化 初始化项目结构 配置babel 新建main.js babel高阶语法转化演示 配置项目依赖 新建public,views文件夹, 引入静态资源 集成静态资源文件 配置全局路径 配置新的模板引擎 配置全局路由 配置nodemon 配置公共代码模板 前提 配置基础模板文件 配置404界面 配置前台界面 轮播图版块 接口处理 新增一张轮播图 获取轮播图数据 查询一条轮播图数据 修改轮播图 根据id删除一条录播图记录 添加轮播图处理 后台 后台添加轮播图 后台修改轮播图 后台删除轮播图 formData 前台 用户中心版块 用户模型 接口处理 后台管理员生成 用户名和密码登录 退出登录 权限控制 分页插件:twbsPagination

2020-04-17

Openlayers类库

在官网下载下来的openlayer 6.0版本编译好的类库,可以在工程项目中直接添加调用使用。之前的版本内容都支持。

2019-10-18

HTML,CSS实现静态登录界面

使用HTML、CSS实现静态登录界面。 <meta charset="UTF-8"> <title>登录界面</title> <link rel="stylesheet" href="css/animate.css"> <link href="css/index.css" rel="stylesheet">

2020-03-07

带有动画效果的旋转木马轮播图

使用HTML、JavaScript实现使用带有动画效果的旋转木马轮播图。通过更换位置信息实现,缓动动画函数封装在MyTools.js中

2020-01-03

部分美团静态首页.zip

好久没写html界面了,一个工作的朋友让我帮他写一下,写了写,果然生疏的很,不过还是完成了。 <div class="main-main-content-top-left"> <div class="main-main-content-top-left-prev"><</div> <div class="main-main-content-top-left-next">></div> </div> <div class="main-main-content-top-right"></div> </div> <div class="main-middle-content-foot"> <div class="main-middle-content-foot-left"></div> <div class="main-middle-content-foot-middle"></div> <div class="main-middle-content-foot-right"></div> </div> </div> </div> <div class="main-right"> <div class="main-right-content"> <div class="main-right-content-top"> <div class="main-right-content-top-img"></div> <div class="main-right-content-top-content">Hi!你好</div> <div class="main-right-content-top-login">注册</div> <div class="main-right-content-top-register">立即登录</div> </div> <div class="main-right-content-foot"> <div cl

2020-04-22

应用flex布局,模拟实现静态知乎首页

主要练习应用flex布局,模拟实现静态知乎首页。 包含知识点:字体图标,伪类,flex布局等模拟实现静态知乎首页

2020-02-14

通过面向对象利用JS实现五彩小球

利用js实现五彩小球特效 通过面向对象的方法实现 underscore库的使用:without数组,将制定元素从数组中删除 时器中要清除上一帧中产生的动画效果

2020-02-18

JavaScript特效图片瀑布流

使用HTML、JavaScript实现使用图片瀑布流。基本思想:第一行位置固定,下一行每一张图片添加到上一行最矮的图片之后

2020-01-03

带有动画效果的普通轮播图

使用HTML、JavaScript实现使用带有动画效果的普通轮播图。图片标签自动添加,缓动动画函数封装在MyTools.js中

2020-01-03

CheckWeather.zip

利用Python和PyQt5实现天气查询小系统,实现了简单的查找一个城市的天气并显示,显示最近五天的最高、最低温度、风向、风力以及天气状况,同时显示一条温柔的建议

2019-11-13

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除