目录
2.每经过1秒钟,重复性的执行,产生日期时间字符串(定时器)
注:增加三目运算的目的是为了输出的时分秒是00:00:00开始的
一、JavaScript循环结构语句
循环语句的核心思想是针对重复数据操作.
分类:
1)for循环
2)While循环
3)do-while循环
1.for循环语句
for循环语句是开发中最常见的,当明确循环的次数时,多使用for循环
for循环格式:
//for循环格式:
for(初始化语句;条件表达式;控制体语句){
循环语句
}
执行流程:
1)首先初始化语句执行一次,给变量赋值
2)判断条件表达式是否成立,如果成立,就执行循环体语句
3)继续执行控制体语句(也称为"步长语句"),++或者-- 对变量自增或者自减1
4)继续判断条件表达式是否成立,如果成立,继续执行循环体语句,执行控制体语句,
...
...
5)直到条件表达式不成立,for循环结束!
举例:
1)需要在浏览器中打印五次"helloeorld"
for(var i=1;i<=5;i++){
document.write("helloworld"+"<br/>");
}
2)将1~10一一输出到浏览器上
for(var i =1; i <=10 ; i++){
document.write(i+"<br/>") ;
}
3)在控制台输出1~10之间的和
var sum = 0 ;
for(var i = 1 ; i<=10 ; i ++){
sum = sum + i ;
}
document.write("1-10之间的和是:"+sum) ;
4)求1~100之间的和
var sum2 = 0 ;
for(var i = 1 ; i <=100 ; i ++){
sum2 = sum2 + i ;
}
document.write("1-100之间的和是:"+sum2)
5)求1~100之间的偶数和
var sum3 = 0 ;
for(var i = 1 ; i <=100 ; i ++){
//加入逻辑判断
if(i % 2 ==0){
//sum3 和i进行求和,赋值给sum3
sum3 = sum3+i ;
}
}
document.write("1-100之间的偶数是:"+sum3) ;
6)求5的阶乘
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) ;
7)for循环的应用
在浏览器中输出所有的水仙化数!
//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/>");
}
}
2.while循环语
当不明确循环的次数的时候,使用while句
while格式
初始化语句;
while(条件表达式){
循环体语句;
控制体语句(步长语句) ;
}
初始化语句;
while(条件表达式){
循环体语句;
控制体语句(步长语句) ;
}
执行流程:
1)初始化语句对变量赋值
2)判断条件表达式是否成立,
成立,则执行循环体,一次执行步长语句;
3)再次判断条件表达式是否成立,....
..
4)条件不成立,循环结束!
举例:
1)浏览器中输出 5次"helloworld"'
var i = 1 ;
while(i<=5){
document.write("helloworld<br/>") ;
i ++ ;
}
2)求1~100之间的和
var sum = 0 ;
//初始化语句
var m = 1;
while(m<=100){
sum = sum + m ;
m ++ ;
}
document.write("1-100之间的和是:"+sum) ;
3.do-while循环语句
do-while循环语句在实际开发场景下,用的很少!
最大的特点:即使条件不成立,循环体至少执行一次!
这也是do-while和for以及while循环最大的区别:
初始化语句;
do{
循环体语句;
控制体语句(步长语句);
}while(条件表达式) ;
执行流程:
1)初始化语句对变量赋值
2)直接执行循环体语句,步长语句进行++或者--,然后执行条件是否成立
3)成立,继续执行循环体以及步长语句
...
4)条件表达式成立,不成立
举例:
1)在控制台输出 6次,"helloworld"
var x = 1;
do{
document.write("我爱高圆圆<br/>") ;
x++ ;
}while(x<=6) ;
二、JavaScript内置对象
1.JavaScript内置对象之Date
Date对象:表示当前日期对象
如何创建js内置对象之Date
1)创建日期对象
//创建日期对象
var dateStr = new Date() ;
2)获取年份getFullYear();
//getFullYear()获取当前年份
var year = dateStr.getFullYear() ;
document.write(year+"年") ;
3)获取月份:getMonth();
注意:获取的是0-11之间的整数,后面加1,(1-12月份的值)
//获取月份:getMonth()
var month = dateStr.getMonth()+1 ;
document.write(month+"月") ;
4)获取月份中的日期值 getDate()
//获取月份中的日期值 getDate() ;
var date = dateStr.getDate() ;
document.write(date+"日  ") ;
5)获取小时 getHours()
//获取小时getHours()
var hours=dateTip.getHours();
document.write(hours+":") ;
6)获取分getMinutes()
//获取分 getMinutes()
var minutes=dateTip.getMinutes();
document.write(minutes+":") ;
7)获取秒 getSeconds()
//获取秒 getSeconds()
var seconds=dateTip.getSeconds();
document.write(seconds) ;
2.补充知识
1.innerHTML和innerText属性
任何标签都有这俩个属性:
innerHTML
innerText
都表示设置标签的文本内容
如何动态给span标签或者div块标签等等添加文本内容呢?
使用dom操作
1)给标签设置id属性
通过一个固定的语法:获取id="属性值"的标签对
var 标签对象 = docuement.getElementById("id属性值") ;
2)innerHTML可以加入常用的html标签进行渲染
标签对象.innerHTML = "<h1>hello</h1>";
innerText不会渲染标签!会将标签输出浏览器中
标签对象.innerText = "设置普通文本" ,"<h1>hello</h1>",
2.每经过1秒钟,重复性的执行,产生日期时间字符串(定时器)
window对象里面setInterval(任务函数(),毫秒值) ;
window.setsetInterval("任务函数()",毫秒值) ,每经过这个毫秒值后,重复执行任务函数
window.setsetInterval("任务函数()",毫秒值)
可以省略window
.setTimeout("任务函数名称()",毫秒值);
可以应用于网页时钟
3.网页时钟练习
<script>
function myDateTip(){
//先将日期对象创建出来,获取年,月,日,时,分,秒
var dateTip=new Date();
//拼接出日期时间字符
var year=dateTip.getFullYear();
var month=dateTip.getMonth()+1;
var day=dateTip.getDate();
var hours=dateTip.getHours();
var minutes=dateTip.getMinutes();
var seconds=dateTip.getSeconds();
hours=hours<10?"0"+hours:hours;
minutes=minutes<10?"0"+minutes:minutes;
seconds=seconds<10?"0"+seconds:seconds;
var myDate=year+"-"+month+"-"+day+"  "+hours+":"+minutes+":"+seconds;
//需要将myDate这个日期时间字符串,登台添加到span标签的文本内容中
//通过"id=spantip",获取span标签对象
var span=document.getElementById("spanTip");
//设置span标签的文本内容:innerHTML
span.innerHTML="<h3>"+myDate+"</h3>"
}
//每经过1秒钟,重复性的执行,产生日期时间字符串(定时器)
window.setInterval("myDateTip()",1000);
注:增加三目运算的目的是为了输出的时分秒是00:00:00开始的
hours=hours<10?"0"+hours:hours;
minutes=minutes<10?"0"+minutes:minutes;
seconds=seconds<10?"0"+seconds:seconds;
4.JavaScript内置对象之String
js语言中,String对象,指的就是字符串数据值
创建一个js的字符串对象
var 对象名 = new String("字符串值") ;
简写为
var 对象名 = "字符串值" ;
String对象的功能是最多的
1)常用的功能charAt() 获取指定索引处的字符
2)concat(字符串):拼接功能,将原始内容和当前字符串进行拼接
没有学习这个功能之前
使用"+"进行拼接
document.write(对象名+"字符串") ;
拼接功能
document.write(对象名.concat("字符串"));
3)可以给字符串进行颜色标记 fontcolor ("颜色值(rgb(255,198,255),颜色单词..)")
document.write(对象名.fontcolor("green")) ;
4)indexOf ("字符串"):获取当前字符串中的第一次在大字符串中出现的角标值(从0开始算)
document.write(s.indexOf("owo")) ;
三、JavaScript中的函数定义以及调用
js中定义函数的格式
写法1:
function 函数名称也就是你的方法名(形式参数列表....){
完成业务代码
}
//方式1:
//定义函数
function 函数名称(形式参数列表){
//完成函数的业务逻辑
//直接输出 document.write("xxxx") ;
调用函数:
//调用函数:单独调用
函数名称(实际参数列表) ;
写法2:
//方式2: (推荐的)
//定义函数
function 函数名(形式参数列表){a,b
//完成业务逻辑操作
return 结果值;
}
赋值调用
//调用函数 赋值调用
var 结果变量 = 函数名称(实际参数列表) ;
//如果进一步的需求,继续去使用 结果变量 去其他操作!
注意事项:
1)形式参数列表中不能带var的,直接写参数名称即可
2)在定义的函数里面可以直接输出内容
var 变量= 形式参数进行运算;
直接输出结果;
或者是
在js中函数里面是可以带 return 返回一个具体的结果值;
调用的时候,赋值调用
var 结果 = 函数(实际参数) ;
举例:需要定义一个函数(方法),这个方法要进行两个数据求和
写法1
//需要定义一个函数(方法),这个方法要进行两个数据求和
//function sum(var a, var b){
function sum( a, b){
//定义变量result
var result = a+ b ;
document.write("结果是:"+result) ;
写法2
//定义两个数据求和
function sum(a,b){
//return 表示结束方法,并带给调用者一个结果;
return a+b ;
}
//赋值调用(实际开发中,它使用最多)
var myResult = sum(40,50) ;
document.write("两个数据之和是:"+myResult) ;