JS
弱类型语言，脚本语言，解释性语言，基于对象和事件驱动
性质
简单性，安全性，动态性，跨平台性
组成
ECMAScript.
DOM,
BOM
标签
type
src
async
引入外部js
弹框
alert(“”)
写入
document.write(“”)
单行注释
//
声明变量（见名知意）
var name=" ";
<script type="text/javascript">
//声明变量(见名知意)
var name="";
//给变量赋值 = 将等号右边的值赋给左边
name="张三";
//在弹框中如果写的是变量名，那么会将变量的值输出
alert(name);
alert("我的名字："+name);
document.write(name);
//声明变量的同时直接赋值
var age= 20;
alert("今年我长了一岁，我的年龄："+(age+1))
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
数据类型
字符串类型 string
数字类型 number
布尔类型 Boolean（true,false）
未定义 undefined
var s1="星期一";
//typeof()
alert(s1);
alert(typeof (s1));//字符串类型 string
alert(typeof (1000.01));//数字类型 number
alert(typeof (true));//Boolean true false
alert(typeof (s));//undefined 未定义
1
2
3
4
5
6
7
转义字符
\n 换行
\r 回车
\t 空一个table
运算符
Infinity 正无穷
not a number NaN
% 取余数
一元运算符 ++
a+=b:a=a+b
a/=b: a=a/b
//++:++在前：先增1，在运算；++在后，先运算，再自增1；
var a=10;//a=10
var b=++a;//b=10 a=11
var v=b++;//b=11 c=11
var x=5;
var y=(x++)+10; //x=6 y=15
var z=++y*x++; //y=16 z=96 x=7
alert(z);
alert(y);
alert(x);
1
2
3
4
5
6
7
8
9
10
11
比较运算符
== 比较左右两边内容是否相等
=== 比较内容和数据类型是否相同
逻辑运算符
&& and （与）
|| or （或）
！ not （非）
1
2
3
三元运算符
由?:符号表示的，具体的含义其实就和if-else结构的含义差不多，这种运算符会将某个条件作两种处理，如果满足条件的话就执行第一个结果，如果不满足的话就执行另外一个结果
Int A,B,C;
A=2;
B=3;
C=A>B ? 100 :200;
这条语句的意思是，如果A>B的话，就将100赋给C，否则就将200赋给C；
1
2
3
4
5
<< >>
2进制位数移动几位
循环
结构
顺序
分支
循环
条件语句
if
/*
* if(条件表达式){//true/false(比较运算符|逻辑运算符)
* 当条件为true时，所执行的内容
* }
* */
var age=20;
if (age>18){
document.write("en ");
}
/*
* if (条件表达式){
* true
*
* }else{
* false
*
* }
* */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if - else if
If -else if
/*
* if(){
*
* }else if(){
*
* }else if(){
*
* }else if(){
*
* }
* */
1
2
3
4
5
6
7
8
9
10
11
12
switch
/*
switch (变量){
case 值1:
代码块;
break
case 值2:
代码块;
break
default :
代码块；
break
}
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
var sc=window.prompt(); //接受用户输入的内容
var s=isNaN(sc); //判断是不是数字，不是返回的是true
循环语句
while
*
* 1.起始条件
* 2.终止条件
* 3.循环步数
* while(结束条件){
* 循环体
* 循环步数
* }
* */
1
2
3
4
5
6
7
8
9
for
/*
* for循环确定次数
* for(var 初始值;结束条件;迭代语句){
* }
* 多层for循环
* 外层for循环执行一次，内层for循环执行全部
* break
* */
1
2
3
4
5
6
7
8
js操作
1.可以通过document.getElementById(“id值”)——————获取指定html元素；
document.getElementById("div1");
<div id="div1"></div>
1
2
3
2.Js事件：onclick（鼠标单击事件）、onmousemove（鼠标移入事件）、onmouseout（鼠标移出事件）；
<div></div>
1
3.自定义函数：function 函数名（）{执行的内容}；
<script type="text/javascript">
function a(){
}
</script>
1
2
3
4
5
4.Js操作HTML：innerHTML=””，添加文本
<script type="text/javascript">
var div1=document.getElementById("div1");
div1.innerHTML="hello";
</script>
<div id="div1"></div>
1
2
3
4
5
6
5.Js操作css.style.属性名=”属性值”
<script type="text/javascript">
var div1=document.getElementById("div1");
div1.style.height="100px";
</script>
<div id="div1"></div>
1
2
3
4
5
6
随滚动条滚动
var leftT;
var leftL;
var rightT;//右侧div距离顶部多少
var rightL;//右侧div距离左边多少
var objleft;//左侧div文档对象
var objright;//右侧div文档对象
//获取文档加载时距离顶部跟左边的属性
function place(){
objleft=document.getElementById("left");
objright=document.getElementById("right");
//左侧div距离顶部多少
leftT=document.defaultView.getComputedStyle(objleft,null).top;
//左侧div距离左边多少
leftL=document.defaultView.getComputedStyle(objleft,null).left;
rightL=document.defaultView.getComputedStyle(objright,null).left;
rightT=document.defaultView.getComputedStyle(objright,null).top;
}
//获取滚动条滚动的像素数
function move(){
var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;
//设置左侧div距离顶部的像素
objleft.style.top=parseInt(leftT)+scrollT+"px";
objleft.style.left=parseInt(leftL)+scrollL+"px";
objright.style.top=parseInt(rightT)+scrollT+"px";
objright.style.left=parseInt(rightL)+scrollL+"px";
}
window.onload=place;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
获取滚动条滚动的像素数
var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;
延时加载
<script type="text/javascript">
var now=1;//设置第一张图片
var max=3;//设置最大的图片
var i=1;//现在的图片
function show(){
for(i=1;i<=max;i++){
if(now==i){
document.getElementById("adv"+i).style.display="block";
}else{
document.getElementById("adv"+i).style.display="none";
}
}
if(now==max){
now=1;
}else{
now++;
}
}
//重复加载
window.setInterval(show,1000);
//延时加载
//window.setTimeout(xiaochu,1000);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
重复加载
window.setInterval(show,1000); 1秒执行一次show()函数
延时加载
window.setTimeout(xiaochu,1000);1秒后执行xiaochu()函数
饥荒游戏竟然出网页版了？点击即玩
中至科技 · 顶新
---------------------
作者：Mode Cheng
来源：CSDN
原文：blog.csdn.net/weixin_4388…
版权声明：本文为博主原创文章，转载请附上博文链接！ |
|
