Web前端
文章平均质量分 67
Albert Yang
一代歌神,阿尔伯特·杨,一名Java程序员,正在学习前端。真正能让你走远的,从来都是积极自律与勤奋。
展开
-
HTML+CSS十分钟实现响应式布局页面,响应式布局实战教程
承蒙各位小伙伴的支持,鄙人有幸入围了《CSDN 2020博客之星》的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢!❤️ 每一票都是我坚持的动力和力量!https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领...原创 2021-01-17 16:47:53 · 42776 阅读 · 29 评论 -
html+css实现漂亮的透明登录页面,HTML实现炫酷登录页面
承蒙各位小伙伴的支持,鄙人有幸入围了《CSDN 2020博客之星》的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢!❤️ 每一票都是我坚持的动力和力量! https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743 作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领.原创 2021-01-14 12:46:17 · 86962 阅读 · 108 评论 -
CSS实现霓虹灯按钮,CSS实现炫酷的霓虹灯按钮动画
作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始。微信公众号:AlbertYang今天教大家使用CSS实现一个霓虹灯按钮动画效果,大家有什么不懂的可以留言问我,视频已经同步到B站,欢迎关注我的B站账号。视频视频链接:https://www.bilibili.com/video/BV1Zi4y1F7utCSS霓虹灯按钮动画,CSS实现炫酷的霓虹灯按钮动画HTML<!DO.原创 2021-01-09 10:30:09 · 16649 阅读 · 25 评论 -
送你一朵小红花,CSS实现一朵旋转的小红花
送你一朵小红花,愿你勇敢的面对生活中的苦难,不要放弃爱与希望,蓝天白云,定会如期而至。视频:B站视频链接:https://www.bilibili.com/video/BV1xX4y1M7yM送你一朵小红花,CSS实现一朵旋转的小红花HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co原创 2021-01-06 12:51:36 · 12936 阅读 · 19 评论 -
5分钟实现漂亮的CSS加载动画,纯CSS实现加载动画
1 视频视频地址:2 知识点2.1CSS calc() 函数CSS calc() 函数用于动态计算长度值。语法calc(expression) 值 描述 expression 必须,一个数学表达式,结果将采用运算后的返回值。 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100%- 10px);任何长度值都可以使用calc()函数进行计算;calc...原创 2020-12-27 21:52:38 · 12672 阅读 · 24 评论 -
JavaScript进阶教程(7)-正则表达式
正则表达式了解正则表达式基本语法 能够使用JavaScript的正则对象正则表达式简介什么是正则表达式正则表达式:用于匹配规律规则的表达式,正则表达式最初是科学家对人类神经系统的工作原理的早期研究,现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式的作用给定的字符串是否原创 2020-10-24 23:07:20 · 14364 阅读 · 60 评论 -
JavaScript进阶教程(6)—硬核动图让你轻松弄懂递归与深浅拷贝
目录一、递归1.1 概念1.2 出口1.3 递归经典问题:递归求斐波那契数列1.4 递归经典问题:递归求阶乘1.5 递归求一个数字各个位数上的数字的和1.6 递归遍历DOM树二 深浅拷贝2.1 浅拷贝2.2 深拷贝2.3 如何区分深拷贝与浅拷贝?2.3.1 浅拷贝:仅复制了引用,彼此之间的操作会互相影响2.3.2 深拷贝:在堆中重新分配内存,不同的地址,互不影响三 总结一、递归1.1 概念递归简单的来说就是程序自己调用自己,就像下面这幅图一原创 2020-09-13 19:47:49 · 11490 阅读 · 38 评论 -
JavaScript进阶教程(5)-一文让你搞懂作用域链和闭包
1 作用域在JS中变量可以分为局部变量和全局变量,对于变量不熟悉的可以看一下我这篇文章:https://blog.csdn.net/qq_23853743/article/details/106946100作用域就是变量的使用范围,分为局部作用域和全局作用域,局部变量的使用范围为局部作用域,全局变量的使用范围是全局作用域。在 ECMAScript 2015 引入let 关键字之前,js中没有块级作用域---即在JS中一对花括号({})中定义的变量,依然可以在花括号外面使用。{ var num2原创 2020-09-12 19:26:40 · 8530 阅读 · 36 评论 -
JavaScript进阶教程(4)-函数内this指向解惑call(),apply(),bind()的区别
目录1 函数的定义方式1.1 函数声明1.2 函数表达式1.3 函数声明与函数表达式的区别1.4 构造函数Function(了解即可,一般不用)2 函数的调用方式3 函数内 this 的指向4 call、apply、bind4.1 call,apply4.1.1 新的函数调用方式apply和call方法4.1.2 apply和call可以改变this的指向4.2 call,apply使用4.3 bind4.4 总结5 函数的其它成员(了解)6原创 2020-09-06 20:44:40 · 17477 阅读 · 44 评论 -
JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
1 原型链1.1 原型关于原型在JS面向对象编程这篇文章已经讲过了,今天简单来复习一下。1.1.1 什么是原型?在JS构造函数中有一个属性prototype,叫做原型,这是给程序员使用的。在JS实例对象中有一个属性__proto__,它也是原型,这是供浏览器使用的,它不是标准的属性。 实例对象中的__proto__指向的是该实例对象中的构造函数中的prototype,构造函数中的prototype里面的属性或者方法,可以直接通过实例对象调用。一般情况下,实例对象.__proto__才原创 2020-09-01 19:33:14 · 21269 阅读 · 120 评论 -
JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏
目录1 引言2 游戏地图3 游戏对象3.1 食物对象3.2 小蛇对象3.3 游戏对象4 游戏的逻辑4.1小蛇的移动4.2 让蛇自己动起来4.2.1 自动移动4.2.2 自调用函数4.2.3 私有方法4.3 判断蛇是否吃到食物5 代码6 其它处理6.1 index.js6.2 自调用函数的参数6.2 多个自调用函数1 引言上篇文章:https://blog.csdn.net/qq_23853743/article/details/原创 2020-08-29 22:12:04 · 4123 阅读 · 16 评论 -
JavaScript 进阶教程(1)--面向对象编程
1 学习目标 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 2 面向对象介绍2.1什么是对象Everything is object (一切皆对象)我们可以从两个层次来理解对象:(1) 对象是单个事物的抽象。一本书、一辆汽车、一个人都可以是对象,一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象,实物之间的关系就变成了对象之间的关系,从而就可以模拟现实情况,针对对象进行编程。(2) 对象是一个.原创 2020-08-16 18:13:37 · 19850 阅读 · 85 评论 -
不会吧不会吧,你不会还不知道这些提高JS代码质量的骚操作吧?
目录1 评价代码质量指标1.1 健壮性1.1.1 参数校验1.1.2 try, catch1.1.3 控制变量权限1.2 可扩展性1.2.1 模块分明1.2.2 高内聚低耦合1.2.3 用添加代替更改1.3可读性1.3.1 变量命名规范1.3.2 代码结构清晰2 设计模式2.1 用享元模式减少重复代码2.2 策略模式/状态模式2.3 装饰器模式3 总结1 评价代码质量指标1.1 健壮性程序的健壮性是指程序在执行时,在局部发生错误原创 2020-08-10 08:38:08 · 12350 阅读 · 83 评论 -
设计模式(12)[JS版]--JavaScript必会设计模式之外观模式(Façade Pattern)
目录1 什么是外观模式2 外观模式的主要的参与者3 代码实现4 实例应用4.1 跨浏览器事件4.2阻止默认和冒泡事件5 总结1 什么是外观模式外观模式为子系统提供了一个接口,它屏蔽一个或多个子系统的复杂功,提供了一个一致的界面(接口)给用户。外观模式是一个非常简单的模式,但它的功能却很很强大,非常有用。外观模式不仅简化类中的接口,而且对接口与调用者也进行了解耦。外观模式可以将一些复杂操作封装起来,并创建一个简单的接囗用于调用,它经常出现在多层架构的系统中。外观模式的.原创 2020-08-06 22:09:35 · 3217 阅读 · 19 评论 -
设计模式(11)[JS版]-JavaScript中的注解之装饰器模式
目录1 什么是装饰器模式?2 装饰器模式的主要参与者有哪些3 代码实现4 实例应用5ES7 中的 decorator6 总结1 什么是装饰器模式?装饰器模式模式动态地扩展了(装饰)一个对象的行为,同时又不改变其结构。在运行时添加新的行为的能力是由一个装饰器对象来完成的,它 "包裹 "了原始对象,用来提供额外的功能。多个装饰器可以添加或覆盖原始对象的功能。装饰器模式属于结构型模式。和适配器模式不同的是,适配器模式是原有的对象不能用了,而装饰器模式是原来的对象还能用,在不改变原.原创 2020-08-05 23:38:20 · 6522 阅读 · 40 评论 -
设计模式(10)[JS版]-JavaScript如何实现组合模式???
目录1什么是组合模式2主要参与者3代码实现4应用实例4.1 表单验证4.1 图片阅读器5总结1什么是组合模式组合模式允许创建具有属性的对象,这些对象是原始项目或对象集合。集合中的每个项目本身可以容纳其他集合,创建深度嵌套结构。树型控件是复合模式的一个完美例子。树的节点要么包含一个单独的对象(叶子节点),要么包含一组对象(节点的子树)。组合模式用于简单化,一致化对单组件和复合组件的使用;其实它就是一棵树。 组合模式能对于工作能起到简化作用,组合...原创 2020-08-04 22:35:22 · 5836 阅读 · 45 评论 -
设计模式(8)[JS版]-JavaScript设计模式之如何实现适配器模式???
目录1 什么是适配器模式?2 参与者3 实例讲解4 其它应用5 总结1 什么是适配器模式?适配器模式是将一个接口(对象的属性和方法)转换为另一个接口。适配器允许编程组件协同工作,否则由于接口不匹配而无法协同工作。适配器模式也称为包装器模式。适配器模式可以想象为我们日常生活中经常使用的接口转换器,实现两个或者多个不同的数据存储器进行数据交换,适配各自不同数据输出口的工具。适配器适用于客户系统期待的接口与现有API提供的接口不兼容这种场合。它只能用来协调语法上的差异问题。适配器.原创 2020-08-02 21:05:01 · 6555 阅读 · 38 评论 -
设计模式(4)[JS版]-JavaScript如何实现建造者模式?
目录1什么是建造者模式2 建造者模式的作用和注意事项3.代码实现4总结1什么是建造者模式建造者模式(Builder)可以将一个复杂对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式,那么用户只需要指定需要建造的类型就可以得到所需要的东西,而具体建造的过程和细节不需要知道。建造者模式实际,就是一个指挥者,一个建造者和一个用户。用户调用指挥者,指挥者调用具体建造者工作,建造者建造出具体的东西给用户。建造者模式我们在代码中经常用到...原创 2020-07-21 20:59:56 · 5426 阅读 · 37 评论 -
什么是JavaScript 的闭包???
闭包(closure)是Javascript语言的一个难点,闭包是一个函数与周围状态(词法环境)的引用捆绑在一起(封闭)的组合,在JavaScript中,每次创建函数时,都会同时创建闭包。闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰,即形成一个不销毁的栈环境。阅读本文前需要了解JS局部变量和全局变量。不清楚的可以看我的上篇文章:https://blog.csdn.net/qq_23853743/article/details/1069461001 计原创 2020-07-18 16:44:36 · 9197 阅读 · 51 评论 -
DIV+CSS实现自适应表格布局
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"&...原创 2020-04-03 16:37:20 · 3900 阅读 · 0 评论 -
通过拖拽改变图片大小
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>通过拖拽改变图片大小</title> <link rel="stylesheet" href="//apps.bdimg.co...原创 2020-04-03 08:28:18 · 2722 阅读 · 0 评论 -
使用CSS3 +JS实现图片预加载的动画效果
效果图:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片预加载</title> </head> <style> .content { width: 600px; margin: ...原创 2019-12-09 12:56:04 · 2868 阅读 · 0 评论 -
读取HTML文件并替换其中的特定内容,然后保存文件
package com.albertyy.other;import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.InputStreamReader;import ja...原创 2019-11-07 22:29:10 · 3331 阅读 · 1 评论 -
CSS和JS基础
使用CSS完成网站首页的优化使用CSS完成网站注册页面的优化使用JS完成简单的数据校验使用JS完成图片轮播效果目标:了解CSS的概念了解CSS的引入方式了解CSS的基本用法和常用的选择器了解CSS的盒子模型,悬浮和定位了解JS的概念掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互使用CSS完成网站首页的优化需求分析: 我们使用表格布局的时候存在缺陷,那么...原创 2018-11-25 18:17:13 · 2159 阅读 · 0 评论 -
JavaScript人机交互
文章目录导航0. 轮播图自动播放需求:技术分析:步骤分析:1. 完成页面定时弹出广告1.1 需求分析1.2 技术分析1.3 步骤分析1.4 代码实现1.5扩展2. 完成完成表单的校验2.1 需求分析2.2 技术分析2.3 步骤分析2.4 代码实现3.表格隔行换色3.1 需求分析3.2 技术分析3.3 步骤分析3.4 代码实现4. 复选框的全选和全不选4.1 需求分析4.2 技术分析4.3 步骤分析...原创 2018-11-25 18:35:21 · 5678 阅读 · 0 评论 -
Jquery基础知识与使用
文章目录目标:掌握JQuery的基本使用掌握JQuery的基本选择器,层次选择器会使用JQuery完成DOM的基本操作1. 使用JQuery完成页面定时弹出广告1.1 需求分析:1.2 技术分析1.3 步骤分析:1.4 代码实现2JQuery中的选择器基本选择器基本选择器的案例JQ中的层级选择器JQ中的基本过滤器JQ中的属性选择器JQ中的表单过滤器3使用JQ完成表格的隔行换色需求分析:技术分析:步...原创 2018-11-25 19:04:14 · 1791 阅读 · 0 评论 -
BootStrap基础知识总结
文章目录目标掌握什么是响应式及响应式的原理掌握BootStrap的栅格系统了解BootStrap的其他组件及JS控件表单校验案例技术分析步骤分析代码实现使用JQuery发送请求局部刷新页面使用BootStrap开发一个响应式的页面出来需求分析技术分析BootStap概述BootStrap的入门开发步骤分析代码实现使用BootStrap布局网站首页需求分析技术分析步骤分析代码实现前端内容总结目标...原创 2018-11-26 23:02:49 · 3102 阅读 · 0 评论 -
可拖动弹出框插件easydialog的使用
easyDialog v2.0演示与说明源码下载:链接: https://pan.baidu.com/s/1MTSxq3M82xCztXseEGsgKA 提取码: jk7v 复制这段内容后打开百度网盘手机App,操作更方便哦演示地址:http://www.shishangshow.top/show/chajian/easydialog/demo.html使用默认的HTML模板...原创 2018-12-18 18:41:11 · 3018 阅读 · 0 评论 -
HTML日期时间插件
Datetime简单全面好用的日期时间插件插件下载地址1.通过id使用HTML代码<h3>日期时间选择器</h3><input type="text" value="" id="datetimepicker"/><br><br>js代码 $('#datetimepicker').datetimepicker({ ...原创 2019-03-24 15:07:13 · 11838 阅读 · 0 评论 -
使用iframe实现在pc端预览移动端页面的效果
<html><head><script language="JavaScript" src="jquery-1.11.3.min.js" type="text/javascript"></script><script language="JavaScript" type="text/JavaScript">/**弹出...原创 2019-09-04 13:30:58 · 16172 阅读 · 11 评论 -
css实现彩色渐变滑动条
效果:标题代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> <style type="text...原创 2019-09-04 13:34:55 · 3424 阅读 · 1 评论 -
Html基础
网站信息页面网站图片信息页面网站友情链接页面网站首页网站注册页面网站后台页面教学导航了解什么是标记语言了解HTML主要特性,主要变化以及发展趋势了解HTML的结构标签掌握HTML的主要标签(字体,图片,列表,链接,表单等标签)1.网站信息页面1.1需求分析:我们学校需要一个对外宣传的网站介绍,介绍学校的主要业务,学校的发展历史,学校的口号等等信息。1.2技术分析:...原创 2018-11-25 17:53:43 · 1737 阅读 · 0 评论