- 博客(27)
- 收藏
- 关注
RSS订阅原创 Ajax的异步请求
ajax的分为四个步骤：创建Ajax对x象eg：var xhr = null;if(window.XMLHttpRequest){标准浏览器xhr = new XMLHttpRequest();}else{非标准浏览器IE6/7/8xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);}绑定监听函数eg：xhr.onreadysta...
2020-03-16 15:56:09
225
原创 js的时间线
首先了解一下Javascript的异步加载（3种）defer 异步加载 IE能使用asyns html5中的新属性创建script标签，设置src属性，变成异步，插入到document中第一阶段Document解析中.创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段 document.readyS...
2020-03-16 14:57:26
191
原创 bootstrap的导航案列
bootstrap框架案列bootstrap框架bootstrap框架为所有开发者、所有应用场景而设计。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。详情页面：bootstrap中文网1、导航条实现以下操作a、导航条在大屏是现实效果b、屏幕小屏时 的效果且小屏显示下拉列表框<nav class="navbar na...
2020-01-12 17:18:14
495
原创 纯CSS3旋转正方体
纯css3画旋转的正方体首先，在一个同一个元素内显示图片的位置 <div class="cube"> <div class="contain"></div> <div class="contain"></div> <div class="contain"></div&...
2020-01-09 21:00:34
784
原创 响应式布局
响应式布局概念：响应式设计的步骤1、设置Mate标签：2、通过媒介查询来设置样式 Media Queries3、设置多种试图宽度概念：Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式设计的步骤1、设置Mate标签：<meta name="viewport" content=...
2020-01-04 15:55:24
124
原创 弹性布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。flex-direction指定了子元素在父元素盒子中的排列方式row：flex默认排列方式，从左到右排列，左对齐row-reverse：与row反向，从右向左排列，右对齐，第一个在最右边column：从上到下依次排列，向上对齐column-re...
2020-01-04 15:14:51
121
原创 文本溢出用省略号
文本溢出用省略号单行文本多行文本属性：单行文本单行文本溢出时： white-space: nowrap; text-overflow: ellipsis; overflow: hidden;属性：white-space： 表示单行不换行text-overflow：显示省略符号来代表被修剪的文本overflow：溢出的隐藏多行文本 text-overflow:...
2019-12-29 21:54:34
167
原创 box-shadow的多种用法
box-shadow属性的秒用由于参数的不同而导致显示结果也不同只有三个参数时#box { width: 100px; height: 100px; background: green; position: absolute; top: calc(50% - 50px)...
2019-12-25 20:56:19
3678
原创 svg画统计图
svg画统计图首先以 下图先分析一下：根据图片可以看出：计算出每个柱子的宽度：colwidth = (800 - 100) / (data.length * 2 + 1) （柱子前后需要空隙）柱子高度 ： rh = obj.value;来写代码:先在svg画布中 画x轴 <!-- x 轴 --> <line x1="50" y1="50" x2="...
2019-12-25 20:17:42
571
原创 canvas标签
canvas标签 H5 canvas画布HTML 5 的canvas元素是Javascript页面绘制图像 的画布画布上一个矩形，可以控制页面的每一个元素拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法等。1、 首先创建一个画布（canvas），获取canvas标签创建一个对象，对画布开始描绘<canvas id="canvas">您的浏览器不支持canva...
2019-12-14 16:47:29
211
原创 js 常用的DOM节点
DOM 常用的APIDOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。DOM就是由节点组成的。解析过程HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。DOM可以做什么找对象...
2019-12-08 23:20:15
223
原创 BOM 基础
js BOMECMAScript是javascript的核心，但是如果要在web中使用javascript，那么BOM(浏览器对象模型)才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM：浏览器对象模型（Browser Object Model，简称 BOM）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览...
2019-12-08 18:43:08
146
原创 CSS3新增的属性
CSS3新增的属性前缀: -webkit- :safari 和 Chrome的兼容-o- ：opera的兼容img{ border-radius: 50%; transform: all 0.5s; } img:hover{ transform: scale(1.1); }<div> <img sr...
2019-12-02 22:13:48
282
原创 js全选、单选操作
表格复选框的操作首先来写一个 简单的复选框如图：1、全选(2种)a、首先用变量All_election来接受全选按钮b、点击全选按钮时，遍历下面的所有复选框，让checked的值统一all.onclick = function() { var inp = document.querySelectorAll("tbody td:first-child>input");...
2019-12-02 16:13:56
492
原创 移动端上、下、左、右滑动
滑动在移动端的上、下的移动与现实有很大的差距，分别分两种情况，如下图：有三个事件：手指按下：touchstart手指移动：touchmove手指抬起：touchend（上滑与下滑相似）1、判断手指按下时的位置（touchstart） startX = event.touches[0].pageX; startY = event.touches[0]....
2019-11-23 15:50:03
506
原创 前端仿写2048小游戏
2048（游戏）2048这个小游戏是一个对于前端开发者来说，应该必备的技能，在成长道路上的必经之路。今天主要记录一下我在写这个游戏时遇到的一些些的问题。首先来看一下这个效果图在游戏开始之前，通过页面可以就看见这是一个4行4列的，先用生成一个二维数组，并且将二维数组的值均为0，然后调用生成随机数的函数for (var r = 0; r < 4; r++) { //遍历行，在每一行添加...
2019-11-23 14:39:26
701
原创 js作用域与预编译
作用域链与预编译预编译主要分为全局预编译和函数预编译作用域链在js引擎脚本中，解析脚本的分为预编译和执行，首先语法分析，在没有错误情况下再预编译，然后在从上至下执行代码，最后要了解作用域，作用域为，全局作用域和局部作用域预编译主要分为全局预编译和函数预编译1、函数预编译（发生在函数执行前一刻）分4个步骤：创建（Activation Object）AO对象找形参和变量声明，将变量和...
2019-11-11 21:29:36
307
原创 js正则表达式
Regular Expression常用字符集的简写（/^ $/）符号表达式.任意字符\s表示空格\d表示数字[0-9]中间的数字\w表示字母数字或者_ [a-zA-Z0-9]量词：专门规定一个位字符集出现次数的规则有明确数量边界的：{min，max}规定字符集必须最少出现min次，最多出现max次{min，}...
2019-11-10 21:58:20
88
原创 js语句的基本用法
javascript 语句一、if……else语句（条件语句）if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码if(条件){当条件为真时，返回的true的值}if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码结构：if（条件）{返回条件为真的值}else {反之，返回条件不为真的值}if...
2019-11-10 20:59:52
277
原创 JavaScript 四则运算
四则运算首先在页面写出显示文本框<input type="number" id="one" placeholder="请输入数字"/> <select id="set"> <option value="+">+</option> <option value="-">-</option> <opt...
2019-11-04 19:47:39
732
原创 js题目：某公司即将为员工买保险
题目： 某公司即将为员工买保险，要求如下：已婚的男、女性都可以买保险，未婚男性25岁以下不提供保险，25岁以上（包括）提供保险，未婚女性22岁以下不提供保险，22岁以上（包括）提供保险，请用程序实现以上功能，接受员工的信息，显示公司是否为他提供保险（已未婚用’在这里插入代码片Y’和’N’表示，性别用’M’和’W’表示） var marry=prompt('请输入：Y.表示已婚，N.表示未...
2019-11-04 19:34:24
611
原创 js数据类型
自动转换基本的原始数据类型有：number、string 、Boolean 、null 、和 undefined。1、number类型：整数为32位和64位的浮点数NaN:非数字类型。特点：① 涉及到的 任何关于NaN的操作，都会返回NaN ② NaN不等于自身。isNaN() 函数用于检查其参数是否是非数字值。 isNaN(123) //false isNaN("h...
2019-10-28 14:56:32
124
原创 js运算符
1、算术运算： 1）运算符：`+ - * / % ++ --` a、`+ - * / %` 这些简单的运算符是我们平时所用到，从小就开始算了，重点是后面两个运算符， b、++ ：简称自加加、自增 c、- - ：简称自减减、自减 [^1]:在自增 自减的运算表达式中时，++ 或- - 在前，则自增自减...
2019-10-27 20:59:57
91
原创 CSS实现表单文字对齐方式
label文字对齐方式表单的对齐方式分为三种1、左对齐（默认对齐方式，一般不需要）<form action="javascript:void(0)" method="post"> <div> <label>用户名：</label> <input type="text" name="" id="" value="" /...
2019-10-20 18:03:34
14491
原创 Css position 定位
定位今天来写一个定位吧。定位说简单吧也不简单，但是要学好了也不难，合理运用定位，可以给我们减少很多的麻烦。position 元素定位的类型取值a、static 默认值（都说是默认值咯，就没有什么好说的了^_^）relative 相对定位： 相对于自身源文档 的位置为目标进行定位，源文档位置暂用b、 absolute 绝对定位 ：是以最近的元素为目标，进行定位，若没有父元素，则...
2019-10-19 11:12:55
81
原创 HTML frame 标签
<frame> 标签对于一个刚刚接触HTML的人会觉得frame这是一个非常神奇的，可以将很多复杂的页面连接在一个页面显示。frame的用法和属性<frame> 标签定义 frameset 中的一个特定的窗口。，可以将多个独立的HTML引入同一个页面显示在每一个frameset中都可以设置不同的属性其中a、<frameset>有两个参数，cols和...
2019-10-13 19:31:21
715
原创 前端css基础
前端css基础css（Cascading Style Sheets）层叠样式表、级联样式表也称样式表。定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。css基础语法每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束span{ font-weight: bold; color: black...
2019-10-13 18:22:44
125
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人