JavaScript(入门):
https://blog.csdn.net/Veer_c/article/details/103894517
JavaScript实用案例与常见问题(一):
https://blog.csdn.net/Veer_c/article/details/103894959
JavaScript实用案例及常见问题(二):
https://blog.csdn.net/Veer_c/article/details/103895166
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(start,[length]) 截取字符串, start:开始索引 length: 截取的字符串长度
document.write(s4.substr(0,2));
</script>
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>
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>
猜数字游戏的案例,网页版
<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>
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>
案例:做一个网页时钟:
<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>
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>
JavaScript(入门):
https://blog.csdn.net/Veer_c/article/details/103894517
JavaScript实用案例与常见问题(一):
https://blog.csdn.net/Veer_c/article/details/103894959
JavaScript实用案例及常见问题(二):
https://blog.csdn.net/Veer_c/article/details/103895166