JavaScript学习记录《一》
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>初次网</title>
</head>
<body>
<table>
<!--第一行-->
<tr>
<td>姓名:</td>
<td>诗栋</td>
</tr>
<!--第二行-->
<tr>
<td rowspan="2">喜欢水果:</td>
<td>苹果</td>
</tr>
<!--第三行-->
<tr>
<td>香蕉</td>
</tr>
</table>
<script>
/*
/*
var str = 20;
alert(str);
*/
/*
var sum = 0;
for (let i = 0; i < 100; i++) {
sum += i;
}
alert(sum);
*/
//函数:(语法与就java不同)由function关键字进行定义
/*
//方式一:
function add(a, b) {
return a + b;
}
//调用:函数名称(实际参数列表)
var result = add(1, 2);
alert(result);
//方式二:
var add2 = function (a, b) {
return a + b;
}
var result2 = add2(1, 400);
alert(result2);
/*
//JavaScript中的数组相当于java中的集合,变长变类型
//Array对象用于定义数组
/*
//方式一:
var arr1 = new Array(1, 2, 3, 4);
alert(arr1);
//方式二:(常用)
var arr2 = [1, 2, 3, 4, 5];
alert(arr2);
arr2[0] = 20;
alert(arr2);
var arr3 = [1, 2, 3, 4, 5];
arr3[10] = 10;
//变长
alert(arr3[10]);
// alert(arr3[9]);//undefined
//变类型
arr3[6] = "hello!";
//alert(arr3[6]);
alert(arr3);//1,2,3,4,5,,hello!,,,,10
//属性:length:数组中元素个数
// var arr4 = [1, 2, 3, 4, 5, 6];
// for (let i = 0; i < arr4.length; i++) {
// alert(arr4[i]);
// }
//方法:
//Puah:添加方法
var arr5 = [1, 2, 3];
arr5.push(10);
alert(arr5);//1,2,3,10
//splice:删除元素
arr5.splice(0, 1);//从下标0开始删除,删除1个元素
alert(arr5);//2,3,10
var arr6 = [10, 12, 52, 65];
arr6.sort();
alert(arr6); //10, 12, 52, 65
var arr7 = [100, 102, 152, 165];
arr7.sort();
alert(arr7);//100,102,152,165
*/
//String 对象
/*
//方式一:
var str1 = new String("hello,everyone!");
alert(str1);
//方式二:
var str2 = "hello,everyone,I'm John!";
alert(str2);
//属性:length:字符串长度。
alert(str1.length);//15
alert(str2.length);//24
//方法:charAt():返回指定位置的字符;indexOf():检索字符串
//trim()方法:去除字符串前后两端的空白字符
var str3 = " abc ";
alert(1 + str3 + 1);//1 abc 1
str3.trim();
alert(1 + str3.trim() + 1);//1abc1
*/
//自定义对象
/*
var person = {
name: "zhangsan",
age: 23,
eat: function () {
alert("干饭干饭!");
}
};
alert(person.name);
alert(person.age);
person.eat();
*/
//两个特殊的对象 BOM-DOM
//BOM-Window-Navigator-Screen-History-Lacation
//Window:浏览器窗口对象
/*
方法:
alert():显示带有一段消息和一个确认按钮的警告框;
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框;
setInterval():按照指定的周期(以毫秒计)来调试函数或计算表达式;
setTimeout():在指定的毫秒数后调用函数或计算表达式;
*/
/*
//window可省略
//1- alert()
//window.alert("abc");
alert("bbb");
// 2-confirm() : 确定-》true;取消-》false
// window.confirm("确认删除吗?");
var flag = confirm("确认删除吗?");
//alert(flag);//确定-》true;取消-》false
if (flag) {
alert(1 + 5);
} else {
alert(5 + 6);
}
*/
//定时器:
/*
setTimeout(function,毫秒值):在一定的时间间隔后执行一个function,只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function,循环执行
*/
/*
setTimeout(
function () {
alert("hahahhaha~~~~");
}, 3000
)
setInterval(
function () {
alert("循环播放咯hhhhh");
}, 2000
)
*/
</script>
<input type="button" onclick="on()" value="开灯" />
<img id="myImge" border="0" src="梦幻.jpg" height="500" width="600">
<input type="button" onclick="off()" value="关灯" />
<script>
//小案例-切换图片
function on() {
document.getElementById('myImge').src = '梦幻.jpg';
}
function off() {
document.getElementById('myImge').src = '周传雄.jpg';
}
var x = 0;
//定时器
setInterval(
function (){
if (x%2==0) {
on();
}
else {
off();
}
x++;
},1050
)
</script>
</body>
</html>