- 博客(56)
- 收藏
- 关注
RSS订阅原创 el-menu的collapse展开隐藏功能导致的视口宽度/高度异常问题
其中flex：1使得该盒子覆盖当前页面剩余的部分，width使用了calc的写法，使得其宽度得到了控制。改盒子的完整css为。这时候对异常的盒子进行css修改，这里导航的默认展开宽度为200px，所以我设置div的css为。
2023-01-12 16:51:13
1836
原创 docker中nginx修改配置文件开放端口
配置文件在docker目录下的containers/{容器id}/config.v2.json以及hostconfig.json。通过修改docker的配置文件开放端口，修改文件的时候需要停掉docker服务，改好了在启用docker服务。在Tty前面找到ExposedPorts，如果没有就加上，然后在里面按格式输入想要开放的端口。找到配置文件后先停止docker服务，2. 修改配置文件，先是config.v2.json。容器id可以从docker ps 里面找到，4. 然后保存，启动docker。
2023-01-10 22:20:41
955
原创 jQuery基础---如何从jquery对象中获取原生对象
前言：js其实有一大堆没有写，主要是没空，十月份补上到时候。何为jquery对象：$('div')何为原生对象：var box = document.querySelector('div')如何从jquery中获取原生对象：索引方式：$('div')[0]get方法：$('div').get(0)这里两个“0”都是index的意思下面列举一些目前学到的获取jquery对象的方法：$('li:first') $('li:last') 选取开头或结尾的对象$(
2020-10-06 14:25:23
827
1
原创 使用回调函数自定义事件监听
回调函数实在原函数执行完毕之后才开始执行的函数。我们处理事件的时候会使用 ele.onclick = function（）{}还有一种方式是使用事件监听函数，但是事件监听会出现浏览器兼容问题，这个时候可以使用自定义函数来解决这个兼容问题函数的前三个函数分别为元素，时间类型，回调函数var dv = document.querySelector("div")//写回调函数function on(ele, type ,fn){ //兼容性分类结算 if(ele.addEventListener
2020-09-09 20:27:44
525
原创 动态表格(通过创建与移动节点)
使用createElement创建节点,并用innerText或innerHtml传输文本,最后用appendchild传递节点.var tbody = document.querySelector("tbody")obj.forEach(function(item,index){ var tr = document.createElement("tr") var td = document.createElement("td") td.innerText = index+1 tr.append
2020-08-24 19:06:44
109
原创 拖拽与光标信息
demo如下 : demo使用.onmousedown获取鼠标与目标dv的offset与client,以此来得出dv的left与top值,并使得这两个值与鼠标的位置有关,从而达到鼠标动,dv动的效果,再通过onmousemove方法在移动鼠标的同时获取其数据,并打印在网页上.最后添加onmouseup效果,在松开鼠标的时候清除move函数.var dv = document.querySelector(".block")var p0 = document.querySelectorAll("p")[
2020-08-24 15:35:49
139
原创 动态创建表格(使用模板字符串)
动态的内容使用${}的格式书写.function setTable(){for(let i = 0; i<arr.length ; i++){ const obj = arr[i] const str = ` <tr> <td>${obj.name}</td> <td>${obj.age}</td> <td>${obj.gender}</td> <td class = "del" ind
2020-08-24 15:02:34
541
原创 js中的浏览器滚动事件
实例: 仿写京东的滚动后出现上边栏链接: demohtml结构<body><div class="topic"> <div class="container"> </div></div><box id="box"> <div class="container"> <div class="top"> <div class="left"></div>
2020-08-24 14:31:10
746
原创 数据插入表格(初级)
由于刚接触数组与对象的处理方法,所以这里采用的添加与删除的原理是,对原对象数组进行处理,再生成新的对象数组传入表格链接:demo放点核心代码:var tbody = document.querySelector("tbody")setTable() function setTable(){ var str="" var i = 0 arr.forEach(function(item,index){ str +="<tr>" for(var key in item){
2020-08-24 14:15:07
189
原创 js动态处理时间
获取时间var time = new Date（）//Wed Aug 19 2020 20:22:12 GMT+0800 (中国标准时间)var c = new Date().getTime()//1597839732075第二个值为毫秒时间有关的demo–倒计时样式:链接:demo<html> <head> <meta charset="utf-8"> <title></title> <style t
2020-08-19 20:49:18
255
原创 随机数与随机颜色
随机数一般都是整数,而单独使用,random会出现小数,这个时候可以使用,round方法四舍五入,也可以使用floor或者.ceil方法向下或向上取整.使用round的时候会出现随机范围两边的数据随机到的概率较低的问题,所以这里推荐使用floor方法进行随机.随机 30-80的整数这里的用得.floor向下取整,10.5 = 10, 所以要有第11个值,这里的51为随机范围,由80-30==50得来,再加上一个1,这是0-50的范围,放到30-80就需要+30var num = Math.flo
2020-08-12 20:59:05
605
原创 js中几个常用的math方法
Math属性解释.random0-1之间的随机数(没有1).pow(x,y)求x的y次方.sort开方.round四舍五入.ceil向上取整.floor向下取整.PI取π的值.abs取绝对值.max取最大值.min取最小值
2020-08-12 13:01:21
231
原创 js中几个有关数组与字符串的练习
给一段文章中的全部指定词语进行过滤// 比如我要过滤 "SM"var str = 'asdasdSMasdasdasdSMsdasdasdSMsadasd'// 需要结果// asdasd**asdasdasd**sdasdasd**方法一,用spilt()方法把str分割成以SM为分界的数组,然后用join()方法把数组用**粘合成字符串,有些取巧,但是很好用var str = 'asdasdSMasdasdasdSMsdasdasdSMsadasd'var res = str.spl
2020-08-12 12:44:52
221
原创 字符串的创建与方法
字符串的创建使用字面量形式创建的字符串没有length和index属性,但是用的时候会生成,不用的时候会消散.var str = 'qwer'使用内置构造函数创建的字符串有length和index属性var str1 = new String('qwer')charAt()找到字符串对应的下标并返回其下标var res = str.charAt(4)charCodeAt()找到字符串对应下标的字符集编码(Unicode)var res = str.charCodeA
2020-08-11 20:54:49
291
原创 ES5新增的数组方法
forEach()forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。但是本身没有返回值,回调函数能够对原数组进行改变这是标准的改变原数组的方法,这里的a也可以用数组名arr,也可以用变量a,都是一个意思.var arr = [1,2,3,4]arr.forEach(function(item,index,a) { a[index] = item *10; })发现num与item其实是一个变量类型,所以他的变量类型定义是由位置来决定的,从左到右分
2020-08-11 20:27:24
78
原创 JavaScript中this的指向
this是一个关键字,而非具体的变量this一般情况下只会指向局部变量(如object)或全局变量(window)在全局条件下出现的this都是指向window的在函数内出现的this要根据函数调用的情况来找寻指向变量:fun(),函数内部的this指向windowxxx.fun(),函数内部的this指向xxx事件处理函数,如id.fun()指向事件源(由谁触发)<body> <div style="width:200px;height:200px;
2020-08-11 17:40:19
122
原创 冒泡排序与选择排序
冒泡排序for(循环k次(数组长度-1)){ for(循环i次(数组长度-1-k)) { if(根据需求选择谁放前面) }}for(需要循环到每个数字,但是最后一个数字除外,因为根本不需要对其进行排序) for(随着排序的进行,如果是从小到大排序的话,后面的数据会越发的稳定, 因为每进行一次大循环就会把当前循环中最大的数放到了最后面.-k没有也没事, 算是一个算法优化) if(这没啥好说的)选择排序for(每个数循环一次,除了最后一个数){ var 最小值 for(
2020-08-11 17:23:28
69
原创 数组的基本方法
创建方式内置构造函数: var arr = new Array(value)字面量: var arr = [value]注 : 这里的value可以是"", 数字, 数组内容, 或数字+数组内容的形式1. 这里的""代表无内容且未定义length的数组2. 仅单独数字代表数组的length3. 仅数组内容代表数组的内容4. 数字+数组内容代表数组length+数组内容...
2020-08-11 11:50:52
75
原创 几个有价值的关于js预解析的例子
1. 函数的内容var data = [];for (var i = 0; i < 3; i++) { data[i] = function () { console.log(i); };}data[0](); data[1](); data[2]();这里在预解析的过程中会有data[i]变量的声明,且会伴随一个地址。地址的内容不会进行解析，当做字符串处理，当且仅当调用函数的时候才会解析函数内容。所以这里的动作为：for循环把i增加为3console.lo
2020-08-07 19:58:10
121
原创 JS的操作符与switch穿透
逻辑操作符的权重由大到小为! && ||swtich()中的的case有穿透属性,case 1:case 3:case 4: break其中的1,3,4都会触发break.count一般用于计数.flag常用于存放布尔值continue可以立即结束,并进行下一次循环,并不理睬continue之下的内容(单次)....
2020-08-05 19:53:08
805
原创 JS的书写位置与类型
js书写位置内部样式: 标签为<script>,位置通常在body标签里面的下部.外联样式: 使用script src标签引入外部js文件.内联样式: 使用a标签时用JavaScript: js内容的方式写在href属性的值里面.注:在外联中只可引入文件,直接写脚本将无效.需要另起scrpit标签js数据类型五个常用数据类型:number, boolean, string, null ,undefined.数据类型检测typeof(value)或typeof value
2020-08-03 17:32:43
160
原创 渐变与过渡,旋转,位移,缩放
线性渐变 — background: linear-gradient()通常使用background: linear-gradient(to right, red ,blue) 属性,意思是,向右渐变,红变蓝.其中right属性也可以用right top等表示角落.也可以使用角度表示渐变方向,background: linear-gradient(10deg, red, blue)径向渐变 — background: radial-gradient()使用background: radial
2020-08-01 10:31:50
393
原创 Week 3 移动端布局
成果:大众点评采用了rem和meta标签,用flex对移动端进行适配.经过多个设备测试,都能达到预期效果.成果2:美团外卖这个做的比较仓促,不过速度比上一个大众点评要快一倍左右.可能有少许bug.其实还是多练,没啥要诀...
2020-07-27 20:03:29
90
原创 媒体查询与响应式设计
媒体查询通过对访问用户的设备的一些属性的检测来为特定属性设备输出结果,简单来说就是访问用户用的手机,就输出手机格式给他,是pc就输出电脑格式给他.下面表示当pc端屏幕只有在大于等于320px的时候才会显示蓝色背景.@media screen and (min-width: 320px) { div{ background-color:blue;}}常用的设备属性为screen — pchandled — 移动端all — 所有设备tv — 电视还有断点,
2020-07-27 19:53:57
135
原创 背景图属性与flex补充
background-origin 背景原点默认值:padding-box, 表示背景图在填充框的位置常用值content-box, 表示背景图在内容的位置border-box, 表示背景图在边框上注: 边框>填充框>内容,根据盒模型的定义来的background-clip 背景裁切规定背景图的裁切区域,默认值 border-box;content-box和padding-box也是可选值.多背景权重:多个背景使用的时候,如url(a,b,c)前面的权重更高.会显示在
2020-07-24 16:11:53
371
原创 结构伪类与伪元素选择器
li:nth-child(n){}li:last-child{}li:first-child{}li:nth-last-child(n){}li:nth-first-child(n){}按顺序分别是第n个元素最后一个元素第一个元素倒数第n个元素正数第n个元素空伪类选择器::empty{}排除伪类选择器:li:not(p){}li:not(class*=li2){}...
2020-07-22 14:00:57
247
原创 css3自定义开关
效果如下:结构则是把input放在最上面并透明化,下面放.button,其中要用到定位(其实用margin也可以)过渡效果```html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 240px; height: 80px; backgro
2020-07-22 13:23:46
138
原创 H5补充2
表单属性补充h5新增了 email,number,date,url,range属性值,可以实现对邮箱,数字,日期的检测,新增与input联动的标签<datalist>,提供一个下拉列表给input内容,并且在用户输入的时候会联想预设内容.<label> <span>学员爱好:</span> <input type="text" list="data" placeholder="睡觉"> <datalis
2020-07-21 17:37:14
112
原创 H5补充1
border-sizing这个属性用于计算盒模型的宽高,由于浏览器的兼容问题,主要是ie低版本的问题.有两个属性:border-sizing: content-box;或者border-sizing: border-box;前者是css默认的宽高计算方法,就是 width = 内容的宽度, height = 内容的高度.后者则是被称为怪异盒模型, width = 内容的宽度+border的宽度+padding的宽度, height = 内容的高度+borderde的高度+padding的高度.H
2020-07-21 12:35:41
133
原创 表格部分属性补充
Layout表格本身的宽度是浏览器自定的,所以在宽高设置不起作用的时候使用table-layout将表格的布局换位固定布局,就可以实现对表格宽高的设置了.table{ table-layout: fixed; width: 400px; height: 300px;}选中奇行使用tr:nth-child(even)或者tr:nth-child(2n+1)tr:nth-child(even){ background-color: #008DE1; }选中偶行使用tr:nth
2020-07-20 17:47:11
63
原创 自定义表单按钮
目标样式为概念作品,使用input和span标签,通过透明与定位来达成目的.<div class="l"> <input type="file"> <span>点击</span> </div>input{ height: 60px; width: 100px; position: absolute; opacity: 0; } span{ display: bl
2020-07-20 17:18:37
259
1
原创 表单字段集与label属性
表单字段集使用<fieldset> <legend></legend></fieldset>来表示表单,如<form> <fieldset> <legend>表单名字</legend> <label for="a1">冲冲冲</label> <input type="text" id="a1"> <fieldset
2020-07-20 17:09:11
882
原创 Day 10 css补充
滚动文字<marquee></marquee>啊这,太糟糕了.粘性定位相当于平时是relative,在用户滚动到一定地步时转换为fixed.这个一定地步一般由top down left right来定. position: sticky; top: 0;最小高度min-height: value;在IE6及以下的浏览器版本中,是不支持这行代码的.IE6 及以下 height 就相当于 min-height 的作用.权重css中,权重最高的并不是行内样
2020-07-18 23:08:08
74
原创 Week 2 总结
问题在实践中发现自己经常写着写着就不知道自己干啥经常忘了给盒子加宽高,或者在元素是否要设置宽度上面让自己捉摸不定,从而导致页面布局出问题经常在符号和单词上面出错…心得解决问题对我来说并不难,难的是下一次再遇到这个问题能够想起来解决办法,而不是再来研究一遍.所以及时归纳总结自己的难点很重要.还是需要多多练习,才能做到像老师那样自如.跟同学们讨论问题还是很有收益的,互相帮助又加强了自身对知识的理解.关于老师为啥晚自习和周六看不到老师来转教室…...
2020-07-18 22:49:01
108
原创 设置版心
html<div class="news"> <div class="container"> <div class="newLft"></div> <div class="newcenter"></div> <div class="newRight"></div> &l
2020-07-17 13:03:34
1140
原创 元素的层级
给元素设定属性:z-index: value;其中value的取值范围为R.数值越大优先级越高,越会显示在上面.注意只有拥有定位属性(relative,fixed,absolute)的元素才能使用层级属性.没有设置层级属性的时候,默认值为0.没有设置层级属性的时候,有定位的元素会在上面....
2020-07-17 12:56:47
161
原创 css隐藏元素的方法(三种)
只要做到从视觉上看不到元素就行,看不到==隐藏.方法一: 使用display:none;隐藏元素给元素的css属性中添加display:none;隐藏目标的同时还不占位置.方法二: 通过改变元素透明度隐藏元素当元素完全透明的时候就是隐藏了,opacity:0(取值范围0-1),0为完全透明,1为完全不透明.,这个方法会继承到子元素,使用的时候要看清了.方法三: 使用visibility:hidden;隐藏同样是给css属性添加,但是占位置...
2020-07-17 12:49:21
1375
原创 css精灵图的使用
精灵图如图所示精灵图可以优化网页加载逻辑,提升用户体验,通俗的说就是图片加载更快了.目前其主要是用在背景图上.用法html如下:<div class="box"> <span></span></div>css.box{ height: 1080px; weight: 1920px;}.box span{ background: url(images/abcd3.jpg) no-repeat; background-positi
2020-07-17 12:35:37
165
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人