String对象的length属性
<body>
<script>
var str0="Hello World!";
//前面有两个空格
var str1=" Hello World!";
//后面有两个空格
var str2="Hello World! ";
//,全角 ！是半角
var str3="你好，世界！";
document.write("4个字符串的长度分别是："+str0.length+","+str1.length+","+str2.length+","+str3.length);
</script>
</body>
String 对象的indexOf()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>indexOf()方法案例</title>
<script>
function check(){
//获取用户名的值
var uname=document.myform.user_name.value;
//判断用户名的长度是否为0
if (uname.length==0) {
alert("请输入用户名");
return false;
}
//获取密码的值
var upwd=document.myform.pwd.value;
//判断密码的长度是否小于6位
if(upwd.length < 6){
alert("密码不能少于6位");
return false;
}
//获取邮箱的值
var uemail = document.myform.user_email.value;
//判断邮箱的值是否含有@符号
if(uemail.indexOf("@")==-1){
alert("邮箱地址必须包含@符号");
return false;
}
//判断邮箱的值是否含有.符号
if(uemail.indexOf(".")==-1){
alert("邮箱地址必须包含.符号");
return false;
}
//判断@是否在.的前面
if(uemail.indexOf("@") > uemail.indexOf(".") ){
alert("@符号必须在.号前面");
return false;
}
}
</script>
</head>
<body>
<!-- 表单是否提交取决于onsubmit事件的返回值。
若onsubmit事件返回false，则将阻止表单的提交。
如果不返回值，则默认为true。 -->
<form action="demo02_success.html" method="get" name="myform" onsubmit="return check()">
<table align="center">
<tr>
<td>用户名：</td>
<td><input type="text" name="user_name"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" name="pwd"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="user_email"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
</body>
</html>
//demo02_success.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="center" style="color: aqua;">恭喜你，成功登录</h1>
</body>
</html>
charAt()方法
<script>
//charAt(index): 返回指定位置的字符
var str = "hello world";
var str1 = "同一个世界，同一个梦想！";
console.log(str.charAt());//不给参数，系统默认返回下标为0的字符
console.log(str.charAt(3));//返回str字符串下标为3的字符
console.log(str1.charAt());
console.log(str1.charAt(5));
</script>
字符串截取常用方法
<script type="text/javascript">
/*
substr(start[,length]):可在字符串中抽取从start下标开始指定数目的字符
substring(start[,stop]):提取字符串中介于两个指定下标之间的字符,不接受负值参数(包括start,不包括stop)
slice(statr[,end]):可提取字符串的某个部分，并以新的字符串返回被提取的部分（包括start,不包括end）
*/
var str="helloworld";
//从索引0开始，取5个字符
console.log(str.substr(0,5));
//从索引2开始，取到索引5
console.log(str.substring(2,5));
//从索引2开始，取到索引5
console.log(str.slice(2,5))
//从索引2开始，取到倒数第二个索引
console.log(str.slice(2,-2));
</script>
字符串截取案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串截取案例</title>
<script>
function checkName(){
//获取用户名的值
var str = document.myform.user_name.value;
//获取字符串长度
var len = str.length;
var flag = true;
for(var i=0;i<len;i++){
var ch = str.substr(i,1);
console.log(ch);
if((ch >="0" && ch <= "9")|| (ch>="a" && ch <="z") || (ch>="A" && ch <="z") || ch =="_" ){
continue;
}else{
alert("含有非法字符");
flag=false;
}
}
return flag;
}
</script>
</head>
<body>
<!-- 用户名中的字符只能是数字、字母、下划线 -->
<form action="" name="myform">
<input type="text" name="user_name">
<input type="button" onclick="checkName()" value="验证">
</form>
</body>
</html>
Math对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math对象</title>
</head>
<body>
<script>
// var r = prompt("请输入圆的半径","");
// var s = r*r*Math.PI;
// console.log("圆的半径为"+s);
/*
ceil()：有小数的，整数+1
floor()：取整数
round():四舍五入
random():取0-1之间的随机数
*/
// console.log(Math.ceil(3.1)); //4
// console.log(Math.floor(3.9)); //3
// console.log(Math.round(3.1)); //3
// console.log(Math.round(3.6)); //4
// console.log(Math.random());
console.log(Math.max(5,3));
console.log(Math.min(5,3));
//模拟掷骰子
var one=two=three=four=five=six=0;
var shu=0;
for(var i =0;i<10000;i++){
//最大0.9*6=5 +1 最大是6
shu = Math.floor(Math.random()*6)+1;
//console.log(shu);
switch(shu){
case 1:one++;break;
case 2:two++;break;
case 3:three++;break;
case 4:four++;break;
case 5:five++;break;
case 6:six++;break;
}
}
document.write("点数1:"+one+"次，占"+one/10000*100+"%<br>");
document.write("点数2:"+two+"次，占"+two/10000*100+"%<br>");
document.write("点数3:"+three+"次，占"+three/10000*100+"%<br>");
document.write("点数4:"+four+"次，占"+four/10000*100+"%<br>");
document.write("点数5:"+five+"次，占"+five/10000*100+"%<br>");
document.write("点数6:"+six+"次，占"+six/10000*100+"%<br>");
</script>
</body>
</html>
Date对象常用属性和方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta http-equiv="refresh" content="1"> -->
<title>Date对象常用属性和方法</title>
</head>
<body>
<script>
//获取当前的日期对象
var time = new Date();
document.write("现在时间是："+time+"<br>");
//按操作系统区域时间显示
document.write("现在时间是："+time.toLocaleString()+"<br>");
var year = time.getFullYear();
//month:0-11代表（1-12月）
var month = time.getMonth()+1;
var date = time.getDate();
//day:0-6:0为星期日
var day = time.getDay();
var hour = time.getHours();
var minute=time.getMinutes();
var second = time.getSeconds();
document.write("今天是"+year+"年"+month+"月"+date+"日星期"+day+","+hour+"时"+minute+"分"+second+"秒<br>");
var week=["日","一","二","三","四","五","六"];
document.write("今天是"+year+"年"+month+"月"+date+"日星期"+week[day]+","+hour+"时"+minute+"分"+second+"秒<br>");
//时分秒小于10,前面自动补0
var welcomeStr = "";
if(hour>0 && hour < 12){
welcomeStr="早上好";
}else{
welcomeStr="下午好";
}
hour = hour>10?hour:("0"+hour);
minute=minute>10?minute:("0"+minute);
second=second>10?second:("0"+second);
document.write(welcomeStr+"<br>");
document.write("今天是"+year+"年"+month+"月"+date+"日星期"+week[day]+","+hour+"时"+minute+"分"+second+"秒<br>");
</script>
</body>
</html>
定时器的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器的使用</title>
</head>
<body onload="clock()">
<form action="" name="myform">
<input type="text" name="clock" style=" font-size: 36px;width:850px;display: block; margin: 350px auto;border-style: none;">
</form>
<script>
//使用定时器setTimeout()实现时钟走动的效果
function clock(){
var time = new Date();
var year = time.getFullYear();
//month:0-11代表（1-12月）
var month = time.getMonth()+1;
var date = time.getDate();
//day:0-6:0为星期日
var day = time.getDay();
var hour = time.getHours();
var minute=time.getMinutes();
var second = time.getSeconds();
hour = hour>10?hour:("0"+hour);
minute=minute>10?minute:("0"+minute);
second=second>10?second:("0"+second);
var week=["日","一","二","三","四","五","六"];
//document.write("今天是"+year+"年"+month+"月"+date+"日星期"+week[day]+","+hour+"时"+minute+"分"+second+"秒<br>");
document.myform.clock.value="现在是"+year+"年"+month+"月"+date+"日星期"+week[day]+","+hour+"时"+minute+"分"+second+"秒";
//使用定时器函数
setTimeout("clock()",1000);
}
//clock();
</script>
</body>
</html>
数组的创建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组的创建</title>
<script type="text/javascript">
//创建一个空数组
var arr0 = new Array();
//创建一个三个元素的数组
var arr1 = new Array(3);
//创建一个含有三个元素和一个字符串的数组
var arr2 = new Array(1,2,3,'hello');
//创建一个含有两个元素的数组（推荐使用）
var arr3=[true,3.14];
//遍历数组
for(var i = 0; i<arr3.length;i++){
console.log(arr3[i]);
}
//数组下标和长度属性的使用
arr1[0]="China";
arr1[1]="USA";
arr1[2]="Russia";
arr1[3]="Russia1";
//遍历数组
for(var i = 0; i<arr1.length;i++){
console.log(arr1[i]);
}
console.log("数组的长度为："+arr1.length);
//第二种遍历方式
for(var i in arr1){
console.log(arr1[i]);
}
//for in循环中，变量i如果不赋初值，默认是字符串类型，需要转成number
//可以使用Number(i),parseInt(i) 或者，var i=0
for(var i in arr1){
console.log("数组arr1的第"+(i+1)+"个元素的值是："+arr1[i] );
//console.log("数组arr1的第"+(Number(i)+1)+"个元素的值是："+arr1[i] );
}
</script>
</head>
<body>
<script>
/*
js中不支持多维数组，但需要使用二维数组的时候，可以通过向以为数组元素嵌入多个值的方式
*/
//创建一个空数组
var cities = new Array();
cities[0]=["北京市","上海市","天津市","重庆市"];
cities[1]=["西安市","郑州市","武汉市","深圳市"];
cities[2]=["宝鸡市","咸阳市","延安市"];
// for(var i = 0; i < cities.length;i++){
// //打印以为数组元素下标
// document.write("数组cities的第"+(i+1)+"个元素中的城市有：");
// //循环每个元素中的值
// for(var j = 0;j<cities[i].length;j++){
// document.write(cities[i][j]+" ");
// }
// //打印一条横线
// document.write("<hr>");
// }
for(var i in cities){
document.write("数组cities的第"+(Number(i)+1)+"个元素中的城市有：");
for(var j in cities[i]){
document.write(cities[i][j]+" ");
}
document.write("<hr>");
}
</script>
</body>
</html>
数组的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组的方法</title>
<script>
//concat():用于连接两个或多个数组，返回一个新数组
var one=[1,2,3,4];
var two = ["a","b","c",4];
console.log(one.concat(two));
//pop():移除数组中的最后一个元素并返回该元素
var x=one.pop();
console.log(x);
//shift():移除数组中的第一个元素并返回该元素
var y = one.shift();
console.log(y);
//push():将新元素添加到一个数组中，并返回数组的新长度
var z = one.push("5");
console.log(z);
//reverse():返回一个元素顺序被反转的数组对象
console.log(one.reverse());
</script>
</head>
<body>
<script>
//join():将数组中的所有元素组合起来，串接成新的字符串，并可以指定任意的字符串作为分隔符
var arr = new Array();
arr[0]="China";
arr[1]="USA";
arr[2]="Russia";
document.write("第28届奥运会金牌前3名国家是："+arr.join("，")+"<br>");
//split():可以按照分隔符把字符串切割成字符串数组
var str = "India,UN,France";
//此处要使用分隔符，必须是原字符串中含有的
var ar = str.split(",");
for(var i in ar){
document.write("ar["+i+"]="+ar[i]+"<br>");
}
//sort()：对数组进行排序，如果不带参数，输出结果将按照字母表顺序排序
//sort()方法调用后的返回值是被排序的数组本身
arr.sort();
document.write(arr);
</script>
</body>
</html>
网友评论