JS第2天学习笔记
一、循环退出
<script>
// 逢7过
for (var i = 1; i < 100; i++){
// 如果i是7的倍数或者i中有7
if (i%7==0 || i%10==7 || (i>69&&i<80)){
// continue 立即结束本次循环的执行,执行控制循环变量修改,然后再进入循环
// 立即结束当前次循环,直接执行下一次循环
console.log("过！")
continue
}
console.log(i)
}
// 循环100次
for (var i=0;i<100;i++){
if (i == 66){
// break 直接结束循环,break之后的循环代码不再执行
// break 结束离它最近的循环
break
}
console.log(i)
}
for (var i=0;i<10;i++){
for(var j=0;i<10;j++){
if (j == 5){
// 当前这个break只能结束内层循环
break
}
console.log(i*j)
}
}
var num = 1;
while(num < 2019){
if (num%4==0 && num%1000==0){
console.log(num)
// 修改控制循环变量值,让循环条件不成立,也可以结束循环
// num = 3000
break
}
num ++
}
</script>
二、函数
<script>
// 函数:封装了一段功能代码的代码块
// function 关键字,用于声明一个函数
// 格式: function 函数名(参数列表){函数体}
// 函数名和变量名的命名规范一致,遵守小驼峰命名法,参数之间用,逗号隔开
function eat(){
// 函数执行的业务逻辑代码
console.log("买菜")
console.log("洗菜")
console.log("切菜")
console.log("炒菜")
console.log("吃饭！")
}
// 调用函数
eat()
// 参数: 执行函数时必要的一些数据
// 去商店买水
function byWater(money){
// money参数可以不传递,默认值undefined
if (money == 2){
console.log("农夫山泉")
}else if(money == 3){
console.log("百事可乐")
}else{
console.log("你要啥？")
}
}
// 调用函数
byWater(10)
// 函数可以多次重复调用
// byWater(20)
// 多个参数
function byWater2(money, name){
console.log("你给了" + money + "元，要买" + name)
}
// 调用多个参数函数时,需要将参数依次传入
byWater2(10, "康师傅矿泉水")
// 带返回值的函数
function byFood(money, name){
console.log("你给了" + money + "元，买" + name)
if (name == "泡面"){
var ye = money - 4
// return 结束函数执行并返回函数执行结果
return ye
}else if(name == "火腿肠"){
var ye = money - 2
return ye
}
}
// 声明变量接收函数执行返回的结果
// 将右侧函数执行返回结果, 赋值给变量m
var m = byFood(10, "泡面")
var m2 = byFood(m, "火腿肠")
</script>
三、变量作用域
<script>
// 直接在script下直接声明的变量
var outer = 10;
function f1(){
// 函数内部可以使用函数外部定义的变量
console.log(outer)
// 函数内部声明的变量
var inner = 20;
function f2(){
}
}
f1()
// 在函数外部不能使用函数内部声明定义的变量
// console.log(inner)
// 变量是定在作用域中的
// 代码最外层的作用域(全局域),在全局域中声明的变量叫做全局变量(作用域范围：从声明开始到整个全局域结束)
// 一个函数的内部会形成一个独立的作用域,叫做局部作用域,在这个作用域中声明的变量叫做局部变量(作用域范围：从声明开始到局部作用域结束)
// 局部作用域中可以使用全局变量,但是在全局域中不能使用局部变量
// ==========================================
// 全局变量
var num = 10;
function f3(){
// js代码在执行之前,会被预处理,进行函数和变量的声明,变量声明会被提前但是赋值不会提前
// undefined js中的一个设计缺陷 ES6 之后 js的严格模式(所有的变量必须先声明后使用)
console.log(num)
// 在局部作用域中声明了变量,和全局变量同名,局部变量会覆盖全局变量
// 在局部作用中声明局部变量时,不要和全局变量同名,否则会导致局部范围内全局变量被覆盖
var num = 20;
// 20
console.log(num)
}
f3()
// 10
console.log(num)
</script>
四、switch-case分支结构
<script>
// prompt() 在弹窗输入内容
var day = prompt("今天星期：")*1
// 根据数字输出英文版的周几
// if (day == 1){
// console.log("Monday")
// }else if(day == 2){
// console.log("Tuesday")
// }
console.log(day)
// switch语法结构
// switch(变量){ case 值: xxxxx; break}
// switch 中 case检测的值的类型必须和变量值的类型一致
switch (day){
case 1:
console.log("Monday")
break;
case 2:
console.log("Tuesday")
break;
case 3:
console.log("Wednesday")
break;
case 4:
console.log("Thursday")
break;
case 5:
console.log("Friday")
break;
case 6:
console.log("Saturday")
break;
case 7:
console.log("Sunday")
break;
default:
console.log("没有这一天！")
break;
}
// ==================================
var month = prompt("请输入月份！") *1
switch (month){
case 2:
case 3:
case 4:
console.log("春天")
break;
case 5:
case 6:
case 7:
console.log("夏天")
break;
case 8:
case 9:
case 10:
console.log("秋天")
break;
case 11:
case 12:
case 1:
console.log("冬天")
break;
default:
console.log("没有这个月份！")
break;
}
// 判断两个变量是否相等
var a = 10;
var b = "10";
// == 比较的等号两边变量的值是否相等,不进行类型判断
// === 如果要同时判断值和类型都是否相等,可以使用===
// == 和 === 有什么区别？
if (a === b){
console.log("相等")
}else{
console.log("不相等")
}
</script>
五、Math对象及常用的数学方法
<script>
// js中有很多系统自带的对象,称之为内置对象
// Math对象是js中内置对象
// 数学函数和表达式
console.log(Math.PI)
// 自然对数
console.log(Math.E)
// abs() 绝对值函数
console.log(Math.abs(-10))
// pow() 幂运算 ,计算x的y次方
console.log(Math.pow(3,4))
// sqrt 开平方运算
console.log(Math.sqrt(9))
// 开多次方运算 pow
console.log(Math.pow(27,1/3))
// 三角函数
// Math.sin()
// Math.cos()
// Math.tan()
// Math.cot()
// max() 取最大值,找到出最大的值
console.log(Math.max(4564,487,412,45,10000))
// min() 取最小值
console.log(Math.min(1,45,7854,7554,455))
// floor() 向下取整
console.log(Math.floor(1.6))
// ceil() 向上取整
console.log(Math.ceil(1.2))
// round() 四舍五入
console.log(Math.round(1.5))
// random() 生成0~1之间的随机小数
console.log(Math.random())
console.log(Math.random()*100)
// 生成-100~100随机数
console.log(Math.random()*200 - 100)
// 生成 50~100随机数
console.log(Math.random()*50 + 50)
</script>
六、小例子1.个人所得税计算器
<body>
<input id="money" type="text" placeholder="请输入您的税前工资">
<br>
<button onclick="calcTax()">计算</button>
<button onclick="calcTax()">计算2</button>
<p id="result"></p>
<!--
税前工资：10000
五险一金有封顶上限：7662 例如：税前工资10000 五险一金 = 7662 * 0.225 税前工资5000 五险一金 = 5000*0.225
五险一金：22.5%
应纳税所得额 = 税前工资 - 社保 - 起征点(5000)
税额 = 应纳税所得额 * 适用税率 - 速算扣除数
超过起征点的部分按照税级选择税率，然后减去速算扣除数。
范围 税率% 速算扣除数
1 不超过1500元的 3 0
2 超过1500元至4,500元的 10 105
3 超过4,500元至9,000元的 20 555
4 超过9,000元至35,000元的 25 1,005
5 超过35,000元至55,000元的 30 2,755
6 超过55,000元至80,000元的 35 5,505
7 超过80,000元的 45 13,505
-->
<script>
function calcTax(){
// 1.获取用户输入的税前工资
var money = document.getElementById("money").value
// 当获取的money为空时,提示需要输入工资再进行计算
// console.log(money)
// console.log("")
if (money != ""){
// 2.计算五险一金金额
var shebao;
// 判断税前工资是否大于上限7762
if (money >= 7662){
shebao = 7662 * 0.225
}else{
shebao = money * 0.225
}
// 3.计算应纳税所得额
var ynssde = money - shebao - 5000
// 4.判断应纳税所得额所在的阶梯
var shuie;
// 5.根据阶梯税率和速算扣除
if (ynssde <= 0){
shuie = 0
}else if(ynssde <= 1500){
shuie = ynssde * 0.03
}else if(ynssde <= 4500){
shuie = ynssde * 0.1 -105
}else if(ynssde <= 9000){
shuie = ynssde * 0.2 - 555
}else if(ynssde <= 35000){
shuie = ynssde * 0.25 - 1005
}else if(ynssde <= 55000){
shuie = ynssde *0.3 - 2755
}else if(ynssde <= 80000){
shuie = ynssde * 0.35 - 5505
}else{
shuie = ynssde * 0.45 - 13505
}
// 6.计算到手工资 到手工资 = 税前工资 - 社保 - 税额
var myMoney = money - shebao - shuie
// 7.将计算结果显示到页面上
var rsP = document.getElementById("result")
rsP.innerText = "到手工资：" + myMoney.toFixed(2) + "，税额：" + shuie.toFixed(2) + "，社保：" + shebao.toFixed(2)
}else{
// alert() 弹窗
alert("请填写工资后再进行计算！")
}
}
</script>
</body>
小例子2：猜数字游戏
<body>
<input id="number" type="text" placeholder="请输入0~100内的整数"><br>
<button onclick="submit()">提交</button>
<script>
// 生成随机数
// Math 数学对象 一些常用的数学公式
// random() 0~1
// console.log(Math.random()*100)
// 生成一个0~100范围内的随机整数
// var answer = Math.floor(Math.random()*100)
// var num = 1.2
// Math.floor()向下取整
// Math.ceil()向上取整
// num = Math.floor(num)
// 1.生成一个随机整数作为答案
var answer = Math.floor(Math.random()*100)
console.log(answer)
// 声明变量,记录当前猜测的次数
var count = 1
function submit(){
if (count > 5){
var rs = confirm("次数已用完，是否重新开始？")
if (rs){
// 重置答案
answer = Math.floor(Math.random()*100)
// 重置次数
count = 0
alert("答案已重置，请重新开始！")
}
// return 强制结束函数执行.return之后的代码不会再执行
return
}
// 2.获取用户输入的答案
var userAS = document.getElementById("number").value
if (userAS == ""){
alert("请输入数字后再提交！")
}else{
// 3.比较正确答案和用户输入的答案
if (userAS > answer){
// 3.1 用户答案>正确答案 显示 猜大了
alert("猜大了！")
// 猜测次数+1
count ++
}else if(userAS < answer){
// 3.2 用户答案<正确答案 显示 猜小了
alert("猜小了")
count ++
}else{
// 3.3 用户答案==正确答案 显示 猜对了
// alert("恭喜您，猜对了！")
// confirm() 确定和取消按钮,并且会返回点击的是哪个按钮
var rs = confirm("恭喜您，猜对了！是否继续玩？")
// 判断是否要继续玩
if (rs){
// 重置答案
answer = Math.floor(Math.random()*100)
// 重置次数
count = 0
}
}
}
}
</script>
</body>
扫一扫
1041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
