- 博客(81)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 web前端：js-DOM原生轮播图实现解构，js创建标签，js配置样式属性，稳住基础，框架顺手捏来！
1.html<标签>解析2.js页面元素获取，及初始化创建轮播圆点解析3.点击事件逻辑：切换图片及圆点样式更新4.less布局.common-title {}.common-ps {}* { margin: 0; padding: 0;}html { height: 100%; overflow: hidden; body { height: 100%; #wrap {
2021-02-27 00:07:57
270
原创 web前端：vue组件化开发必备，引用bootstrap，实战Todo（v-for）增删项目全文图解加源码分享
1.实现页面小组件增删(1)html配置vue组件实现的div(2)js中配置vue父组件(3)js中配置vue子组件2.less.commonTile { color: ;}.commonP { color: ;}* { margin: 0; padding: 0;}html { height: 100%; overflow: hidden; body { height: 100%;
2021-02-23 21:46:51
277
原创 web前端：上个月不会写这条正则，被降薪了，reg22条+扩展语法全面解析
1.正则表达式常识语法规则1.常规创建正则： var reg = new RegExp(“正则表达式”,“匹配模式”)默认正则:"/内容/" 属性为object==>检查字符串中是否含有"内容"测试方法：test() 返回一个boolean“匹配模式”i :(ignore) 忽略大小写g :全局匹配模式字面量创建正则var reg = /正则表达式/匹配模式2.本项目完成正则一览(1)判断输入内容是否包含指定的内容B（忽略大小写）//获取对象 var inp
2021-02-22 00:44:49
762
原创 web前端：原生js全动画企业官网，开机动画、切屏动画、分屏处理应用
1.实现效果图3D轮播图，景深效果perspective，保持preserve-3dinfinity无限动画循环，入场-出场动画移动translateoffset应用，照片4等分移动缩放canvas应用：彩色冒泡效果，opacity应用：覆盖显隐效果，文字飞入飞出2.主less布局 /*屏幕设计宽度：1200-2000，超出范围使用bootstrap自适应 * 1.主体尺寸:1100 * 520 两侧留白：50 * 2.头部header参数 * 主体内容宽度:11
2021-02-15 14:49:45
1020
原创 web前端：canvas动画彩色气泡，原生js类直播间点赞效果实现
1.气泡事件-随机位置/颜色梦幻全屏1.less * { margin: 0; padding: 0; } html { height: 100%; overflow: hidden; body { height: 100%; #wrap { overflow: hidden; he
2021-02-03 20:23:41
904
原创 web前端：原生js仿苹果mac底部流式缩放停靠栏，底层原理解析玩转不同效果
1.MAC底部栏-缩放图标效果，image-style计算原理2.less包装在这里插入代码片3.css生成* { margin: 0; padding: 0;}html { height: 100%; overflow: hidden;}html body { height: 100%;}html body #wrap { height: 600px; width: 800px; position: absolute; background: s
2021-02-02 22:08:41
616
原创 web前端：自定义视频播放器，原生js实现窗口自适应，视频/音量进度条应用
1.less页面包装，引用混合//导入播放器基础css@import "reset.less";//定义进度条混合.progress-bar-position() { position: relative;}.progress-bar-line() { //定位：位置不变 position: absolute; //进度条：height：3px BG：#737373 width: 100%; height: 3px; //总高25，这里是
2021-02-01 21:49:18
1582
原创 web前端：js原生拖拽实例，自定义拖拽控件，弹力吸附，拖拽对象覆盖后，影响其他div样式
1.less包装页面* { margin: 0; padding: 0; #wrap { height: 100%; overflow: hidden; #drag-model { position: absolute; width: 100px; height: 100px; background: steelblue;
2021-02-01 00:16:29
991
原创 web前端：H5-audio原生标签，制作音阶导航
1.效果图2.less* { margin: 0; padding: 0;}html { height: 100%; overflow: hidden; body { height: 100%; #wrap { height: 100%; width: 100%; position: absolute; background: #
2021-01-28 22:28:08
345
原创 canvas应用：刮刮卡scratch card-手机端触摸消除效果
1.应用canvas知识点（1）drawImage(image,x,y,width,height)image:是image或者canvas对象，(x,y)为在canvas中的起始坐标width/height：图片的宽高设置（2）globalCompositeOperation：全局复合/合成操作全局透明度globalAlpha=value（0.0-1.0）默认1.0* 1.source：（源）新的图像* 2.destination：（目标）已绘制的图像|- source-over(默
2021-01-27 18:03:44
333
原创 web前端：canvas像素化-马赛克mosaic案例，原生js实现图片马赛克复制、覆盖
1.canvas图片马赛克原理及区间解析*每一个mosaic马赛克矩形坐标(i,j)* x=i y=j* mosaic马赛克(0,0)–>纵代表:(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4]* mosaic马赛克(1,0)–>纵向代表：(5,0) (9,4) -->随机生成像素点区间[5-9] [0-4]* mosaic马赛克(0,0
2021-01-26 16:29:49
1355
原创 web前端：canvas绘制画布，文本居中，获取像素点getImageData、放入像素数据putImageData，图文详解
1.canvas-font居中图解2.canvas像素计算pixel图解3.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position，会影响画
2021-01-26 12:14:33
1355
原创 web前端：canvas画布，飞鸟动画，原生js
1.效果图2.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position，会影响画布的坐标定位 left: 0; t
2021-01-25 11:42:05
710
3
原创 web前端：canvas画布引用，时钟表自动刷新实现，纯js原生组件
1.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position，会影响画布的坐标定位 left: 0; top: 0;
2021-01-24 12:34:06
520
原创 web前端：canvas画布构建旋转缩放无限循环box，原生js缩放因子实例：canvasPen-save-beiginPath-restore（clearRect、fillRect）
1.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position，会影响画布的坐标定位 left: 0; top: 0;
2021-01-24 10:00:24
337
原创 web前端：canvas画布应用：鼠标电子签名，原生js
1.less* { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position，会影响画布的坐标定位 left: 0; top: 0;
2021-01-23 17:33:53
359
原创 web前端：企业官网响应式bootstrap一套代码跑三端，首页基本功能
1.项目需求编码工具H-Builderless预处理css工具Koala考拉响应式框架bootstrap3.0javascriptjQuery1.10及以上需求jsbootstrap.min.js、html5shiv.js、respond.min.js、jquery.min.js轮播图尺寸推荐1920px*1200px自建脚本cevent.less cevent.js2.效果图2.1PC端2.2手机、pad端2.3小功能3
2021-01-21 18:37:41
1052
原创 web前端：简单操作实现仿bootstrap栅格系统，纯css脚本实现
1.实现效果图2.复制bootstrap源码根目录下：bootstrap/less/ grid.less variables.less根目录下：bootstrap/less/mixins grid.less grid-framework.less clearfix.less3.修改grid-framework.less中的col- 替换为：你的任意name-4.注意clearfix{} 继承不可以在{}之前加()5.栅格系统主css实现，个人采用Koala考拉生成6.自定义cs
2021-01-19 16:06:51
292
原创 web前端：bootstrap栅格系统：自适应多屏幕布局，手机设备、ipad、PC三端合一
1.先看效果图2.less自定义样式*{ margin: 0; padding: 0; a{ display: block; text-align: center; color: gray; &:visited{ text-decoration: none !important; } &:focus{ text-d
2021-01-19 15:01:14
1872
1
原创 web前端：flex弹性shrink布局，实现淘宝banner标签栏自定义tag图标
1.less* { margin: 0; padding: 0; #banner-tag { .banner-tag-row { display: flex; &:nth-child(1) { .item { //每个item的弹性因子为1 flex-grow: 1;
2021-01-18 17:13:35
321
原创 web前端：波浪舞动开机动画loading，原生css、js，@keyframes应用
1.less* { margin: 0; padding: 0; //html,body{} body { height: 100%; //高度继承 overflow: hidden; //滚动条禁止 #wrap { position: absolute; width: 600px; height: 600px; backgroun
2021-01-17 12:06:30
253
原创 web前端：animation动画应用，兔斯基动画实现，使用@keyframes控制起始，steps调整切换位置
1.less* { margin: 0; padding: 0; //html,body{} body { height: 100%; overflow: hidden; #wrap { position: absolute; width: 600px; height: 600px; background: url(../img/m
2021-01-16 19:59:23
408
原创 web前端：原生css球体弹跳效果，animation动画keyframes应用，指定停止动画animation-play-state:paused
1.less* { margin: 0; padding: 0; #wrap { position: absolute; width: 600px; height: 600px; background: url(../img/my-logo-2.png) repeat; background-size: 50px; border: 1px solid #000000; b
2021-01-15 22:21:52
352
原创 web前端：原生多棱柱/无限棱柱组件，js生成元素，随机生成旋转角度transform
1.less* { margin: 0; padding: 0; //注意防止页面下来 body { height: 100%; overflow: hidden; #wrap { position: absolute; width: 600px; height: 600px; background: url(../img/my-l
2021-01-15 17:08:29
237
原创 web前端：3D动画cubic立方体箱子，采用景深perspective，transform-style构建preserve-3d元素样式
1.less* { margin: 0; padding: 0; #wrap { position: absolute; width: 600px; height: 600px; background: navajowhite; border: 1px solid #000000; box-shadow: 2px 2px 5px #000000; border-radiu
2021-01-14 21:16:07
287
原创 web前端：钟表组件实现动态时间指针，原生css，js，transform-origin应用
1.less* { margin: 0; padding: 0; &:hover #wrap { background: skyblue; color: beige; } #wrap { //absolute: 元素从块级元素-》转化为定位元素，可以自定义高宽（一旦浮动，则为浮动元素） position: absolute; width: 500px; heigh
2021-01-13 20:17:14
470
原创 web前端：按钮转化变色，阴影box-shadow使用,动画属性transform:translate(-x,-y)居中样式
1.less* { margin: 0; padding: 0; body { a { //a标签不可以设置宽高，需要display：inline-block display: inline-block; //未知宽高下居中使用trnasform:translate(x,y) width: 100px; height: 30px;
2021-01-03 22:25:53
329
原创 web前端扇形导航优化：增加addEventListener(“transitionend“,function)事件监听，销毁scale缩放、opacity透明度效果
1.三角函数sin、cos、对边x轴、邻边y轴计算原理2.less实现* { margin: 0; padding: 0; body { height: 100%; overflow: hidden; #wrap { width: 300px; height: 300px; background: seagreen; color: wh
2021-01-01 23:08:22
263
原创 web前端：扇形导航，三角函数sinθ对边x轴，cosθ邻边y轴计算原生实现
1.三角函数原理分析2.less定义布局* { margin: 0; padding: 0; //找子选择器css：#id > .class {} body { //取消滚动条显示 height: 100%; overflow: hidden; #sector-navigate { width: 300px; height: 300px;
2021-01-01 00:03:48
466
1
原创 web前端：less转css，实现transition过渡动画：使用cubic-belizer立体贝塞尔斜率曲线速度动画；实现transform：rotate、translate、skew、scale
1.less实现：transition-timing-function：贝塞尔斜率曲线运动*{ margin: 0; padding: 0; height: 100%; body{ width: 60%; height: 75%; border: 1px solid; //margin:上左右下 margin: 15% auto 0; &:hover #wrap{
2020-12-29 23:56:23
708
原创 vagrant-mysql启动报错Check that your OS and file system support files of this size
1.报错内容：Error number 28 means ‘No space left on device’ 硬盘没有剩余空间2020-11-07 13:01:20+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.31-1debian10 started.2020-11-07 13:01:20+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
2020-11-08 15:54:17
1113
原创 解决Cannot resolve com.alibaba.cloud:aliyun-oss-spring-boot-starter:unknown 文件上传报错aliCloudEdasSdk解决
1.解决unknown：<!--引入spring cloud alibaba--> <dependencyManagement> <dependencies> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-al
2020-10-08 16:21:49
34586
22
原创 Springboot单应用+mybatis-微信小程序配置详细介绍：实现服务层增删改查应用Springboot（Controller、service、dao）统一异常处理
1.创建项目2.数据库创建CREATE DATABASE wechat_demo;use wechat_demo;/*创建表*/CREATE table `wechat_area`(`area_id` INT(2) NOT NULL auto_increment COMMENT '地区ID',`area_name` VARCHAR(200) NOT NULL COMMENT '地区名',`priority` INT(2) NOT NULL DEFAULT '0' COMMENT '
2020-07-19 23:38:30
821
原创 springboot单应用-整合SpringData JPA（java persistence API）,使用hibernate,time zone报错解决serverTimezone=UTC
1.导入依赖<!--1.导入data JPA--><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId></dependency><!--2.mysql--><dependency> <groupI
2020-07-19 23:10:33
539
原创 springboot-web开发：restful增删改查：国际化-登录拦截,o.s.web.servlet.PageNotFound:No mapping for GET/java: 非法字符: ‘\
1.创建项目Bootstrap下载模板：https://getbootstrap.com/docs/4.5/examples/以下（不选-选填）2.hello初建package com.cevent.springboot.web.controller;/** * Created by Cevent on 2020/7/8. */import org.springframework.stereotype.Controller;import org.springframework.
2020-07-14 23:46:12
3079
原创 springboot：配置ymlDidea.test.cyclic.buffer.size=1048576 “-javaagent:
1.创建yml-springboot2.application.properties配置端口3.yml配置文件值注入person: lastName: hello age: 18 boss: false birth: 2017/12/12 maps: {k1: v1,k2: 12} lists: - lisi - zhaoliu dog: name: 小狗 age: 124.
2020-07-14 14:06:49
1165
原创 Springboot：配置jdk、maven、idea，使用向导快速创建SpringBoot项目
spring微服务解析第一个springboot程序环境约束①jdk1.8：Spring Boot 推荐jdk1.7及以上；java version “1.8.0_112”②maven3.x：maven 3.3以上版本；Apache Maven 3.3.9Maven-settings.xml配置<profile> <id>jdk-1.8</id> <activation> <activeByDefault>tru..
2020-07-13 22:19:30
1744
原创 nginx安装，make install报错： cannot create regular file启动报错find: “/lost+found”: 权限不够/opt/module/pcre-8.37
1.使用jar包pcre-8.37.tar.gz | openssl-1.0.1t.tar.gz | zlib-1.2.8.tar.gz | nginx-1.11.1.tar.gz下载地址: http://nginx.org/download/nginx-1.4.2.tar.gz2.解压[cevent@hadoop213 ~]$ cd /opt/soft/[cevent@hadoop213 soft]$ ll总用量 18916-rw-rw-r--. 1 cevent cevent 892
2020-07-13 22:00:27
5205
1
原创 Reids分布式缓存应用-JAVA-eclipse客户端-JedisAPI使用-set+主从复制
1.所需jarCommons-pool-1.6.jar Jedis-2.1.0.jar2.windows接通linux-redis：jedis2.windows下eclipse配置3.准备jar包4.RedisPing.class package com.cevent.redis.test; import redis.clients.jedis.Jedis; /** * Redis连接 * @author ceven
2020-07-05 23:36:39
128
原创 redis分布式缓存应用：哨兵模式，反客为主的自动版
1.调整结构，6379带着80、81原版sentinel.conf 1 # Example sentinel.conf 2 3 # port <sentinel-port> 4 # The port that this sentinel instance will run on 5 port 26379 6 7 # sentinel announce-ip <ip> 8
2020-07-05 23:28:59
204
hive-hbase-handler-1.2.1.jar
2020-06-29
克隆配置虚拟器hadoop-hive-zookeeper-kafka全流程.md
2020-06-17
OrderBean.java
2020-04-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人