发表于： 2019-12-01 22:10:21
1 965
今日完成:
js1深度思考
定时器有哪些用法？
在js语言中，有两种定时器。setTimeout()和setInterval()。有了定时器，我们可以实现很多效果。
一次性定时器(setTimeout())：仅在指定的时间后触发一次
定期定时器（setInterval())：定期触发
语法：
setTimeout(要执行的函数，时间)，时间的单位是毫秒。
setInterval(要执行的函数，时间)，时间的单位是毫秒。
常见问题
在按钮中使用定时器时，多次点击按钮，定时器的执行时间会变短。
解决方案
使用clearInterval()或 clearTimeout() 清除定时器
总结:前者清除计时器,后者可以用来单独使用适合它出现的应用场景,也可用来重置连续计时器,js1中都用到过,其他用法应该没有了
------------------------------------------------------------------------------------------------------------------------------------
ID和Class有什么区别？
元素唯一的ID：
在元素的开始标签中输入id名，格式 id="name"，name是id的名称，程序员自己起，这个id是唯一识别元素的名称，name不能有数字或者空格。
id个人建议是用来作为当前文档的链接，在文档中进行跳转的时候使用，HTML 文档中的每个 id 都必须是唯 一的。
换句话说，一个页面里不能出现两个具有相同 id 的元素，并且每个元素都只能有一个id。相同的id可以出现在不同的页面里， 同一 id也不一定每次都赋给同一元素，尽管这是惯常的做法。
元素的类别：
class是一个选择器，可以理解为一个标识，用来标识特定的标签，在英文中，class意为班级；阶级；分类；种类， 与id的唯一性不同，一个class类名可以被不一样的标签反复引用。
常见问题:
优先级问题
渲染速度的问题
解决方案:
在样式表达式定义一个样式的时候，可以定义id也可以定义class。
1、在CSS文件里书写时ID加前缀“#”；Class用“.”
2、id一个页面只可以使用一次；class可以多次引用。
3、ID是一个标签，具有唯一性，用于区分不同的结构和内容；而class可以在不同的结构内容里反复引入。
目前浏览器还都允许用多个相同的ID，在css中能够正常显示，不过当你需要用JavaScript通过id来控制标签时就会出错。
Q：我在css里一个id标签可以反复使用，为什么在js不可以了呢？
A：其实大家在刚接触id和class的时候，教材里就写的很清楚了id选择器是唯一的，只能调用一次，这个标准就是为js而设定的。
Q：class和id在js里的调用方式不一样吗？
A：对的，不一样
Q：什么时候用id，什么时候用class呢？
A：如果只调用一次，就用id，否则只能选择class
总结:以上为百度查找的,这个跟自己想的没啥大出入,反而是红字标的,别人随口说的是自己所不知道的
---------------------------------------------------------------------------------------------------------------------------
随机的出现一种颜色，随机的性能怎么样？
答:这个不知道,怎么样,能做的就是设置判断语句,如果有两个颜色相同,就重新随机,
且看了百度,发现rgb可以再完善一点,就是透明色,可以随机小数,设置透明度
剩下的问题涉及类型,栈,作用域之类的,不是很透彻,等在深入一点,再弄
//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
遇到问题:
<input type="number" class="input" maxlength="2" oninput =" value=value.replace(/[^\d]/g,'');if(value>18)value=18;if(value<4)value=4">
<input type="text" class="input" maxlength="2" oninput =" value=value.replace(/[^\d]/g,'');if(value>18)value=18;if(value<4)value=4">
描述:在input输入框类型为text时,用oninput =" value=value.replace(/[^\d]/g,'')限制,输入字符串必须为数字,作用域设置input type="number"类型设置为number作用相同,
if(value>18)value=18;if(value<4)value=4"作用,是限制输入数字的最大值为18,最小值为4,
input输入框,输入时当数字小于4时,就是4,大于18显示18,
当显示为4时,无法重置,当设置10~18时,打出1就会变成4,再添加就变18,只能在这两个数字间转换
暂时解决:type:number时,有上下调节数字的默认样式,暂时先用,等整体效果做出来再做修改
//----------------------------------------------------------------------------------------------------------------------------------
while 循环
while 循环会在指定条件为真时循环执行代码块。
语法
while (条件)
{
需要执行的代码
}
ex:
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
while (i<5){
x=x + "该数字为 " + i + "<br>";
i++;
}
document.getElementById("demo").innerHTML=x;
}
</script>
显示:
ps:忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。
但在实际操作中,点击按钮,直接无效
总结:while后面括号()就是终止循环语句的条件
--------------------------------------------------------
do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。
语法
do
{
需要执行的代码
}
while (条件);
ex:
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=6;
do{
x=x + "该数字为 " + i + "<br>";
i++;
}
while (i<5)
document.getElementById("demo").innerHTML=x;
}
</script>
显示:
总结:加上do之后,与原本while的区别,就是不管while括号内部,是否条件满足,都会循环运行一次内部的循环语句,不满足条件,运行一次后停止,
而不是原本的不满足条件,就不会运行
for循环和while循环的区别?
for循环和while循环语法规则略有不同，两种方法可以替换使用，但是在部分问题上各有优势。
当循环的次数确定时，使用for循环和while循环差别不大，但是当循环次数不确定时，while方法使用起来更加方便，更加好理解。
//--------------------------------------------------------------------------------------------------------------------------------------
进度条用到属性range
<input>类型的元素可range让用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。
语法: <input type="range">
ps:如果用户的浏览器不支持type range，它将回退并将其视为text输入。
这时可以用之前学到的,type是text时,怎么限制数字
支持的常用属性
autocomplete，list，max，min，和step
IDL属性
list，value和valueAsNumber
方法
stepDown() 和 stepUp()
验证方式
* 如果将value设置为无法转换为有效浮点数的值，则验证将失败，因为输入正遭受错误的输入。
* 该值不会小于min。默认值为0。
* 该值不会大于max。默认值为100。
* 该值将是的倍数step。预设值为1。
值
value
value属性包含，DOMString其中包含所选数字的字符串表示形式。
该值绝不能为空字符串（""）。默认值介于指定的最小值和最大值之间，
除非最大值实际上小于最小值，在这种情况下，默认值设置为min属性的值。
默认值的算法是：
defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
: rangeElem.min + (rangeElem.max - rangeElem.min)/2;
如果尝试将值设置为小于最小值，则将其设置为最小值。类似地，尝试将值设置为大于最大值会导致将其设置为最大值。
总结:就是一开始进度条出现的默认值,如果没有2设置value,就按上述计算公式显示最初的默认值,
也可以直接value="#",(#为任意目标数字),显示的初始默认值就是,输入的#,
且,如果设置了value,那么#不能是空字符串,就是说设置了value,就必须给一个定值,
且,如果设置了最大值或者最小值,如果#大于最大值,或者小于最小值,那么显示的就是设置的最小值,或者最大值
--------------------------------------------------------------------------------------------------------------------------------
max 最大允许值
允许值范围内的最大值。如果在value元素中输入的内容超出此范围，则该元素将无法通过约束验证。如果max属性的值不是数字，则元素没有最大值。
min 最小允许值
允许值范围内的最小值。如果value元素的小于此值，则该元素将无法通过约束验证。如果为其指定的值min不是有效数字，则输入没有最小值。
min的值必须小于或等于max属性的值。
不设置,默认值见上方
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
step
step属性是一个数字，用于指定值必须遵循的粒度或特殊值any，如下所述。仅等于步进基础的值（min如果指定，value否则指定；如果未提供任何默认值，则为适当的默认值）有效。
字符串值any表示不暗示任何步进，并且允许任何值（除非存在其他约束，例如min和max）。
ps:当输入的数据不遵循步进配置时，用户代理可能会舍入到最接近的有效值，当有两个相等的接近选项时，首选在正方向上的数字。
range输入的默认步进值是1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为1 。
ex:
设置min为-10和value1.5，则a中step的1将只允许正方向上的值，例如1.5、2.5、3.5，...，以及-0.5，-1.5，-2.5，...负面的方向。
任务代码:
<input type="range" max="18" min="4" step="1" value="8" />
<!--type="range"类型进度条,最大值为18,最小值为4,step进度每一格都是1(默认值,也可不设置)
value初始值是8,就是显示时指针停在数值8的位置,否则也有个默认的计算公式-->
显示:
------
收获:
1.任务一深度思考巩固,知道自己哪些不足
2.input进度条知识
遇到困难:状态不对,整个一天都有点浑浑噩噩,学习效率有点低下
明日计划:调整下状态
1.更改进度条默认样式
2.数据联动
把js2做完
返回列表
评论