fiona_0427-CSDN博客

原创解决js小数运算精度丢失

//说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。//调用：accAdd(arg1,arg2)//返回值：arg1加上arg2的精确结果function accAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} try{r2=arg2.toString().split(".")[1].length}c.

2020-05-28 08:58:06 222

原创 css复习-弹性盒子

1.弹性容器(Flex container)包含着弹性项目的父元素。通过设置 display属性的值为 flex或 inline-fle来定义弹性容器。2.弹性项目(Flex item)弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。3.轴(Axis)每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。注意：主轴与侧轴的概念主轴就是弹性盒子子元素沿着排列的轴..

2020-05-25 21:15:33 460

原创 css复习--定位

css定位有四种不同类型，position值分别为：static， relative，absolute，fixed1. relative（相对定位）：相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级尽管会使元素产生了偏移，但是文字并没有填补它的原来的位置，可以看出相对定位元素没有脱离文档流，原来的位置依然会被保留。2. absolute（绝对定位）绝对定位元素以父辈

2020-05-25 21:08:16 190

原创 css复习--浮动

如何让两个div在同一行答：浮动，会让元素脱离文档流，后面的元素会移上来如果后面的元素是文字，就会变成文字环绕型而不是文字被挡住如果不给块元素宽度和高度，高度被默认撑开，宽度一整行，如果加上浮动（就脱离了文档流，不再具有块元素的特性），宽高则被被内容撑开，就像行内块元素一样。行内元素没有宽高，默认被元素内容撑开，如果加上浮动（就脱离了文档流，不再具有行内元素的特性），宽高就可以设置了（就像行内块元素一样）。综上，设置了浮动之后，就变成行内块元素的特性了浮动的特点...

2020-05-25 21:06:03 172

原创 Bootstrap 字体图标

Bootstrap提供了部分字体图标供免费使用如何使用？1.字体图标可视作文字，可以设置font-size，color等属性2.只对内容为空的元素起作用，图标类只能应用在不包含任何文本内容或子元素的元素上。3.图标类不能和其他组件一起使用，应该用span来嵌套，否则尺寸会有问题<form action="" class="form-inline"> <div class="input-group"> <div class

2020-05-21 20:26:47 478

原创 Bootstrap 下拉菜单

1.使用：下拉菜单触发器和下拉菜单都包裹在.dropdown里（默认菜单向下弹出），如果想让菜单向上弹出可以使用.dropup进行包裹。2.可以使用caret字体图标为下拉菜单加上三角形标志，可以跟着dropdowm/up变三角形的方向 <div class="dropdown"> <button class="dropdown-toggle" data-toggle="dropdown" id="m1"> ...

2020-05-21 20:26:37 443

原创 Bootstrap 按钮

1.<a>、<button>或<input>元素都可以设置按钮类（button class）--btn，即可使用 Bootstrap 提供的样式。btn-default是默认样式<a class="btn btn-default" href="#" role="button">Link</a><button class="btn btn-default" type="submit">Button</button...

2020-05-21 20:26:28 265

原创 Bootstrap 按钮组

1.按钮组：.btn-group ---通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为（简单理解：让按钮在同一行显示），可以解决-合并重叠部分变厚的边框，即让第一个元素的所有兄弟元素向左移一个边<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button

2020-05-21 20:26:18 541

原创 Bootstrap 导航

1.Bootstrap中的导航组件都依赖同一个.nav类，状态类也是共用的。改变修饰类可以改变样式。标签页 ---nav-tabs胶囊式标签页-----HTML 标记相同，但使用.nav-pills类 <ul class="nav nav-tabs bg-warning"> <li role="presentation" ><a href="#">Home</a></li> <li ro...

2020-05-21 20:26:04 468

原创 Bootstrap 导航条

1.使用navbar进行包裹2.<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=

2020-05-21 20:25:53 222

原创 Bootstrap 表单--输入框

1.单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。2.不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。3.要实现内联表单，可以为<form>元素添加.form-inline类可使...

2020-05-21 20:25:31 650

原创 Bootstrap 表格

1.为任意<table>标签添加.table类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。2.通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。3.添加.table-bordered类为表格和其中的每个单元格增加边框。4.通过添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。5.通过添加.table-condensed类可以让...

2020-05-21 20:25:18 315

原创 Bootstrap轮播图

.carousel-indicators：指定小圆点 data-slide-to 属性用于表示每一项的下标 .active 表示当前活动项 .carousel-inner表示轮播项目，内部可以有多个 .item .carousel-caption ：为每一个幻灯片添加标题 .carousel-control：导航切换，使用 data-slide 属性定义切换方向， prev上一张，next下一张 .carousel-indicators和.ca..

2020-05-21 20:24:57 716

原创 Bootstrap 响应式布局

了解过媒体查询后，就可以进行响应式布局了如果不希望在屏幕变小时上所有列都堆在一起。那就可以使用针对小屏幕所定义的类 <div class="container"> <div class="row"> <div class="col-md-4 bg-primary col-xs-6">1</div> <div class="col-md-4 bg-warning col-xs-

2020-05-20 20:37:45 117

原创 Bootstrap 媒体查询

在栅格系统中，我们使用以下媒体查询来创建关键的分界点阈值。 <style> @media (min-width: 970px) and (max-width:1200px) { p{ background:red; } } @media (min-width: 768px) and (max-width:970px) { p{

2020-05-20 20:37:30 662

原创 Bootstrap 栅格偏移/移动

1.偏移使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4将.col-md-4所在的元素向右侧偏移了4个列（column）的宽度。所以，如果想要在排版后进行微调，可以修改margin的值  <div class="container"> <div c...

2020-05-20 20:37:13 4237

原创 Bootstrap的栅格系统

1.Bootstrap提供的栅格系统，能够随着屏幕和视口尺寸的改变，系统会自动分为12列。2.Bootsrap提供了一共五种背景色：分别是bg-primary ， bg-success ， bg-info ， bg-warning ， bg-danger3.ootstrap 需要为页面内容和栅格系统包裹一个容器。系统提供了：.container类用于固定宽度并支持响应式布局的容器；.container-fluid类用于 100% 宽度，占据全部视口（viewport）的...

2020-05-20 17:54:42 219

原创 Bootstrap文件的引入

Bootstrap，是来自 Twitter的前端框架。CDN:<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https:/

2020-05-20 17:45:06 237

原创 js 如何让元素隐藏

一、使用jquery控制div的显示与隐藏：1.$("#id").show()表示为display：block， $("#id").hide()表示为display:none;2.$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。二、通过设置元素的属性$("#id").css('display','none');//隐藏 $("#id").css('display','block');//显示...

2020-05-19 20:01:54 12917

原创抖动与节流

“抖动”：当我们频繁触发同一个事件，如：改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容，就会频繁的向后台发送请求。直到任务完成时，之前的请求都是多余的，严重影响用户体验和服务器的性能。这种问题就叫抖动防抖：可以在一定时间内监听是否再次输入，如果没有再次输入则认为本次输入完成，发送请求，否则就是判定用户仍在输入，不发送请求。函数防抖规定函数至少间隔多久执行函数执行过一次后，在规定时间内不能再执行，否则推迟函数执行下一次函数调用时，将清楚上一次定时器，并

2020-05-19 19:48:01 354

原创事件监听函数---addEventListener()

用法：事件源对象.addEventListener()该方法可以给事件源加入一个事件。可以使用removeEventListener()方法来移除事件的监听。有三个参数：事件类型：如“click","mousedown" 处理函数：事件触发后调用是否捕获方式：是布尔值，可选，默认是false，false--冒泡传递，true---捕获传递补充：事件三阶段：捕获--->冒泡--->目标冒泡传递：1.被点击的目标元素最先发生事件，然后事件转递给目标元素的父元素，一

2020-05-19 19:23:37 491

原创 jQuery ajax的实现

面试--1.ajax的原生代码 function tool(url ,callback){ var xhr=new XMLHttpRequest() xhr.open("GET",url)//设置发送请求的配置：用户用GET请求，url网址 xhr.send();//发送网络请求 // xhr.readyState;//1,2,3,4--监听后端的四个阶段，4：后端已经把数据包发送给前端了 //xhr.status---状态码==200 数据

2020-05-19 17:28:52 134

原创关于Window下的JSON理解

JSON易于机器解析和生成，方便进行数据交流。我们通常在服务器上读取JSON数据，然后将JSON数据转换为js对象再进行使用JSON格式说明：http://www.json.org/json-zh.html在 JSON 中的属性名是需要使用引号引起来的一、JSON.parse(str)和JSON.stringify(a)方法1.parse方法--从字符串中解析出json对象var str='{"name":"anna","age":"18"}'sonsole.log(JSON.par

2020-05-19 17:18:11 311

原创 jQuery 链

链（chaining），可以理解为”链接“。通过jQuery,把相同元素多个方法链接在一起，即在一条语句中运行多个jQuery。可以提高效率，浏览器不用多次查找同一元素写法：通过”.“进行连接<body><p id="p1">hello</p><button>点我</button></body><script>$(document).ready(function(){ $("button").c

2020-05-19 16:47:22 190

原创 jQuery 动画效果

创建动画animate()方法有三个参数：1.params定义形成动画的css属性，必选2.speed设定效果时长，可取“slow","fast",或者精确到毫秒值，可选3.callback设定动画完成后执行函数名称可选在对元素进行动画设置的时候默认HTML元素的位置都是静态的并且无法移动如需对位置进行操作首先要对元素位置进行设置 position：absolute/relative/fixed如果不设置位置对元素的位置动画操作就会无效 $(document).

2020-05-19 16:23:28 136

原创 jQuery 隐藏/淡入/滑动效果

一、隐藏/显示1.hide() / show() - 隐藏/显示 HTML 元素2.toggle() - 自动切换 hide() 和 show() 方法，如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。以上三个方法都有两个可选参数：第一个参数：speed，规定隐藏/显示的速度，可取“slow”，“fast”或者直接精确到毫秒第二个参数：callbcak，在进行“隐藏”或“显示”操作后所执行的函数<button id="hide">隐藏</butt

2020-05-19 13:10:58 267

原创 jOuery 获取尺寸

width() - 方法设置或返回元素的宽度（不包括内边距、边框或外边距） height() - 方法设置或返回元素的高度（不包括内边距、边框或外边距） innerWidth() - 方法返回元素的宽度（包括内边距） innerHeight() - 方法返回元素的高度（包括内边距） outerWidth() - 方法返回元素的宽度（包括内边距和边框） outerHeight() - 方法返回元素的高度（包括内边距和边框）用JS获取各种尺寸屏幕分..

2020-05-19 12:47:58 206

原创 js数组方法—some，every，filter，map，reduce，reduceRight的理解

some()和every()every和some是两个相似的迭代方法区别在于：every()是数组中的每一项都为true，则最终迭代结果返回才true，否则false；some()是数组中的只要有某一项为true，则最终迭代结果返回true，否则返回false； let arr=[1,2,3,4,5]; let result= arr.every((item)=>{ return item>...

2020-05-18 19:30:00 364

原创 jQuery 与for相关的遍历方法

普通for循环优点：自行指定循环次数。for (let i = 0; i < 10; i++) { console.log(i);}forEachforEach()方法用于调用数组的每个元素，并将元素传递给回调函数。注意:forEach() 对于空数组是不会执行回调函数的。forEach()的回调函数有两个参数，index，value，index为当前元素的索引值，value为当前元素。var arr = ["你好","我好","大家好","才是","...

2020-05-18 18:44:49 401

原创 jQuery 事件

1.click()：点击事件<body> <div class="box"> <div class="box2"></div> </div> <div class="box1"></div> <input type="text"></body><script> $(".box").click(function(e){

2020-05-18 18:11:07 89

原创 jQuery 过滤

first() 方法返回被选元素的首个元素。设置<div> 元素内部的第一个 <p> 元素的背景色：代码：<body> <div class="box"> <p>1</p> <p>2</p> <p>3</p> </div></body><script> $("di.

2020-05-18 17:52:58 119

原创 jQuery 节点遍历应用-选中行/列特效

1.要求选中表格中某个单元格时，整行背景色被改变分析：1.获取所有的td2.给td设置点击事件3.获取当前td的父元素4.进行排他设计，给给获取到的父元素设置背景颜色，其余元素设置为白色。代码：<body> 点击选行 <table id="table"> <tr> <th>姓名</th> <th>年龄&l...

2020-05-18 17:29:08 198

原创 jQuery DOM 互转

jQuery对象与DOM对象是不一样的通过一个简单的例子，简单区分下jQuery对象与DOM对象：<p id='HQ'></p>我们要获取页面上这个id为HQ的div元素，然后给这个文本节点增加一段文字：“hello,world”，并且让文字颜色变成红色。通过标准JavaScript处理：var p = document.getElementById('HQ');p.innerHTML = 'hello,world!';p.style.color = 'r

2020-05-18 17:07:18 148

原创 jQuery通过关系获取结点

向上找：parent() - 返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历parents() - 返回被选元素的所有祖先元素，不局限于父元素。向上直到文档的根元素 (<html>)。（可通过参数进行过滤）parentsUntil() - 返回介于两个给定元素之间的所有祖先元素，不包含给定范围两端的元素。向下找：children() - 返回被选元素的所有直接子元素。（可通过参数进行过滤）find() - 返回被选元素的后代元素(包括子，孙.....

2020-05-18 17:00:15 165

原创 jQuery方法综合运用之-瀑布流

1.运用jQuery（1）.获取input中的输入值，并进行判断（2）.获取显示框中最后一个元素的内容进行拼接，然后插入到显示框中（3）.如遇删除元素，则将删除所产生的null删除<body> <input type="text" > <div id="content" style="background-color: greenyellow;"><p></p></div></body>

2020-05-15 17:05:18 129

原创 jQuery增加和删除元素

添加新内容的四个 jQuery 方法：append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 <button onclick="fn()">点我</button> <div class="box" style="background-color: greenyellow;">hi</div> 效果：

2020-05-15 16:58:25 145

原创 jQuery的常用方法

1.css方法设置或修改被选元素的样式属性 <style> p{ color: red; } </style><body> <p style="color:blue;">hello</p> <p>hello1</p> <p>hello2</p> <p>hello3</p&g

2020-05-15 16:38:14 77

原创 jQuery选择器

元素选择器jQuery元素选择器基于元素名选取元素。语法：$("p")如果选择器填错，会返回一个长度为0的类数组，不会报错使程序停止id选择器通过HTML元素的id属性选取指定的元素。使用 # 标识页面中元素的id应该是唯一的，当需要在页面中选取唯一的元素时可以使用id选择器。语法：$("#app")class选择器通过指定的class查找元素。使用 . 标识语法：$(".test")其他复合选择器参考css的选择器...

2020-05-15 16:15:35 79

原创 jQuery 安装

jQuery 安装jQuery 库是一个 JavaScript 文件，通过使用 HTML 的 <script> 标签引用它：从 jquery.com 下载 jQuery 库，然后在本地通过<script>标签引入使用从 CDN 中载入 jQuery, 如从 https://www.bootcdn.cn/ 中引入此次使用字节跳动提供的：<scriptsrc="https://s0.pstatp.com/cdn/expire-1-M/j...

2020-05-15 16:08:12 149 1

原创 js游戏开发--1.canvas的使用

一.创建canvas并认识canvas1.<canvas> 元素只是图形容器，但是图形要通过js绘制。canvas也叫画布。2.<canvas> 默认是一个白色的容器，默认宽300px,高150px。3. 可使用css设置canvas宽高背景边框等canvas {border: 1px solid red;width:250px;height:5...

2020-04-24 10:56:39 321

空空如也

空空如也