JavaScript 部分知识点_鼠标点击时,执行函数 styleone-优快云博客

本文链接：https://blog.youkuaiyun.com/m_syndra/article/details/78727611

本文全面介绍了JavaScript的基础知识，包括变量、数据类型、运算符、函数、循环、事件处理等内容，适合初学者快速掌握JavaScript编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

12.2

1、JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是可插入 HTML 页面的编程代码。在插入 HTML 页面后，可由所有的现代浏览器执行。

JS的用法：HTML 中的脚本必须位于<script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的<body> 和 <head> 部分中。

可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

代码：

<!DOCTYPE html>

<html>

<title>JS页面弹窗</title>

</head>

<body>

<scripttype="text/javascript">

alert("这是一个弹窗");

</script>

<scriptsrc="js.js"></script>

<!--两种方式

1.直接写在页面里

2.外部链接调用-->

</body>

</html>

（js文件：/**

*Created by Administrator on 2017/12/2.

alert("这是弹窗！");/*如果括号内是一串文字，需要加双引号*/）

2、警告框 alert 完整写法为 window.alert();

确认框 confirm 完整写法为window.confirm();

提示框 prompt 完整写法为window.prompt();（提示框也可以成为输入框）

代码：

alert alert("这是一个弹窗");

confirm confirm("确定要退出吗？");

prompt prompt("请输入年龄",18);/*引号内是提示信息，“，”后是默认信息*/

3、JS在页面中输出的方式 document.write();

JS在控制台输出的方式 console.log();

代码：

<!DOCTYPE html>

<html>

</head>

<body>

document.write("hello world!");/*直接在页面中输出，即在文档流中输出*/

console.log("你好");/*在控制台输出（控制台为调错、改错的地方）*/

</script>

</body>

</html>

4、JS 变量：与代数一样，JavaScript变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

要求：变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）

声明JS变量使用var eg.var=x;

一条语句可以声明多个变量。

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

5、JS 数据类型：字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

JavaScript 字符串

字符串是存储字符（比如"HELLO world"）的变量。

字符串可以是引号中的任意文本，可以使用单引号或双引号。

JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。

JavaScript 布尔

布尔（逻辑）只能有两个值：true或 false。

JavaScript 数组

eg. var cars=["Saab","Volvo","BMW"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为null 来清空变量。

代码：

<!DOCTYPE html>

<html>

</head>

<body>

var x=13;/*数据类型为number（数字）*/

var y="hello world";/*数据类型为string（字符串）*/

var z;z=15;/*效果同x*/

var a=null;/*数据类型为null（空）*/

var b=false;/*数据类型为boolean(布尔)*/

var c=[2,5,35,9];/*数据类型为array（数组）*/

var d={

name:"张三",sex:"男",age:"18"

};/*数据类型为object（对象）*/

var e;/*数据类型为infinite（未定义）*/

alert (typeof(a));/*弹出数据类型

typeof(a)表示查阅括号内变量的数据类型*/

alert(d.name+ d.age+ d.sex);/*（用“+”可以实现多个调用）*/

</script>

</body>

</html>

6、数组的调用数组名[索引值]

eg.alert(a[0]);

对象的调用对象名.键值名

调用多个属性时用“+”连接。

复杂调用对象名[索引值].键值名

代码：

<!DOCTYPE html>

<html>

</head>

<body>

var a=[1,3,6,8,99]/*索引值为0,1,2,3,4*/;

alert(a[3]);/*数组的调用数组名[索引值] 索引值从0开始计数*/

var b={

name:"张三",

age:20,

sex:"男",

address:"陕西西安"

};

alert(b.name);/*对象的调用对象名.键值名*/

alert(b.name+" "+b.age+" "+ b.sex+" "+b.address);/*想要调用多个需要用"+"进行连接*/

var c=[

{

name:"张三",

age:20,

sex:"男",

address:"陕西西安"

{

name:"李四",

age:20,

sex:"女",

address:"陕西西安"

{

name:"王五",

age:25,

sex:"男",

address:"陕西西安"

}

];/*复杂调用*/

alert(c[1].name);/*调用方式对象名[索引值].健名值*/

</script>

</body>

</html>

7、JavaScript 运算符

运算符 = 用于赋值。

运算符 + 用于加值。

运算符 = 用于给JavaScript 变量赋值。

算术运算符 + 用于把值加起来。

算数运算符

+ 加法

- 减法

* 乘法

/ 除法

% 取模（余数）

++ 自增

-- 自减

代码：

<!DOCTYPE html>

<html>

<title>算术运算符</title>

</head>

<body>

var x= 6, y,z;

y=x++;/*先赋值后加1*/

z=++x;/*先加1后赋值*/

alert(x);/*8*/

alert(y);/*6*/

alert(z);/*8*/

</script>

</body>

</html>

赋值运算符

= x=y

+= x+=y x=x+y

-= x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y

“+”的作用

1．连接作用（+左右两边为字符串）

2．运算作用（+左右两边为数字类型）

代码：

<!DOCTYPE html>

<html>

</head>

<body>

var a=prompt("请输入您的姓名","张三");

document.write("<span style='color:pink'>您输入的姓名是</span>"+a);/*添加样式*/

var b=prompt("请输入您的年龄",18);

document.write("<span style='color:orange'>请输入您的年龄"+b+"</span>");

</script>

</body>

</html>

<!--加号有两个功能 1.连接功能（当加号两边有字符串时）

2.数据相加（当加号两边为数字类型时）-->

比较运算符：

比较和逻辑运算符用于测试true 或者 false。

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

== 等于

=== 绝对等于（值和类型均相等）

!= 不等于

!== 绝对不等于（值或类型不相等）

> 大于

< 小于

>= 大于或等于

<= 小于或等于

逻辑运算符：

逻辑运算符用于测定变量或值之间的逻辑。

&& and 两边都为真，结果才为真。

|| or 只要有一边为真，结果就为真；两边都为假，结果才为假。

! not 你为真，我为假（即相反的）。

条件运算符：

variablename=(condition)?value1:value2

（条件）？“条件成立时输出的值”：“条件不成立时输出的值”

代码：

<!DOCTYPE html>

<html>

<title>条件运算符（又称三目运算符）</title>

</head>

<body>

var a=prompt("请输入您的年龄",18);

alert((a>=18)?"您为成年人":"您为未成年人");

</script>

</body>

</html>

<!--语法：

（条件）？“条件成立时输出的值”：“条件不成立时输出的值”-->

8、JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()

{

执行代码

}

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

myFunction(argument1,argument2)

当您声明函数时，请把参数作为变量来声明：

function myFunction(var1,var2)

{

代码

}

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

局部 JavaScript变量

在 JavaScript 函数内部声明的变量（使用var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

全局 JavaScript变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

代码：

<!DOCTYPE html>

<html>

</head>

<body>

function one(){

z=2;/*全局变量*/

x=3;/*全局变量*/

x+=z;/*等价于x=x+z*/

alert("您的计算结果为"+x);

}

</script>

<!--

函数的语法:function函数名（）{

执行语句；

}

函数调用：触发时间=“函数名（）”

触发事件：onclick 点击事件

onmouseover 鼠标放上去时触发

onmouseout 鼠标离开时触发

onmousemove 鼠标移动时触发-->

</body>

</html>

<!DOCTYPE html>

<html>

</head>

<body>

<buttononclick="sum(45,23)">计算2</button>

function sum(x,y){/*带参函数，里面的x,y为形参*/

var z=x-y;

alert(z);

}

</script>

</body>

</html>

9、JavaScript 作用域

作用域可访问变量的集合。

JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

JavaScript 局部作用域

变量在函数内声明，变量为局部作用域。

局部变量：只能在函数内部访问。

JavaScript 全局变量

变量在函数外定义，即为全局变量。

全局变量有全局作用域: 网页中所有脚本和函数均可使用。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

10、获取对象

找节点

document.getElementById(“”); //通过id获取对象

document.geyElementsByClassName(“”); //通过class名获取对象

document.getElementsByTagName(“”); //通过标签名获取对象

获取值

.innerHTML 获取值（包含标签元素）

.innerText 获取值（纯文本）

.value 获取表单元素的值

代码：

<!DOCTYPE html>

<html>

</head>

<body>

<ul>

<li id="one" onclick="show()">aaaaaaaaaaaa<a href="">nihao</a></li>

<li class="two">aaaab</li>

<li>aaaaa2</li>

<li>aaaaae</li>

<li>aaaaas</li>

<li>aaaaagf</li>

</ul>

<span onclick="show()">你好 <ahref="">nihao</a></span><br/>

function show(){

alert(document.getElementById("one").innerHTML);/*id名是唯一的，所以一个页面中只有一个*/

alert(document.getElementsByClassName("two")[0].innerHTML);/*class在页面中可能会有很多个，所以要输入索引值，否则找不到*/

alert(document.getElementsByTagName("span")[0].innerText);/*标签在页面中可能会有很多个，所以要输入索引值，否则找不到*/

alert(document.getElementsByTagName("input")[0].value);

}/*innerHTML表示获取可以含有包含标签元素

innerText表示获取纯文本

value表示获取表单元素的值*/

</script>

</body>

</html>

11、If 语句

只有当指定条件为 true时，该语句才会执行代码。

语法

if (condition)

{

当条件为 true 时执行的代码

}

使用小写的 if。使用大写字母（IF）会生成JavaScript 错误。

If...else 语句

使用 if....else语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

语法

if (condition)

{

当条件为 true 时执行的代码

}

else

{

当条件不为 true 时执行的代码

}

If...else if...else 语句

使用 if....elseif...else 语句来选择多个代码块之一来执行。

语法

if (condition1)

{

当条件 1 为 true 时执行的代码

}

else if (condition2)

{

当条件 2 为 true 时执行的代码

}

else

{

当条件 1 和条件 2 都不为 true 时执行的代码

}

代码：

<!DOCTYPE html>

<html>

</head>

<body>

var money=prompt("请输入您的年收入",10);

if(money>=10){

document.write("您可以购买小汽车了")

}else if(money>=5){

document.write("您可以购买电动车了")

}else if(money>=3){

document.write("您可以购买自行车了")

}else{

document.write("您只能坐公交车了")

}

</script>

</body>

</html>

12、JavaScript switch 语句

switch 语句用于基于不同的条件来执行不同的动作。

JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

语法

switch(n)

{

case 1:

执行代码块 1

break;

case 2:

执行代码块 2

break;

default:

n 与 case 1 和 case 2 不同时执行的代码

}

原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

代码：

<!DOCTYPE html>

<html>

<title>switch语句</title>

</head>

<body>

var day=parseInt(prompt("请输入星期数字",1));/*parseInt()表示强制转换为整型数据*/

switch(day){

case 1:

document.write("今天是星期一");

break;

case 2:

document.write("今天是星期二");

break;

case 3:

document.write("今天是星期三");

break;

case 4:

document.write("今天是星期四");

break;

case 5:

document.write("今天是星期五");

break;

case 6:

document.write("今天是星期六");

break;

case 7:

document.write("今天是星期日");

break;

default:/*当输入的内容上述case中没有时，输出default的执行语句*/

document.weite("请输入正确的数字");

break;

}/*当你输入的哪个值符合哪个case就执行哪个case的语句*/

</script>

</body>

</html>

13、For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3)

{

被执行的代码块

}

语句 1 （代码块）开始前执行 starts.

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

代码：

<!DOCTYPE html>

<html>

<title>for循环</title>

</head>

<body>

var study=["你好","这里是","web","学习教程"];

for(var i=0;i<study.length;i++){

document.write(study[i]+" ");/*for循环*/

}

var study1=["你好","这里是","web","学习教程"];

for(var j=0;j<study1.length;j++){

document.write(study[j]+"<br>");/*for循环*/

}

</script>

</body>

</html>

14、while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件)

{

需要执行的代码

}

do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法

{

需要执行的代码

}

while (条件);

代码：

<!DOCTYPE html>

<html>

<title>while循环</title>

</head>

<body>

var i= 2,x=0;

while(i<4){

x+=i;

i++;

}

document.write(x)

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<title>do while</title>

</head>

<body>

var i= 2,x=0;

{

x+=i ;

i++;

}

while (i<5);

document.write(i);

</script>

</body>

</html>

while和do while的区别：

while 先判断后执行语句

do while 先执行后判断

当条件不成立时 while语句停止循环，dowhile语句至少会运行一次。

15、JavaScript Break 和 Continue 语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

break 语句，它用于跳出 switch() 语句。

break 语句可用于跳出循环。

break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）。

Continue 语句

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

12.3

1、JavaScript typeof,null, 和 undefined

typeof 操作符

可以使用 typeof 操作符来检测变量的数据类型。

Null

在 JavaScript 中 null 表示 "什么都没有"。

null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是object。

Undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

数组是特殊的object数据类型。

2、JavaScript 类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

JavaScript 数据类型

在 JavaScript 中有 5 中不同的数据类型：

string

number

boolean

object

function

3 种对象类型：

object

date

array

2 个不包含任何值的数据类型：

null

undefined

NaN 的数据类型是 number

数组(Array)的数据类型是 object

日期(Date)的数据类型为 object

null 的数据类型是 object

未定义变量的数据类型为 undefined

如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是返回 Object。

constructor属性

constructor 属性返回所有 JavaScript 变量的构造函数。

JavaScript 类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

通过使用JavaScript 函数

通过 JavaScript自身自动转换

将数字转换为字符串

全局方法 String()可以将数字转换为字符串。

Number 方法，数字转换为字符串的方法：

toExponential() 把对象的值转换为指数计数法。

toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字。

toPrecision() 把数字格式化为指定的长度。

将字符串转换为数字

全局方法 Number()可以将字符串转换为数字。

字符串包含数字(如"3.14") 转换为数字 (如 3.14).

空字符串转换为 0。

其他的字符串会转换为NaN (不是个数字)。

在 Number 方法章节中，你可以查看到更多关于字符串转为数字的方法：

parseFloat() 解析一个字符串，并返回一个浮点数。

parseInt() 解析一个字符串，并返回一个整数。

代码：

<!DOCTYPE html>

<html>

<title>检测数据类型</title>

</head>

<body>

var x="123";

console.log(typeof(x));/*数据类型为string型*/

var y=Number(x);/*将string型转换为number型*/

console.log(typeof(y));/*数据类型为number型*/

var a=123;

console.log(typeof(a));/*数据类型为number*/

var b=String(a);/*将number型转换为string型*/

console.log(typeof(b));/*数据类型为string*/

var m="true";

console.log(typeof(m));/*数据类型为string型*/

var n=Boolean(m);/*将string型转换为boolean型*/

console.log(typeof(n));/*数据类型为boolean*/

var l=null;

console.log(typeof(l));/*数据类型为object型*/

var o;

console.log(typeof(o));/*数据类型为undefined型*/

var one=[1,2,3,4];

var two={a:3,b:4,c:5};

console.log(one.constructor);/*显示数据类型为数组（array）*/

console.log(two.constructor);/*显示数据类型为对象（object）*/

/*数组类型是一种特殊的数据类型*/

</script>

</body>

</html>

3、HTML事件

onchange HTML 元素改变

onclick 用户点击 HTML 元素

onmouseover 用户在一个HTML元素上移动鼠标

onmouseout 用户从一个HTML元素上移开鼠标

onkeydown 用户按下键盘按键

onload 浏览器已完成页面的加载

onmousedown 鼠标按下时

onmouseup 鼠标放开时

onfocus 获取焦点时

onbulr 失去焦点时

找对象的作用：

1. 获取值

2. 改变样式

3. 改变属性

eg.改变样式

obj.style.样式名=样式值

改变属性

Obj.属性名=属性值

代码：

<!DOCTYPE html>

<html>

<title>当表单元素改变时发生变化</title>

</head>

<body>

var input=document.getElementsByClassName("one")[0];

input.onchange=function(){/*onchange表示当元素发生改变时会触发事件*/

this.style.backgroundColor="pink";

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<title>获取焦点与失去焦点</title>

<style>

input{

outline: none;

}

</style>

</head>

<body>

var user=document.getElementsByClassName("username")[0];

user.onfocus=function(){/*在鼠标获取焦点时触发function函数*/

this.style.border="solid 1px yellow"

};

user.onblur=function(){/*在鼠标失去焦点时触发function函数*/

this.style.border="solid 1px blue"

};

</script>

</body>

</html>

<!DOCTYPE html>

<html>

</head>

<body>

<spanonmouseover="change('green')">green</span>|

<spanonmouseover="change('red')">red</span>|

<spanonmouseover="change('yellow')">yellow</span>

function change(color){/*利用形参与实参*/

document.bgColor=color;/*将形参赋给背景颜色，也就是会进行实参的展示*/

}

</script>

</body>

</html>

4、JavaScript 函数调用

JavaScript 函数有 4 种调用方式。

每种方式的不同方式在于this 的初始化。

1. 作为一个函数调用（这是调用 JavaScript 函数常用的方法，但不是良好的编程习惯；全局变量，方法或函数容易造成命名冲突的bug。）

2. 函数作为方法调用（函数作为对象方法调用，会使得 this 的值成为对象本身。）

3. 使用构造函数调用函数，如果函数调用前使用了 new 关键字, 则是调用了构造函数。看起来就像创建了新的函数，实际上 JavaScript 函数是重新创建的对象。（构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。构造函数中 this 关键字没有任何的值。this 的值在函数调用时实例化对象(new object)时创建。）

4. 作为函数方法调用函数。

5、获取属性值 .getAttribute()

设置属性值 .setAttribute()

代码：

<!DOCTYPE html>

<html>

<title>背景色的获取</title>

</head>

<body>

<p>

<a href="" data-color="yellow">yellow</a>

<a href=""data-color="orange">orange</a>

</p>

var color=document.getElementsByTagName("a");

for(var i=0;i<color.length;i++){/*color.length表示color这个函数的长度*/

color[i].onmouseover=function(){/*color函数后加索引值，表示这个函数的第i个执行下面的语句*/

document.bgColor=this.getAttribute("data-color");/*.getAttribute表示获取属性值*/

}

</script>

</body>

</html>

5、访问对象的语法： objectName.propertyName(即对象名.属性名)

Length是string对象的属性

toUpperCase() 为将文本转换成大写

eg. var message=”HELLO world!”;

var x=message.toUpperCase();

访问对象的属性语法：对象名.属性名

访问对象的方法语法：对象名.方法()

6、创建 JavaScript 对象

通过 JavaScript，您能够定义并创建自己的对象。

创建新对象有两种不同的方法：

定义并创建对象的实例

使用函数来定义对象，然后创建新的对象实例

1．创建直接的实例

2．使用对象构造器（在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时））

3．把属性添加到JavaScript 对象

4．把方法添加到JavaScript 对象

7、JavaScript 数字

JavaScript 数字可以使用也可以不使用小数点来书写

所有 JavaScript数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。

在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字，它能表示最大值为±1.7976931348623157 x 10308，最小值为±5 x 10 -324.

精度

整数（不使用小数点或指数计数法）最多为 15 位。

小数的最大位数是 17，但是浮点运算并不总是100% 准确

NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

toFixed() 保留小数点的一种运算

obj.toFixed(n) n是大于0的整数，n表示小数位位数

Math 方法

1.round() 四舍五入为整数

2.random() 随机数（0~1之间）

3.ceil() 向上舍去

4.floor() 向下舍去

代码：

<!DOCTYPE html>

<html>

<style>

span{

height: 19px;

width: 70px;

line-height: 19px;

text-align: center;

display:inline-block;

color: #000;

font-size: 19px;

font-weight: bold;

cursor: pointer;/*鼠标放上时为手的形状*/

}

</style>

</head>

<body>

<p>

</p>

function change(){

var one,two,three,four;

one=Math.floor(Math.random()*10);/*随机数向下舍去*/

two=Math.floor(Math.random()*10);

three=Math.floor(Math.random()*10);

four=Math.floor(Math.random()*10);

var msg=one+" "+two+""+three+" "+four;

document.getElementsByTagName("span")[0].innerText=msg;

document.getElementsByTagName("span")[0].style.backgroundImage="url(images/yz"+one+".jpg)"

}

change();/*默认情况下先运行一遍函数*/

var aspan=document.getElementsByTagName("span")[0];

aspan.onclick=change;

</script>

</body>

</html>