本文详细介绍了JavaScript的基础知识，包括页面布局的实现、流程控制语句、函数定义与调用、字符串操作、数组处理等内容，并提供了猜数字游戏和网页时钟等实践案例。
JavaScript（二），
一，案例：利用CSS和html做出一个QQ登陆的页面。
<style type="text/css">
#div1{
width:300px;
height:300px;
border:1px solid #F00;
margin-left:500px;
margin-top:200px;
background-image:url(05.%E7%B4%A0%E6%9D%90/1.jpg);
background-repeat:no-repeat;
background-position:top center}
#userDiv{
margin-left:50px;
margin-top:100px;
}
#passwordDiv{
margin-left:50px;
margin-top:10px;
}
#btnDiv{
margin-left:100px;
margin-top:10px;
}
#inputUser{
background-image:url(05.%E7%B4%A0%E6%9D%90/head.png);
background-repeat:no-repeat;
background-position:center left;
padding-left:30px;}
#inputpassword{
background-image:url(05.%E7%B4%A0%E6%9D%90/key.jpg);
background-repeat:no-repeat;
background-position:center left;
padding-left:30px;}
</style>
</head>
<body>
<div id="div1">
<form>
<div id="userDiv">用户名:<input type="text" id="inputUser" /></div>
<div id="passwordDiv">密 码:<input type="password" id="inputpassword" /></div>
<div id="btnDiv"><input type="button" value="登陆"/><input type="button" v````
lue="注册"/></div>
</form>
</div>
</body>1，流程控制语句
<script type="text/javascript">
/*
if语句
if(表达式){
语句
}else{
语句
}
条件可以是：
布尔值：true：成立 ； false:不成立
number：非0：成立； 0： 不成立
string: 非空字符串： 成立 ； 空字符串： 不成立
object: 非null: 成立； null：不成立
swtich语句
swtich(变量){
case 选项1:
语句;
break; 如果不break，就会继续下面选项的语句
case 选项2:：
语句;
break;
default:
默认;
}
注意:在js中的switvch语句中的case选项的值:
1.可以选择常量,String类型或者number类型
2.case选项中的值还可以是变量
3.在java中case选项中的值只能是常量不能是变量
4.case选项还可以是表达式
for语句：
for(初始化语句;条件判断语句;流程控制语句){
循环体语句
}
需求：页面上打印十次helloworld
需求：对1-100进行求和
while语句
初始化语句
while(条件判断语句){
循环体语句;
条件控制语句;
}
执行流程：
需求：在页面上打印十次helloworld;
do-while语句
初始化语句;
do{
循环体语句;
条件控制语句;
}while(判断条件语句)
需求：在页面上打印十次helloworld;
*/
/*
if(null){
alert("条件成立");
}else{
alert("条件不成立");
}*/
/*
var choice = "b";
var b = "b";
switch(choice){
case "a":
alert("您选择了a");
break;
case b:
alert("您选择了b");
break;
case "c":
alert("您选择了c");
break;
default:
alert("您的选项不存在");
break;
}*/
/*
var age = 19;
switch(true){
case age>=18:
alert("你是成年人");
break;
case age<18:
alert("未成年人禁止入内");
break;
}*/
//需求：页面上打印十次helloworld
/*
for(var i=0;i<10;i++){
document.write("helloword");
document.write("<br>");
}
//需求：对1-100进行求和
var sum = 0;
for(var i = 1;i<=100;i++){
sum+=i;
}
document.write(sum);*/
/*
var i = 0;
while(i<10){
document.write("helloword");
document.write("<br>");
i++;
}*/
var i = 0;
do{
document.write("helloword");
document.write("<br>");
i++;
}while(i<10);
</script>
</head>
<body>
</body>2，with语句：方便函数的调用
with（对象）{
直接写对象的方法}
with(document){
var i = 0;
do{
write("helloword");
write("<br>");
i++;
}while(i<10);
}3.js中的函数中的定义
<script type="text/javascript">
/*
js中的函数定义:
function 函数名(形式参数列表){函数体}
函数定义中需要注意的问题:
1.在js中函数的定义的参数列表不需要写var
2.js中的函数可以有返回值,无需声明返回值类型,只需要通过return这个关键字返回结果即可
3.js中没有方法重载的概念,如果方法名相同,后面的方法就会覆盖前面的方法
4.在我们js中的每一个函数中都存在一个arguments数组,这个数组就是用来接受我们的所有的实际参数的,接收完毕之后
给我们的函数的形式参数从左到右依次赋值
js函数的调用:
1.如何调用:函数名称(实际参数)
2.实际参数个数<形式参数个数 NaN
3.实际参数个数>形式参数个数 会拿着你的所有的实际参数给你的形式参数从左到右依次赋值,后面多余的形式参数直接舍弃
*/
//定义一个函数,a和b的加法
function add(a,b){
alert(arguments.length);
var res = a+b;
return res;
}
//定义一个3个数相加的add方法
/*
function add(a,b,c){
var res= a+b+c;//1+2+c;
return res;
}*/
var sum = add(2,2,3);
document.write(sum);
</script>4.查询每个月份对应的天数
添加一个函数，
<script type="text/javascript">
//当我的按钮的单击事件被触发以后需要执行的操作
function checkMonth(){
//获取单行输入域内的用户输入的月份值
var month = document.getElementById("month").value;
//使用if语句做判断,给出相应的提示
/*
1,3,5,7,8,10,12 大月 31天
4,，6,9,11 小月 30天
2 小小月 28天
*/
if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
alert("该月有31天");
}else if(month==4||month==6||month==9||month==11){
alert("该月有30天");
}else if(month==2){
alert("该月有28天");
}else{
alert("星球上没有这个月份");
}
}
</script>
</head>
<body>
请输入你需要查询的月份:<input type="text" id="month"/>
<!--在这里需要给我的button标签添加一个单击事件-->
<input type="button" value="查询天数" onclick="checkMonth()" />
</body>
5.String中的方法的使用
<script type="text/javascript">
/*
1.String对象定义
方式1:var s1 = new String("hello");
方式2:var s2 = "hello";
charAt(索引): 返回指定索引的内容
indexOf(字符串): 返回首次出现指定字符的索引位置
lastIndexOf(字符串): 返回最后出现指定字符的索引位置
fontcolor("red"): 直接给字符串添加颜色
split("字符串"): 使用指定字符串切割字符串，返回字符串数组
substring(start,end); 截取字符串，start：开始索引， end:结束索引
substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
*/
var s1 = new String("hello");
var s2 = new String("hello");
document.write(s1==s2);
document.write("<br>");
//valueOf(),这个方法是取出对象中的内容
document.write(s1.valueOf()==s2.valueOf());
document.write("<br>");
//创建字符串的方式2:直接赋值
var s3 = "hello";
var s4 = "hello";
document.write(s3==s4);
document.write("<br>");
document.write("<hr>");
//charAt(索引): 返回指定索引的内容
document.write(s1.charAt(1));
document.write("<br>");
//indexOf(字符串): 返回首次出现指定字符的索引位置
document.write(s1.indexOf("e"));
document.write("<br>");
//lastIndexOf(字符串): 返回最后出现指定字符的索引位置
document.write(s1.lastIndexOf("l"));
document.write("<br>");
//fontcolor("red"): 直接给字符串添加颜色
s3 = s3.fontcolor("red");
document.write(s3);
document.write("<br>");
var s5 = "java-php-web";
//split("字符串"): 使用指定字符串切割字符串，返回字符串数组
var arr = s5.split("-");
for(var i =0;i<arr.length;i++){
document.write(arr[i]);
document.write("<br>");
}
document.write("<br>");
//substring(start,end); 截取字符串，start：开始索引， end:结束索引
document.write(s4.substring(0,2));
document.write("<br>");
//substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
document.write(s4.substr(0,2));
</script>6.boolean对象和Number对象的区别：
<script type="text/javascript">
//Boolean对象
var b1 = new Boolean(true);
var b2 = new Boolean(true);
document.write(b1==b2);
document.write("<br>");
document.write(b1.valueOf()==b2.valueOf());
document.write("<br>");
//Number对象
var n1 = new Number(10);
//document.write(n1);
var n2 = new Number(10);
document.write(n1==n2);
document.write("<br>");
document.write(n1.valueOf()==n2.valueOf());
</script>
7.Math中的一些方法的使用：
<script type="text/javascript">
/*
Math对象
常用的方法：
1）ceil()： 向上取整。 如果有小数部分的话，直接+1
2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
3) round(): 四舍五入取整。满5进一
4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
5）max(): 返回最大值
6）min(): 返回最小值
var num = 3.50;
document.write(Math.ceil(num)+"<br/>");
document.write(Math.floor(num)+"<br/>");
document.write(Math.round(num)+"<br/>");
document.write(Math.round(Math.random()*100)+"<br/>");
document.write(Math.max(10,6,54,23,76)+"<br/>");
document.write(Math.min(10,6,54,23,76)+"<br/>");
*/
var i = 3.14;
//1）ceil()： 向上取整。 如果有小数部分的话，直接+1
document.write(Math.ceil(i));
document.write("<br>");
//2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
document.write(Math.floor(i));
document.write("<br>");
//3) round(): 四舍五入取整。满5进一
document.write(Math.round(i));
document.write("<br>");
//4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
document.write(Math.random());
document.write("<br>");
//5）max(): 返回最大值
document.write(Math.max(2,3,5,7));
document.write("<br>");
//6）min(): 返回最小值
document.write(Math.min(2,3,5,7));
</script>8.猜数字游戏的案例，网页版
<script type="text/javascript">
//生成随机数
var num = Math.floor(Math.random()*100+1);
alert(num);
function checkNumber(){
//1.获取输入狂内部输入的数字
var inputNumber = document.getElementById("inputNumber").value;
//将数字的类型进行转换
inputNumber = parseInt(inputNumber);
//做if判断并给出提示
if(inputNumber>num){
alert("大了");
}else if(inputNumber<num){
alert("小了");
}else if(inputNumber==num){
alert("对了");
}
}
</script>
</head>
<body>
请输入你猜测得数字:<input type="text" id="inputNumber" />
<input type="button" onclick="checkNumber()" value="猜数字" />
</body>
9.Data对象及方法的使用
<script type="text/javascript">
//创建一个date对象
var date = new Date();
document.write(date);
document.write("<br>");
//在java中我们使用日期的格式化对象SimapleDateFormat() 给一个模式:yyyy-MM-dd
//document.write(date.getYear());
document.write("<br>");
//获取年份
document.write(date.getFullYear()+"年");
//获取月份
document.write(1+date.getMonth()+"月");
//获取日期
document.write(date.getDate()+"日 ");
//获取时
document.write(date.getHours()+"时");
//获取分
document.write(date.getMinutes()+"分");
//获取秒
document.write(date.getSeconds()+"秒");
</script>10.案例：做一个网页时钟：
<script type="text/javascript">
//创建一个获取当前时间的方法
function getTime(){
//获取span标签对象
var spanTime = document.getElementById("sapnTime");
//创建日期对象
var date = new Date();
//获取年月日,时分秒进行字符串拼接
var time = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+"-"+date.getMinutes()+"-"+date.getSeconds();
//给标签体设置内容,innerHTML这个属性
spanTime.innerHTML=time;
}
//调用设置时间的方法
//getTime();//这样的方式对上面设置时间的方法只调用了一次,所以我们的时间无法实现动态的设置变化
//如果需要让时间动起来的话,我们需要每隔一秒调用getTime()这个方法一次
window.setInterval("getTime()",1000);
//参数1:调用的函数名称 参数2:每隔多久调用一次,调用的次数没有限制
</script>
11.js中的数组问题：
<script type="text/javascript">
/*
js中数组的创建方式:
方式1:用new的方式创建数组
1.1:var arr = new Array(3); 创建数组指定长度
1.2 var arr = new Array(); 创建数组不指定长度
1.3 var arr = new Array("hello",100,200); 创建数组并给数组的元素赋值
方式2:直接赋值
var arr = [100,"hello",200];
数组创建需要注意:
1.在js中数组的长度是可变的,他可以根据添加进来的多出来的元素进行自动的扩容
如果早java中是不可以的,会出现数组索引越界异常
2.js中的数组中可以添加多了不同类型的元素
常用的方法：
join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
reverse(): 反转数组中的元素
*/
//1.1:var arr = new Array(3);
var arr = new Array(3);
arr[0] = 100;
arr[1] = 200;
arr[2] = 300;
arr[3] = 400;
//1.2 var arr = new Array(); 创建数组不指定长度
var arr2 = new Array();
arr2[0] = 100;
arr2[1] = true;
arr2[2] = "hello";
//1.3 var arr = new Array("hello",100,200);
var arr3 = new Array(100,200,300);
//方式2:创建数组,并给数组直接赋值不需要new
var arr4 = [100,200,"world"];
//便利数组
for(var i=0;i<arr4.length;i++){
document.write(arr4[i]);
document.write("<br>");
}
document.write("<hr>");
//join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符
var arr5 = ["jave","php","web"];
var str = arr5.join("-");
document.write(str);
document.write("<br>");
//reverse(): 反转数组中的元素
arr5 = arr5.reverse();
for(var i=0;i<arr5.length;i++){
document.write(arr5[i]);
document.write("<br>");
}
</script>
扫一扫
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
