- 博客(31)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 配置java环境变量
首先，在配置环境变量前你应该已经安装了 Java 的 JDK 了（如果没有安装JDK，请跳转到此网址：http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html）我这里安装的是 jdk-8u91-windows-x64，因为版本过高的话有些开发程序不主持。（注：win10的Java环境变量配置和其他的windows版本稍有不同）在电脑桌面 右键点击 "此电脑"的"属性"选项选择"高级系统设置"选项点
2020-10-24 23:05:51
301
3
原创 ajax异步请求知识点
基本步骤：创建XMLHttpRequest对象–>配置发送参数–>执行发送–>处理响应ajax 通俗讲有四个步骤：创建Ajax对象链接到服务器发送请求接受返回值1.创建对象：var xhr = null;if(window.XMLHttpRequest){ //标准浏览器 xhr = new XMLHttpRequest();}else{ ...
2020-03-15 16:59:41
238
原创 浅谈图片懒加载
懒加载1.概念：访问页面时，先把img元素的背景图片src替换成一张占位图，这样只需请求一次，当图片出现在浏览器的可视区域内时，再设置图片的真实路径，显示图片。2.优点：页面长图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节约流量。3.步骤：页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascrip...
2020-03-10 19:20:45
337
2
原创 bootstrap栅格系统运用
对于前端的开发过程中，在程序员眼中，写代码不算痛苦，最痛苦的是 “取名字”，什么class名、id名之类的等等。而bootstrap解决了这个问题，你不需要绞尽脑汁去取名字写样式，你需要去记忆这些现成的类名。然后把它封装好的样式文件引入，添加class名到你的项目中去就好了；它是一个响应式布局的框架，所有样式都是封装好的，你只需要进行引用就好了。下面我们就来看看它的强大之处：bootstrap...
2020-01-14 19:20:16
423
原创 响应式布局&自适应布局二者有何区别
什么是响应式布局、自适应布局？在了解响应式与自适应布局有何区别前我们得先知道二者到底是什么，下面我们来分别介绍一下。一、响应式布局响应式布局就是能够实现在不同屏幕分辨率大小的客户端上浏览网页的不同展示方式。通过响应式设计能使页面在手机、平板、PC端上有更好的浏览阅读体验，不再是很繁琐的开发模式。在最开始没有响应式和自适应布局时，通常都是pc端上浏览时很正常，但是在移动端上访问就直接是一整个页...
2020-01-14 16:49:31
2028
1
原创 CSS制作立方体自动旋转相册
制作一个炫酷好看的的立方体旋转相册给自己的女朋友，作为一名程序员应该不是问题，简单易学。关键是还能让女朋友开心，那么我们来简单的说一下如何利用CSS3当中的动画属性来制作立方体旋转效果；首先我先展示一下我给女朋友做的一个旋转相册效果： 效果链接入口运用的CSS属性及方法：利用transform属性中的rotate（旋转）和translate（平移）来对我们的图片进行位置上摆放变换，从而实...
2020-01-13 20:16:46
1461
原创 原生JS（可复用性）图片轮播效果
如何实现轮播图效果其实很简单，但是我们这里如何去实现一个类似插件效果的一个轮播图，首先我们进行一个项目分析：效果实现：能够自动播放；当中有显示当前图片的索引；鼠标滑入有按钮出现（前一张，后一张）并实现点击切换同时停止自动轮播；在这里我们的写法是在HTML文件中什么都不写，直接就在里面引用CSS文件和JS文件就行，因为我们的HTML页面结构是直接由JS代码进行写入，所以只需将JS文件引...
2020-01-13 20:13:55
263
原创 Web前端中的数据存储
在web项目中需要的存储主要分为 “服务器存储” 和 “客户端存储” 两部分；这里我们就只是介绍一下 “客户端存储” 这个部分。背景介绍首先我们先要了解关于web中的数据存储技术的一个发展历程，第一个web存储技术是Cookie，在百度百科中的说法是：是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。但是这里...
2020-01-08 20:40:21
1287
原创 svg搭配two.js绘制球体运动——行星运动
在使用two.js时我们需要对其进行引用，引用方式有：可以直接下载其js文件，然后放到自己的项目中，在通过script标签来进行引用，还可以通过网上的一些在线开源工程包，直接进行网络链接的引用，同样也是用script。我这里的引用方式就是通过BootCDN上的链接来进行引用的；话不多说，直接上代码：<!DOCTYPE html><html lang="en"><...
2019-12-26 23:24:38
441
原创 canvas画布实现飞机大战
对于一个游戏的开发，首先我们需要对其进行一个开发分析，其次再是进行实际代码实现；我们先分析一下具体怎么实现它：游戏的状态：一个游戏必须得有一个初始化界面吧，也就是它的初始状态，我们给它定义一个状态为：START；初始化界面到游戏运行界面需要一个加载界面吧，这里我们给它定义一个状态为：LOADING ；接着就是游戏运行状态了，我们给它定义为：RUNNING；游戏中总得有个暂停的时候吧，这...
2019-12-26 22:51:51
582
原创 如何用h5中的svg元素绘制柱状图
首先我们得知道svg绘图方式跟canvas绘图有所不同，canvas是通过获取canvas接口中的2D绘图上下文，来一步步进行图形绘制，它是直接在画布中进行操作，而svg是通过标签的形式，一点点进行图形构建组合，然后再在标签中通过特有的一些属性来改变它的样式，形成我们所需要的样子，这里我们就来通过svg绘制一个柱状图，代码如下：<!DOCTYPE html><html lan...
2019-12-26 21:48:15
935
原创 canvas绘制动态时钟
使用元素不是非常难，但需要一些基本的HTML和JavaScript知识。我们来利用canvas 画布元素和js结合绘制一个时钟，先上效果图：画图之前，先把思路捋一遍：首先分解一下这个时钟的图形，它是由表盘（圆形）和指针（直线）组成。然后我们就按部就班一步一步进行绘制就可以了。完整代码如下：<!DOCTYPE html><html lang="en"><h...
2019-12-26 20:36:49
299
原创 canvas实现吃豆人小demo
首先我们要知道什么是canvas?canvas是HTML5提供的一种新标签HTML5 标签元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。标签只是图形容器，必须使用脚本来绘制图形。Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。—其默认在页面上得的大小是width:300px; height:100px;canvas标签使...
2019-12-26 19:59:49
1022
原创 用JS实现一个简单的计算器
首先我们先是在HTNL页面中去进行计算器界面的一个构建，这里我就直接上代码了：HTML页面代码：<div> //包裹整个界面的大盒子 <input type="text" id="content"> //计算输入、输出框 <ul id="calcu"> //计算器的全部按钮 <li>1</li> <...
2019-12-26 19:10:06
988
原创 JS如何实现城市三级联动效果
首先我们需要从网上下载一个全国城市三级联动json数据格式的js文件，可能我这里的数据文件有所不同，但是写法基本都是一样的。首先在HTML中将所需要的页面结构搭建好：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三级联动</titl...
2019-12-25 20:52:25
1119
原创 JS中如何实现手风琴效果（俗称二级菜单）
在前段开发中，有时候我们需要用到手风琴效果，那么如何实现我们直接上代码进行分析。首先构建页面结构：<ul id="wapper"> <li class="list">手机品牌 //第一层菜单第一项 <ul class="two"> //第二层菜单 <li>华为</li> <li>小米<...
2019-12-25 19:55:22
1925
原创 什么是DOM(文档对象模型)
DOM概述DOM(Document Object Model)仅关注浏览器所载入的文档。DOM将html文档视为由元素、属性和文本组成的一棵DOM树。可以将html文档中的每个成分视为一个节点，节点的特点如下：整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每个HTML属性是一个属性节点注释属于注释节点HTML文档中的节点彼此间都存在关系，...
2019-12-09 19:31:41
1167
原创 DOM中浏览器的渲染页面的过程
浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个标签都是DOM树中的1个节点，根节点就是常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉_开头的样式。...
2019-12-02 16:53:59
372
原创 如何用JS实现2048
以下是我自己在学习前段技术的js阶段中，自己用js来写的一个2048的小游戏，具体的代码以及介绍如下：首先我们得在页面中去将我们的游戏界面用html构建出来，创建一个4x4的九宫格，同时添加一个累计成绩的计分板。页面效果如下图：HTML代码如下：<!DOCTYPE html><html lang="en"><head> <meta char...
2019-12-02 15:21:16
1198
1
原创 对于闭包的理解
什么是闭包？闭包指的是：能够访问另一个函数作用域的变量的函数。简单来说就是：闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量；也可以说它是一种在JS编程中解决问题的办法，是一种特殊结构：重复使用变量又不让变量被污染的机制。这个概念看着感觉是蛮简单，但是实际真正的去理解又感觉很麻烦。我们都知道在JS中所有变量都是通过内存中的栈和堆来存放的，基本数据类型一般都是放在栈里，而引用性数据类型...
2019-11-12 20:52:01
1836
原创 “红客”是什么？
什么是红客？红客(Honker(A person or thing that honks)) 是指维护国家利益，不利用网络技术入侵自己国家电脑，而是“维护正义，为自己国家争光的黑客”。红客是一种精神，它是一种热爱祖国、坚持正义、开拓进取的精神。所以只要具备这种精神并热爱着计算机技术的都可称为红客。红客通常会利用自己掌握的技术去维护国内网络的安全，并对外来的进攻进行还击。与其相关联的还有一些什...
2019-11-12 11:21:02
3312
原创 JS预编译&作用域链
今天刚刚学习了JS预编译和函数作用域链，所以分享一下有关预编译及作用域链的理解。但是首先我们得需要先来了解一下关于JS引擎在解析脚本的过程中的两个阶段，预编译和执行，首先预编译然后再从上之下一行一行的执行代码。其次，要了解作用域，作用域是一个变量或者函数能够使用的空间，分为全局作用域和局部作用域，全局变量的作用域为全局作用域，局部变量（函数内部）的作用域为局部作用域。全局作用域： 全局作用域在我...
2019-11-11 22:33:19
138
原创 JS正则表达式总结
什么是正则表达式？正则表达式，又称规则表达式。（英语：Regularxpression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。它是对字符串（包括普通字符（例如，a 到 z间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则...
2019-11-10 18:02:43
484
原创 JavaScript变量介绍及用法
JavaScript 变量JavaScript 变量是存储数据值的容器。变量的声明与命名要使用变量，就必须声明变量，可以使用关键字var来声明，如果不使用var关键字可能会导致程序不易阅读。变量区分大小写。基本的规则：var 变量名；（1）声明一个变量名：var one;（2）声明多个变量名，用逗号分隔：var one,two,three;（3）在声明变量时直接为变量赋值：var o...
2019-11-04 23:16:17
155
原创 五大主流浏览器及内核介绍
很多前端开发的 “攻城狮” 都知道，做前端开发最让人头疼的就是兼容问题，因为由于浏览器版本比较多，大家不可能为了刷个网页特地下载一个浏览器 ，这里我就简单介绍一下五大主流浏览器以及它们所有的内核。一、IE浏览器介绍及内核它是属于(微软旗下的浏览器)： Trident内核。IE开发计划开始于1994年夏天，微软为抵抗当时主流的网景浏览器（Netscape Navigator），要在Windows...
2019-11-04 19:22:24
379
原创 JavaScript中的基本运算符总结
运算符JavaScript中运算符主要用于连接简单表达式，组成一个复杂的表达式。常见的有算数表达式、比较表达式、逻辑表达式、赋值表达式等，也有单目运算符，指操作原始表达式。大多数运算符都由标点符号组成（+、>=、!），也有关键字表示的运算符，如typeof、delete、instanceof等。一、算数运算符：1、加法运算符：a + b2、减法运算符： a - b3、乘法运算符： ...
2019-10-27 22:46:32
412
原创 在前端开发中Photoshop切片的基本用法
PS中切片需要的工具、材料、步骤一、工具：先给自己的电脑安装一个photoshop的软件，网上一般来说都会有很多的下载资源，可以任意选择，每个版本的使用方式基本是没有什么太大的不同。重点是要学会什么使用它。二、材料所谓的材料无非就是需要切片的图片，什么格式的都行，但是最好是psd格式的，这样有利益切出来的图片更好用于开发之中。三、步骤1、首先了解ps界面的功能介绍：2、切片需要用到...
2019-10-26 16:06:26
661
1
原创 CSS定位的方式与后遗症
CSS中的五种定位方式一、普通文档流定位（元素默认的定位方式）块级元素垂直布局：div、hn、table、ul等元素会按照它本身的标准文档流方式进行排列布局；行内元素不独占一行 ：行列块元素可以设置宽高，内联元素无法设置宽高；二、浮动定位(float：脱离文档流的定位方式)浮动引发的特殊效果：1、 如果在父元素不设置高度的情况下，父元素的高度将会出现所谓的塌陷，本身应该排在被浮动元素...
2019-10-20 15:15:08
464
原创 CSS基础知识与用法（二）——CSS选择器
CSS选择器：css的选择器可以分为以下几类：1、元素选择器：最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、hn、span、a，甚至可以是 html 本身：2、群组选择器：3、类选择器：4、ID选择器：5、属性选择器：6、后代选择器：7、子元素选择器：8、相邻兄弟选择器：...
2019-10-20 01:02:42
199
原创 CSS基础知识与用法（一）
CSS是什么？CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，以称之为层叠样式表（Cascading Stylesheet）简称CSS。在网页制作时采用SS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式，实现HTM...
2019-10-13 20:54:38
241
原创 学习HTML后get到的form表单元素及控件的用法
表单的作用： 主要用于收集或者显示不同类型的用户输入并且将信息提交给服务器。表单组成：1.表单元素： < form >< /form >标签，负责将用户数据提交给服务器，其中它有这几个属性： actio="" 定义表单被提交时的动作，主要将数据提交到什么地方去 ，"#"默认是提交到本网页， 一般可以在里面写入目标的路径（url）。 me...
2019-10-11 17:07:09
334
城市三级联动数据文件json格式
2019-12-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人