发表于： 2019-12-03 17:42:45
1 902
今日完成：
知识扩展:
JS获取DOM元素的方法（8种）
1.通过ID获取（getElementById）
2.通过name属性（getElementsByName）
3.通过标签名（getElementsByTagName）
4.通过类名（getElementsByClassName）
5.通过选择器获取一个元素（querySelector）
6.通过选择器获取一组元素（querySelectorAll）
7.获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的
8.获取body的方法（document.body）
document.body是专门获取body这个标签的。
---------------------------------------------------------------
因为flex布局识别子元素的外边距，所以用less语法嵌套时，要记的把未覆盖的的属性恢复默认设置
代码：
/加号,减号样式
.ioc-l{
font-size: 30px;
font-weight: 900;
margin-right: 60px;
color:@p-2;
margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
}
.ioc-r{
.ioc-l;
margin-left:60px;
margin-right: 0px;
}
显示：
否者样式会出现偏差
//-------------------------------------------------
CSS linear-gradient() 函数
定义与用法
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
为了创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。
还要定义终止色。终止色就是想让Gecko去平滑的过渡，并且必须指定至少两种，
当然也会可以指定更多的颜色去创建更复杂的渐变效果。
CSS 语法：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
值 | 描述 |
direction | 用角度值指定渐变的方向（或角度）。 |
color-stop1, color-stop2,... | 用于指定渐变的起止颜色。 |
ex：
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(red, yellow, blue);
}
</style>
描述：从上到下，开始的线性渐变，从红色开始，转为黄色，再到蓝色
<style>
#grad1 {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to right, red , yellow);
}
</style>
描述：
从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：
ex：
<style>
#grad1 {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to bottom right, red , yellow);
}
</style>
<div id="grad1"></div>
显示：
描述：从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色
ex：
...
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
...
显示:
总结：
1.linear-gradient() 函数，可以看成一种特殊的背景颜色(用color给字体是无效的,只能做背景)，写在css中
2.想要运用这个函数linear-gradient(),后方的括号中,最少要有两个颜色,中间用逗号隔开,前者是起始颜色,后者是终止颜色,显示就是起始颜色到终止颜色过渡的过程,
ps:只有一个颜色是无效的,可以有两个相同的颜色,显示就是这个颜色
3.只设置颜色,不设置方向,起始颜色到终止颜色,线性渐变的`过程就是从上往下的,设置方向,就是(to 方向,颜色一,颜色二),方向只有一个,就是渐变的去向,起始方向就是与之相对的方向
ex:
to right, 颜色渐变的方向,就是从左往右渐变
to top left 颜色渐变的方向,就是从从右下角向左上角渐变
4.颜色最少设置两个,也可以设置多个,设置多个就是前一个颜色的终止颜色,又是下一个颜色得起始颜色,各个颜色所占面积平均分配
5. Internet Explorer 8 及之前的版本不支持渐变,所以为兼容,在设置这个颜色上方,添加一个background-color: 不支持时显示的颜色; /* 不支持线性的时候显示 */
background-image: linear-gradient(颜色一,颜色二)要写在下方,不然会被覆盖
ps:如果主动去覆盖渐变色,用background:xxx,而不是background-color:xxx;因为background-image: linear-gradient()生效的情况下,
哪怕background-color:xxx写在下方也无法被覆盖,前者background-image在浏览器的权重较高,无法被background-color覆盖,
虽然效果一样,但是background权重是跟background-image同级,谁被覆盖根据在css中的上下位置来决定
6.也可以用角度代表方向,但是0度时起始方向从下往上渐变,正值角度是顺时针旋转,颜色渐变方向随旋转角度而改变,渐变方向更加多变
ex:
如上显示：
background-image: linear-gradient(to right, red, yellow);
相当于：
background-image: linear-gradient(90deg, red, yellow);
ps：原本以为是input type=“range”中的方法，结果就是为了让进度条更好看的颜色
//------------------------------------------------------------------------------------------------------------------------------------------------
扩展;
焦点是什么？
焦点即是 光标
失去焦点和获取焦点是一个鼠标行为，例如当点击数个输入框其中的一个使其处于编辑输入状态的时候就是获得可焦点，当点击其他输入框或者其他区域就会使这个输入框失去焦点
对应大前端开发的当中就是两个JavaScript事件就是onfocus和onblur事件，onfocus 事件在对象获得焦点时发生，onblur 事件会在对象失去焦点时发生。
//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
JS 什么是 冒泡 和 捕获？
冒泡和捕获是指在元素上的事件被触发的时候，js 传递事件的两种方向，或者说过程。
ex：
html
<div id="lv1" class="level">
<div id="lv2" class="level">
<div id="lv3" class="level">
<div id="lv4" class="level">
</div>
</div>
</div>
</div>
less
... ...
js
... ...
显示：
描述：
js 做的事：
在页面载入的时候，给三个 div 添加 click 监听方法，自己被点击的时候会在 console 中输出自己的 id 值。
页面的结构是这样的 lv1 包含lv2，lv2 又包含 lv3，当点击 lv3 的时候，其实也点击了lv2 和 lv1，因为 lv3 在 lv2 内部，点击 lv3 的时候，自然也点击了 lv2 和 lv1，也就是说，点击 lv3 的时候，会触发三个 click 事件。
至于这三个事件触发的顺序，就是所谓的 冒泡 和 捕获。
-------------------------------------------------------------------
事件触发经过的三个阶段：
捕获阶段：先由文档的根节点 document 往事件触发对象，从外向内捕获事件对象；
定位目标：寻找到目标事件位置（事发地），触发事件；
冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。
1. 捕获阶段
如上面的例子，在 lv3 被点击的时候，js 会从文档的最上层开始，由外向内寻找点击事件的起源，也就是 lv3。那么这个由外向内的过程就是 lv1 --> lv2 --> lv3，这三个 div 的 click 事件按照这个过程依次被触发。
这个触发的方向就是捕获的方向。
2. 冒泡阶段
在找到被点击的 lv3 之后，事件向上传递，过程是 lv3 --> lv2 --> lv1，此时依次触发 lv3、lv2、lv1 的 click 事件，这个由内向外的触发过程就称为冒泡
总结:
冒泡和捕获的关系，只会出现在包含和被包含的结构中，兄弟关系是不会有这种关系的。
冒泡和捕获只是方向的不同而已。
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
oninput 事件
定义和用法
oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
语法:
HTML 中:
<element oninput="myScript">
ex:
输入您的名字: <input type="text" value="Mickey" oninput="myFunction()">
<script>
function myFunction() {
alert("input 输入框值已发生变化。");//触发事件,显示的字符串
}
点击前显示:
点击输入框并输入字符之后:
上方显示:
上方显示:
描述:只有点击确定,才能在输入框内显示要输入的字符,且每输入一个字符,又会重新触发一次事件
onchange 事件
定义和用法
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
语法
HTML 中:
<element onchange="SomeJavaScriptCode">
JavaScript 中:
object.onchange=function(){SomeJavaScriptCode};
支持 onchange 事件的 HTML 标签：
onchange 属性可以使用于： <input>, <select>, 和 <textarea>。
ex:
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();//输入框的小写字母变为大写字母
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">//在失去焦点时运行函数
... ...
效果显示;
输入小写字母时
输入框呈蓝色,焦点还在输入框,显示的是正常输入的小写字母
鼠标点击其他地方,使输入框失去焦点,函数开始运行,使输入框中的小写字母变为大写字母
//--------------------------------------------------------------------------
nchange onpropertychange 和 oninput 事件的区别
1、onchange 事件与 onpropertychange 事件的区别：
onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。
onpropertychange 事件却是实时触发，即每增加或删除一个字符就会触发，通过 js 改变也会触发该事件，但是该事件 IE 专有。
2、oninput 事件与 onpropertychange 事件的区别：
oninput 事件是 IE 之外的大多数浏览器支持的事件，在 value 改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过 js 改变 value 时，却不会触发。
onpropertychange 事件是任何属性改变都会触发的，而 oninput 却只在 value 改变时触发，oninput 要通过 addEventListener() 来注册，onpropertychange 注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离）
3、oninput 与 onpropertychange 失效的情况：
(1)oninput 事件：a). 当脚本中改变 value 时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。
(2)onpropertychange 事件：当 input 设置为 disable=tru e后，onpropertychange 不会触发。
//----------------------------------------------------------------------------------------------------------------------------------------------
根据任务要求,要实时传递改变的数值,所以用oninput
遇到问题:
描述:输入框内的数字,只能在4~9之间,不能写11~17,因为写1就会变成4
原因:if(value>18)value=18;if(value<4)value=4"
当输入小于4时就直接变成4
解决:if(value>18)value=18;if(value<4&&value!=1)value=4"
扩展:
js判断语句
$$且
或||
不等于!=
等于==
遇到问题:设置参数联动后,只有输入框能控制滑动轴,但是滑动轴不能动
原因:
function va1(){
slider.value=player.value
}
只有一个函数运行,为输入框的value值实时与进度条的value值相等
解决:
需要再设置一个函数,运行实时进度条的值与输入框的值相等
function va2(){
player.value=slider.value
}
遇到问题:
在html的input标签中设置的,限定条件失效,
原因:函数va1设置在了条件语句的前方,具体原因未知
遇到问题:还是有一部失效,
原因:直接设置在html中的函数和js中声明函数,都是oninput一个监听,
----------------------------------------------------------------------------------------------------
有些混乱,重新里一遍
<input type="number" class="input" maxlength="2" value="8">
遇到问题:maxlength="2"无效
1、当input，type为text时，设置maxlength后，能限制输入内容长度；
2、当input，type为tel时，设置maxlength后，也是能限制输入内容长度，并且弹起键盘为默认为数字键盘；
3、原因:当input，type为number，设置了maxlength，是无法正常限制输入内容长度的，input元素内还是可以无限的输入内容。
解决方法：
1.通过监听input的输入，input事件。
<input type="number" οninput="if( this.value.length > 4 ) this.value = this.value.slice(0,4)">
当输入超过4位后，会进行截断，保留前面的4位。
用vue，使用@input
但是会有小小不好的体验，输入第五位的时候，会先显示第五位，然后再删除第五位。因为这是通过监听input事件，来实现的。
2.将number改为tel类型，然后设置maxlength。因为设置type为tel后，也是只能输入数字。然后只能输入相应的位数。
遇到问题:
<input type="number"
还能输入字母e和.+-
解决:
要想设置number框只允许输入纯数字的话,
在onkeypress的属性里设置一个按键方法，来控制允许输入的值
οnkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
去除默认计时器
css代码
//(下)清除input[type=number]的默认样式
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
//(上)清除input[type=number]的默认样式
并且发现,限制输入框内最大值最小值,之后,并不需要再限制输入框只能输入两位数,功能重叠了
------------------------------------------------------------------------------------------------------
input type="text"做
限制输入为数字
<input type="text" class="input" min="4" max="18" onkeyup="value=value.replace(/[^\d]/g,'')" />
其中,红字部分无效,不能直接设置最大值和最小值,
绿字部分限制只能输入数字
设置函数oninput,在其中设置最大值和最小值,
ps:在这里可以设置最大长度maxlength但是,与最大值效果重叠,没有必要
js代码:
function va1(){
if(player.value>18)
{
player.value=18
}
else if(player.value<4&&player.value!=1)
{
player.value=4
};
slider.value=player.value
}
ps:va1()函数触发条件,是输入框输入一个值,但是函数运行的目标并不一定,是触发函数运行条件的标签,
如:上述标红的部分一定要写,否者目标不明确,函数运行,也是无效函数,即:函数运行条件,和函数运行后的目标是分开的两码事,都要明确
遇到问题:
输入框首次输入后,值不能删除,会一直停留在4,添加数字就直接变成18
原因:函数运转
lse if(player.value<4&&player.value!=1)
{
player.value=4
所以始终停留在4,添加数字又会跳转另一部分结果18,来回跳
解决:
当达成条件player.value<4&&player.value!=1)时,把value=4改为value="",设置成一个空值,即:输入框无值为空(显示为无法输入),
并且用alert弹出提示框
为进度条与输入框显示一致,设置初始值value=8
遇到问题:
用type="number"限制输入数字各种小问题问题,
收获:
1.8种获取(绑定)DOM元素的方法,但常用的应该还是那么3个
2.渐变颜色,算是理解的比较透彻
3.明白什么叫做焦点
4.达成函数运行,和函数运行的目标,是两件事
5.oninput和onchange的用法及区别
6.if...esle...用法理解加深
明日计划:继续js任务2
返回列表
评论