1、循环
for (var i = 0; i < 6; i++){} // js中的循环语法1
for (var i in aList){} // js中的循环语法2
<script>
var aList01 = [1, 2, 3, 4, 5, 6];
// 循环数组里的数据 i是下标索引
for (var i = 0; i < 6; i++) {
alert(aList01[i]);
}
for (var i in aList01) {
// i是下标索引
alert(i);
}
</script>
2、双重循环
需求1:在网页上打印一个金字塔(附有答案)。
需求2:使用for循环将6条新闻填充到界面的ul标签中(没有答案)。
<script>
window.onload = function () {
var oBox = document.getElementById("box");
var str = "";//用来存放结果的星星
// 20行的金字塔
for (var i = 0; i < 20; i++) {
// 每一次i的循环 要生成1排星星
for (var j = 0; j <= i; j++) {
str += " * ";
}
// 每一排星星 添加完后 再加上一个换行标签
str += "
";
}
// 显示在页面上
oBox.innerHTML = str;
}
</script>
3、数组去重
<script>
// index 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
var aList = [1, 2, 5, 4, 1, 6, 0, 8, 7, 3, 2, 8, 4, 6, 9, 0, 5, 3, 2]; // 1254608739
// indexOf 0 1 2 3 0 5 6 7 8 9 1 7 3 5 14 6 2 9 1
// index和indexOf相等 这个元素是不重复的
var alistNew = [];//定一个新的空数组 存放结果
for (var i = 0; i < aList.length; i++) {
// 取出当前的值
var value = aList[i];
// 获取indexof的值
var indexof = aList.indexOf(value);
if (i == indexof) {
// 数据是不重复的
alistNew.push(value);
}
}
alert(alistNew);
</script>
4、js中几种判断为false的情况
undefined // 数据未定义
null // 数据没有值
0 // 数字0,除了0之外都是ture
“” // 空字符串 ,有字符的就是ture
NaN // not a number
false // 布尔值,false
5、js中字符串的常用操作
var aList01 = sDate.split(“-“); // 通过指定的字符串 拆分成数组
var index = str01.indexOf(“b”); // 字符串在数据里第一次出现的下标
var lastIndex = str01.lastIndexOf(“b”); // 字符串在数据里最后一次出现的下标
var str03 =str02.substring(5,9); // 字符串的截取 包含参1 不包含参2
var str06 = str05.split(“”).reverse().join(“”); // 字符串反转 split变成数组 reverse数组反转 join合成字符串
6、字符串类型手动转换和自动转换
var iNum = parseInt(sNum); // 将字符串转为数字,转换失败为NaN
var fNum = parseFloat(sFloat); // 转换为浮点数,失败NaN
iNum+sNUm // 数字和字符串相加自动转字符串相加,其他三种运算自动转换为数字
alert(0.1+0.2) // 0.30000000000000004,小数相加有精度问题。
alert((0.1*10 + 0.2*10)/10); //0.3 解决方法把小数乘以 10的n次方 最后的结果 再除以10的n次方
7、NaN和isNaN
alert(parseInt(“abc”));//NaN 非数字
alert(parseInt(“123abc”));//123 —》需要用isNaN判断一下就不会出现这样的错误了
alert(parseInt(“abc123”));//NaN 非数字
alert(isNaN(“123abc”)); //true
8、三元(三目)运算符
5 > 2 ? alert(“haha”) : alert(“hehe”); // 判断语句 ? 执行true的语句 : 执行false的语句
9、可以输入的弹框
var text = prompt(“请输入点啥”); // 如果不输入 就是”” 如果点击取消 就是null
10、代码调试
console.log(oBox); // 在后台打印,可以在console中查看打印的内容
断点调试:google浏览器-右击检查-sources-打开文件,调试哪句就在哪句的开头点一下。打断点。
11、定时器(定时器本身是异步的)
setTimeout(fnHehe, 1000); // 只执行一次的定时器,参1 执行的方法 参2 延时的时间clearTimeout(timer); // 清除定时器,上面方法是有返回值的,可以接收后用来做处理
setInterval(fnhaha, 1000); // 重复执行的定时器 参1执行方法 参2间隔的时间
clearInterval(timer1); // 清除定时器,上面方法是有返回值的,可以接收后用来做处理
setTimeout(function () { // 参1支持匿名函数
console.log(“hehe”);
}, 1000);
function fnhaha() {
console.log(1);
}
12、移动的动画关键代码
var left = 0;//初始的位置
var speed = 2;//每次移动的距离
setInterval(move, 10);
function move() {
// 每次移动 增加speed像素
left += speed
if(left > 500){
speed = -2;
}else if(left<0){
speed = 2;
}
oBox.style.left = left + “px”;
}
思考,无缝动画怎么做?当left值小于-1000时 右侧会有空白 这是立刻把left设为0,当left值大于0时 左侧会有空白 这是立刻设left为-1000;
13、Date时间对象
var oDate = new Date(); // 获取时间对象 就是当前 时间
var year = oDate.getFullYear();//年
var month = oDate.getMonth() + 1;//月 0 - 11
var dayOfMonth = oDate.getDate();//日
var dayOfWeek = oDate.getDay();//星期几 0 - 6
var hours = oDate.getHours();//小时
var minutes = oDate.getMinutes();//分
var seconds = oDate.getSeconds();//秒
14、Math对象
console.log(Math.abs(15)); //绝对值
console.log(Math.pow(2, 4)); // 参1的参2次方
console.log(Math.round(1.3));//1 四舍五入,自己做四舍五入就是+0.5后转int
console.log(Math.random()); //随机数 0 - 1
console.log(5 + Math.random() * 15); // 5-20之间的随机数,自己实现的console.log(Math.max(…aList));// 最大值,3,可以直接写数字,也可以写数组
console.log(Math.min(1, 5, 3, 2, 5));// 最小值 1
console.log(Math.sin(1));// 正弦 值传入的是弧度 π 1弧度 = 180/3.1415…
console.log(Math.cos(1));//余弦
console.log(Math.tan(1));//正切
console.log(Math.floor(1.3));//向下取整 1
console.log(Math.floor(-1.3));//向下取整 -2
console.log(Math.ceil(1.3));//向上取整 2
console.log(Math.ceil(-1.3));//向上取整 -1