发表于： 2019-12-04 21:54:33
1 851
今日完成:
进度条两边的加号或者减号绑定输入框
//进度条右边的加号,运行条件点击加号,目标输入框的value值,效果每点击一次输入框value执行加一
function add(){
player.value=player.value+1;
}
//进度条左边的加号,运行条件点击加号,目标输入框的value值,效果每点击一次输入框value执行减一
function sub(){
player.value=player.value-1;
}
遇到问题:
描述:加法运算直接在原本数字后方加一,减去1正常
加法默认值8后面连接1,没有运算
减法就是value的值减去1,正常运算
原因:js把value的值默认当成字符串处理,和数字1连接起来,所以每次点击,这个字符串后面就会多出一个数字1,
因为减号只代表减号,所以运转正常
解决:
方法一:
parseInt()是js的解析字符串的函数，返回解析后的数字
代码:
player.value=parselnt(player.value)+1//无效,原因未知
player.value=parselnt(player.value)+parselnt(1);//不仅无效点击加号运行函数还报错
失效
原因:未知
方法二:
用运算符号++,让它自加
player.value++;//运用符号方法可行,每次点击值加一
验证demo:
//设置demo,观察加号是起连接作用还是运算作用,这里控制太输出是3,起运算作用
var a=1
var b=2
var c=a+b
console.log(c)
控制台输出是3,进行了运算;
思考:
1.什么时候js会默认数字是一个字符串,运用加号(+)时,是把它和另一个数字连接起来?
什么时候js会默认数字代的是一个数字,运用加号时,是把它和另一个数字相加,进行加法运算?
2.js中字符串类型的之间该怎么转化?
如这个问题中,需要将js默认为字符串转为数字
遇到问题:
描述:
1.点击加号或者减号,在输入框的value值改变时,进度条没有联动
2.点击加号或者减号,超出了之前函数设置的条件语句
显示:
问题:上述都是一个问题,之前的函数都没有运行
解决:没运行,就点击运行的函数再加上这一过程
思考:为什么输入框内的值改变设置的另一个函数却没有运行?
原因:oninput属性,当input输入框有有焦点时才会运行,运行的另一个函数,直接加数值当然不会运行这个函数
--------------------------------------------------------------------------------------------------------------
杀手平民分配是每满4个人就有一个是杀手,3个是平民,
杀手人数:就是,总人数除以4,下舍入整数
平民人数:总人数减去杀手人数
js代码:
lil.value=Math.floor(player.value/4);//杀手人数运算
civ.value=player.value-lil.value; //平民人数运算
遇到问题:
绑定输入框后,刷新没有值
原因:还是之前的问题,oninput有焦点时才会运行,没焦点时自然没有运行,自然也就没有传值
解决:给杀手输入框,和平民输入框,也加上与总人数输入框相对应的默认值
遇到问题:点击事件,还有直接拉动滑块在改变总人数输入框的value值的同时,并不能传递出去给分配杀手平民
原因:跟之前一样,就是改变了总人数的值,但是输入框没有获得焦点,函数就没有运行,不能传值
解决:
分别为每个函数,添加上
lil.value=Math.floor(player.value/4);//杀手人数运算
civ.value=player.value-lil.value; //平民人数运
ps:注意位置,一定要添加在player.value赋值之后
//--------------------------------------------------------------------------------------------------------------------------------
基础知识扩展
数据转换
Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。
JavaScript 数据类型
在 JavaScript 中有 5 种不同的数据类型：
string (字符串)
number (数字)
boolean (布尔值)
object (对象)
function (函数)
3 种对象类型：
Object (对象)
Date (日期)
Array (数组)
2 个不包含任何值的数据类型：
null (空值)
undefined (未定义)
--------------------------------------------
typeof 操作符
可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
ex:
ps:
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
如果对象是 JavaScript Array 或 JavaScript Date 就无法通过 typeof 来判断他们的类型，因为都是 返回 object。
总结:类似console.log(),对代码本身无影响,但对调试有用处
--------------------------------------------------------------------------------
基础知识:
数据转换
Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。
JavaScript 数据类型
在 JavaScript 中有 5 种不同的数据类型：
string (字符串)
number (数字)
boolean (布尔值)
object (对象)
function (函数)
3 种对象类型：
Object (对象)
Date (日期)
Array (数组)
2 个不包含任何值的数据类型：
null (空值)
undefined (未定义)
--------------------------------------------
typeof 操作符
可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
ex:
ps:
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
如果对象是 JavaScript Array 或 JavaScript Date 就无法通过 typeof 来判断他们的类型，因为都是 返回 object。
总结:类似console.log(),对代码本身无影响,但对调试有用处
//--------------------------------------------------------------------------------
JavaScript 变量可以转换为新变量或其他数据类型：
1.通过使用 JavaScript 函数
2.通过 JavaScript 自身自动转换
----------------------------------------------------------------
将数字转换为字符串
全局方法 String() 可以将数字转换为字符串。
该方法可用于任何类型的数字，字母，变量，表达式：
ex:
Number 方法 toString() 也是有同样的效果。
ex:
总结:
1.两种方式都是将数字转化为字符串,注意String的首字母大写
2.语法表现形式不同,前者目标写在方法括号内,后者写在方法的前方用点连接
-----------------------------------------------------------------------------
将布尔值转换为字符串
全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 "false"
String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 "false"
true.toString() // 返回 "true"
-----------------------------------------------------
将日期转换为字符串
Date() 返回字符串。
Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
全局方法 String() 可以将日期对象转换为字符串。
String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
Date 方法 toString() 也有相同的效果。
实例
obj = new Date()
obj.toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
遇到问题:为什么要为方法命名,再去做?
待解决
----------------------------------------------
将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
空字符串转换为 0。
其他的字符串会转换为 NaN (不是个数字)。
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
总结:类似全局变量String(),同样要记住首字母大写,记住不是数字字符串时返回的是什么
---------------------------------------------------------------------------------------------
一元运算符 +
Operator + 可用于将变量转换为数字：
ex:
总结:
1.在字符串前面添加+,就可以将字符串转为数值
2.在运算中,字符串加数字还是字符串,会根据数字的位置,直接把数字连接在字符串的前面或者后面,
只有都是数字,加号才起到运算作用
3.如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字)
即:把不能成为数字的字符串转换成了数字,浏览器按照数字识别的,然后报出NaN,说明这不是一个数字
-------------------------------------------------------------------------------------------------------------
将布尔值转换为数字
全局方法 Number() 可将布尔值转换为数字。
Number(false) // 返回 0
Number(true) // 返回 1
将日期转换为数字
全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d) // 返回 1404568027739
日期方法 getTime() 也有相同的效果。
d = new Date();
d.getTime() // 返回 1404568027739
------------------------------------------------------------
自动转换类型
当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。
5 + null // 返回 5 null 转换为 0
"5" + null // 返回"5null" null 转换为 "null"
"5" + 1 // 返回 "51" 1 转换为 "1"
"5" - 1 // 返回 4 "5" 转换为 5
总结:类似直接写var x=5+null,输出的x的值是什么,里面的值是怎么转换的
自动转换为字符串
当尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：
document.getElementById("demo").innerHTML = myVar;
myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"
myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"
myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"
myVar = 123 // toString 转换为 "123"
myVar = true // toString 转换为 "true"
myVar = false // toString 转换为 "false"
总结:上面红字部分类似转换字符串的效果
遇到问题:
总结起来就是oninput属性焦点事件的不熟悉导致问题,及其延伸出来的一系列问题;
解决这个问题之后,其他延伸出来的问题,也就想明白了
ps:突然发现onchange属性的实际应用范围,两个事件能共用一个函数,能省去很多操作代码
收获:
1.oninput的实际应用理解加深
2.数据转换
明日计划:
js2-4的下一个页面
返回列表
评论