提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
一、js之switch语句练习
定义一个文本输入框与一个按钮
<input type="text" id="month" placeholder="请输入月份的值" />
<input type="button" value="点击查询" onclick="myMonth()" />
按钮就相当于事件源,并且将myMonth()绑定到事件源上
昨天做过一个输入月份让他去判断此时的季节,在判断的部分,使用的是if函数来进行判断,今天使用简单的switch函数的话,用case 1:来进行判断,此时,value的值是string类型的,而case后面的1类型是整形,两者的类型是不同的
<script>
//执行一个函数---点击"点击查询"这个按钮,触发"点击事件"
function myMonth(){
var textContent = document.getElementById("month").value ;
//textContent是String类型,而case后面的值Number
textContent = parseInt(textContent) ;
switch(textContent){
//利用case传统
case 3:
case 4:
case 5:
alert("春季") ;
break ;
case 6:
case 7:
case 8:
alert("夏季") ;
break ;
case 9:
case 10:
case 11:
alert("秋季") ;
break ;
case 1:
case 2:
case 12:
alert("冬季") ;
break ;
default:
alert("非法数据") ;
break ;
}
}
</script>
二、js之循环结构语句
for循环的使用
for(初始化语句;条件表达式;控制体语句){
循环体语句;
}
for循环执行流程:
1)首先初始化语句执行一次,给变量赋值
2)判断条件表达式是否成立,如果成立,就执行循环体语句
3)继续执行控制体语句(也称为"步长语句"),++或者-- 对变量自增或者自减1
4)继续判断条件表达式是否成立,如果成立,继续执行循环体语句,执行控制体语句,
…
…
5)直到条件表达式不成立,for循环结束!
1.在浏览器中打印N次
js循环的核心思想是当针对重复数据操作,重点在"循环"
for:开发中最常见的
while:其次
do-while:很少使用的在开发中
最原始的做法
<script>
//需求:需要在浏览器中打印,5次 "helloworld"
//最原始的做法
document.write("helloworld"+"<br/>") ;
document.write("helloworld"+"<br/>") ;
document.write("helloworld"+"<br/>") ;
document.write("helloworld"+"<br/>") ;
document.write("helloworld"+"<br/>") ;
</script>
同时我们可以使用for循环来更简单的表达出来
2. for循环的使用
<script>
for(var i =1 ; i <=5; i ++){ //i=1,1<=5 ,第一次执行循环体;i++ 变成2...
//循环体
document.write("helloworld"+"<br/>") ;
}
document.write("<hr/>") ;
//1-10---输出到浏览器上
for(var i =1; i <=10 ; i++){
document.write(i+"<br/>") ;
}
</script>
3.求和思想
<script>
var sum = 0 ;
for(var i = 1 ; i<=10 ; i ++){
//i=1...10都可以取出来
//sum += x ; //等价于 sum = sum + x ; 将符号左边的数据和右边的求和,在赋值给左边的变量
sum = sum + i ; //sum = 0 +1 ; sum = 1
//i++;i=2, 2<=10, sum = 1 + 2 = 3
//i++;i=3,3<=10, sum = 3 + 3 = 6
}
document.write("1-10之间的和是:"+sum) ;
</script>
4.阶乘
<script>
//定义一个结果变量
var jc = 1 ;
for(var i = 1; i <=5 ; i ++){
jc*=i ; // jc = jc * i ;
//1)jc = 1 * 1 = 1
//2)i++,i=2,2<=5 , jc = 1 * 2 = 2
//3)i++,i=3,3<=5,jc = 2 * 3
//4)i++,i=4,4<=5, jc=6 * 4
//5)i++,i=5,5<=5,jc=24 * 5
//6)i++,i=6, 6<=5 ,不成立,循环结束!
}
document.write("5的阶乘是:"+jc) ;
</script>
三、while_do-while语句
while格式
初始化语句;
while(条件表达式){
循环体语句;
控制体语句(步长语句) ;
}
while 执行流程:
1)初始化语句对变量赋值
2)判断条件表达式是否成立,
成立,则执行循环体,一次执行步长语句;
3)再次判断条件表达式是否成立,…
4)条件不成立,循环结束!
for循环: 明确循环的次数,使用for
while循环:不明确循环的次数,使用while
常见的死循环:
while(true){
//当满足某种条件的时候,break; 结束循环!
}
1.while语句在浏览器中输出 5次"helloworld"
<script>
// 初始化语句;
var i = 1 ;
while(i<=5){
document.write("helloworld<br/>") ;
i ++ ;
}
</script>
2.do-whike格式
do-while格式 实际开发场景下,用的很少!
初始化语句;
do{
循环体语句;
控制体语句(步长语句);
}while(条件表达式) ;
<script>
//需求:在控制台输出 6次,"我爱高圆圆"
var x = 7;
do{
document.write("我爱高圆圆<br/>") ;
x++ ;
}while(x<=6) ;
</script>
do-while和for以及while循环最大的区别:
即使条件不成立,循环体至少执行一次!
四、for的应用
使用水仙花的例子来练习for的使用
<script>
//document.write(Math.floor(153/10 % 10) ) //Math.floor(值):向下取整
//1)明确三位数,使用for循环 100-999
for(var i = 100 ; i <=999; i++){
//确定每个位数据值
var ge = i % 10 ;
var shi = Math.floor(i/10 % 10) ;
var bai = Math.floor( i/10 /10 % 10) ;
//满足条件,i ==(ge*ge*ge+shi*shi*shi+bai*bai*bai)
if(i==(ge*ge*ge+shi*shi*shi+bai*bai*bai)){
document.write("水仙花数是:"+i+"<br/>");
}
}
</script>
五、js内置对象date
date对象:表示当前日期对象
如何创建?
三种写法(手册) 我们通常只使用第一种:
dateObj=new Date();
浏览器想要显示2022年4月25日
date对象给我们提供了什么功能?获取年月日…
对象名.访问方法名();
<script>
var dateStr =new Date() ;
var year =dateStr.getFullYear();
document.write(year+"年");
//获取月份
var month =dateStr.getMonth()+1;
document.write(month+"月");
//获取月份中的日期
var date = dateStr.getDate();
document.write(date+"日");
</script>
六、innerHTML和innerText属性
任何标签都有这两个属性
innerHTML 设置标签的文本内容
innerText
如何动态给span或者div添加文本内容
使用dom操作
1.给个id 通过一个固定语法 获取id=“属性值”
docuement.getElementById.(“id属性值”);
2.标签对象.innerHTML =“”;//可以加入html标签 (常用)
innerText=“设置普通文本”;
<body>
<span id="spanTip"></span>
</body>
<script>
var span = document.getElementById("spanTip") ;
span.innerHTML = "<h1>我爱高圆圆</h1>" ;
</script>
七、一个网页时钟
访问页面,
1.立马给span设置文本内容 当前时间的时间字符串,每经过一秒,重复执行(定时器)
2. 每过一秒,重复执行,产生日期时间字符串(定时器)
1.需要将myDate这个日期时间字符串 ,动态添加到span标签的文本内容中
2.通过id=“tip” 获取span标签对象
3.设置span标签的文本内容: innerHTML
4.每经过1秒钟,重复性的执行,产生日期时间字符串(定时器)
<body>
<h3>当前时间是:</h3>
<span id="tip"></span>
</body>
<script>
function myGenDate(){
//先将日期对象创建出来,获取年,月,日,时分秒
var dateStr =new Date();
//拼接出日期时间字符串
var myDate = dateStr.getFullYear()+"-"+(dateStr.getMonth()+1)+"-"+dateStr.getDate()
+"  "+dateStr.getHours()+":"+dateStr.getMinutes()+":"+dateStr.getSeconds() ;
var span= document.getElementById("tip");
//设置span标签的文本内容: innerHTML
span.innerHTML = "<h3>"+myDate+"</h3>" ;
}
setInterval("myGenDate()",100);
</script>
八、js内置string
js中string指字符串数据值
它的格式:
1.创建一个js字符串对象
var对象名 = new string(“字符串值”);
2.要表示一个字符串的间歇格式
var 对象名 =“字符串值”;
<script>
//创建一个字符串对象
var s1 =new String("hello");
document.write("s1:"+s1+"<br/>");
//对上面的简写
var s2 ="hello";
document.write("s1:"+s2);
document.write("<hr/>");
var s="helliwordjavaEE";
document.write(s.fontcolor("green")+"<br/>");
document.write("√".fontcolor("green")+"<br/>");
document.write("<hr/>");
</script>
九、js中的函数定义域调用
js中定义函数的格式
function函数名就是你的方法名(形式参数列表){
业务代码…
}
调用函数:
1.单独调用:函数名称(实际参数列表)
2.function 函数
注:1.形式参数中不能带var,直接写名称
2.在定义的函数例可以直接输出内容
var 变量=形式参数进行运算;
直接输出结果或在js中函数里面可以带return返回一个具体的结果值
<script>
//定义一个函数(方法),这个方法要进行求和
function sum(a,b){
//return表示结束方法,并带给调用者一个结果
return a+b;
}
var maResult= sum(40,50);
document.write("和为:"+maResult);
</script>