1.字符串对象(String)
2.Number 对象
3.JavaScript Array(数组)
4.JavaScript Boolean(布尔)【注意Boolean对象与boolean值的差异】
1.创建boolena对象
1.1直接赋值
Var boo1=false;
1.2通过构造器创建boolean对象
通过构造器创建boolean对象可以将
数字0--false 非0--true
字符串 “”---false 非””--true
null---false
NaN---false
对象【Boolean对象】-- true
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Boolean类型</title>
</head>
<body>
<script type="text/javascript">
/*
1.JS中的布尔类型永远只有两个值: true和false (这一点和Java一样)
2.在Boolean类型中有一个函数叫:Boolean().
语法格式:
Boolean(数据)
Boolean()函数的作用是将非布尔类型转换成布尔类型
*/
//var username = "lucy"; //true
var username ="";//false
/*
if(Boolean(username)){
alert("欢迎你"+username);
}else{
alert("用户名不能为空!");
}
*/
/*
if(username){
alert("欢迎你"+username);
}else{
alert("用户名不能为空");
}
*/
//if()括号会把其中的值转换为布尔值
//规律: “有”就转换成true,“没有”就转换成false
alert(Boolean(1));//true
alert(Boolean(0));//false
alert(Boolean(""));//false
alert(Boolean("abc"));//true
alert(Boolean(null));//false
alert(Boolean(NaN));//false
alert(Boolean(undefined));//false
alert(Boolean(Infinity));//true
/*
while(10/3){
alert("hehe");
}
*/
//Null类型只有一个值, null
alert(typeof null);//“object”
</script>
</body>
</html>
valueOf() 返回 Boolean 对象的原始值。boolean数据值
注意:
1.创建Boolena对象是通过new Boolean()的方式得到的是Boolean对象,通过valueOf()得到的是boolean的原始值。
2.无论是不是Boolen对象,只要是对象,在if语句的判断条件中会被转换成boolean值且一定是true。通过Boolen对象提供的valueOf()方法得到Boolen对象中的boolean数据值。
5.JavaScript Date(日期)
1、创建Date对象
new Date(); //当前系统时间
例如:得到当前系统时间
var date=new Date();
document.write(date);
Thu Nov 19 2020 11:01:14 GMT+0800 (中国标准时间)
2.new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
例如:
var date2=new Date(10000);
document.write("<h1>"+date2+"</h1>");
3.new Date(dateString)
例如:
var date3=new Date("2018/12/1 12:29:30");
document.write("<h1>"+date3+"</h1>");
4.new Date(year, month, day, hours, minutes, seconds, milliseconds)
例如:
- Date的常用方法
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
getFullYear()获取年份
getMonth()获取月份【从0开始数,我们在使用的是需要+1】
getDate()获取月中的天数
getDay()获取星期
getHours()获取小时数
getMinutes()获取分钟数
getSeconds()获取秒数
setFullYear(y,m,d) 设置具体的日期。
setMonth()设置月份【从0开始数,我们在使用的是需要-1】
setDate()设置月中的天数
setDay()设置星期
setHours()设置小时数
setMinutes()设置分钟数
setSeconds()设置秒数
setTime()设置毫秒数,得到从 1970 年 1 月 1 日设置的毫秒数重新给出时间日期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date对象</title>
<script type="text/javascript">
//1创建date对象
var date=new Date();
document.write(date+"<br />");
//getTime()返回从1970年一月一日至今的毫秒数
document.write(date.getTime()+"<br />");
//getFullYear()获取年份
document.write(date.getFullYear()+"<br />");
//getMonth()获取月份
document.write(date.getMonth()+"<br />");
//getDate()获取月份中的天数
document.write(date.getDate()+"<br />");
//getday()获取星期
document.write(date.getDay()+"<br />");
//getHours()获取小时数
document.write(date.getHours()+"<br />");
//getMinutes获取分钟
document.write(date.getMinutes()+"<br />");
//getSeconds获取秒数
document.write(date.getSeconds()+"<br />");
//setFullYear()设置具体日期;
//【月份从0开始数,我们在设置的是需要+1】
date.setFullYear(2019,10,20);
date.setHours(12);
date.setMinutes(12);
date.setSeconds(12);
//setTime设置毫秒数,
//得到从 1970 年 1 月 1 日设置的毫秒数重新给出时间日期
date.setFullYear(2020,10,24);
date.setHours(12);
date.setMinutes(12);
date.setSeconds(12);
//date.setTime(10000);
document.write(date+"<br />");
//new Date(milliseconds) 返回从 1970 年 1 月 1 日至今的毫秒数
var date2=new Date(10000);
document.write(date2+"<br />");
//new Date(dateString)设置具体日期
var date3=new Date("2020-2-2 2:2:2");
//var date3=new Date("2018年12月1日 12:29:30");错误
var date3=new Date("2020/2/2 2:2:2");
document.write(date3+"<br />");
//new Date(year, month, day, hours, minutes, seconds, milliseconds)
var date4=new Date(2020,2,2 ,2,2,2,200);
document.write(date4+"<br />");
//----------------------------------
var a=date.getFullYear();
var a1=a.toString();
var cstring="";
var d=date.getMonth();
var d1=d.toString();
var cstring1="";
var e=date.getDate();
var e1=e.toString();
var cstring2="";
//alert(d);
alert(e);
for(var i=0;i<a1.length;i++){
cstring=gethanzi(a1.charAt(i));
}
for(var i=0;i<d1.length;i++){
cstring1=yue(d1.charAt(i));
}
for(var i=0;i<e1.length;i++){
cstring2=ri(e1.charAt(i));
}
alert(cstring+"年"+cstring1+"月"+cstring2+"日");
function gethanzi(num){
switch(num){
case"0":cstring=cstring+"零";break;
case"1":cstring=cstring+"壹";break;
case"2":cstring=cstring+"贰";break;
case"3":cstring=cstring+"叁";break;
case"4":cstring=cstring+"肆";break;
case"5":cstring=cstring+"伍";break;
case"6":cstring=cstring+"陆";break;
case"7":cstring=cstring+"柒";break;
case"8":cstring=cstring+"捌";break;
case"9":cstring=cstring+"玖";break;
}
return cstring;
}
function yue(num2){
switch(num2){
case"0":cstring1=cstring1+"零";break;
case"1":cstring1=cstring1+"壹";break;
case"2":cstring1=cstring1+"贰";break;
case"3":cstring1=cstring1+"叁";break;
case"4":cstring1=cstring1+"肆";break;
case"5":cstring1=cstring1+"伍";break;
case"6":cstring1=cstring1+"陆";break;
case"7":cstring1=cstring1+"柒";break;
case"8":cstring1=cstring1+"捌";break;
case"9":cstring1=cstring1+"玖";break;
}
return cstring1;
}
function ri(num3){
switch(num3){
case"0":cstring2=cstring2+"零";break;
case"1":cstring2=cstring2+"壹";break;
case"2":cstring2=cstring2+"贰";break;
case"3":cstring2=cstring2+"叁";break;
case"4":cstring2=cstring2+"肆";break;
case"5":cstring2=cstring2+"伍";break;
case"6":cstring2=cstring2+"陆";break;
case"7":cstring2=cstring2+"柒";break;
case"8":cstring2=cstring2+"捌";break;
case"9":cstring2=cstring2+"玖";break;
}
return cstring2;
}
// var rq=new Array();
// for(var i=0;i<cstring.length;i++){
// rq[i]=cstring[i];
// }
// rq.splice(3,0,["年"]);
// for(var i=0;i<rq.length;i++){
// rq1[i]=getrq(rq.charAt(i));
// }
// var rq1=new String("");
// document.write(rq1);
</script>
</head>
<body>
</body>
</html>
两个日期比较
日期对象也可用于比较两个日期。
下面的代码将当前日期与 2100 年 1 月 14 日做了比较:
var x=new Date();
x.setFullYear(2100,0,14);//设置一个时间用来比较
var today = new Date(); //得到当天的时间日期
if (x>today){
alert("今天是2100年1月14日之前");
}else{
alert("今天是2100年1月14日之后");
}
6.JavaScript Math(算数)
Math(算数)对象的作用是:执行常见的算数任务。
算数值【常量值】
Math.E -- 自然常数,为数学中一个常数,是一个无限不循环小数,且为超越数,其值约为2.718281828459045。
Math.PI------圆周率
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数学对象</title>
<script type="text/javascript">
document.write("自然常数="+Math.E+"<br />");
document.write("圆周率="+Math.PI+"<br />");
document.write("平方根="+Math.sqrt(9)+"<br />");
document.write("立方根="+Math.cbrt(8)+"<br />");
document.write("次幂="+Math.pow(2,3)+"<br />");
document.write("随机数="+Math.random()+"<br />");
document.write("最为接近的整数="+Math.round(-12.6)+"<br />");
document.write("最大数="+Math.max(1,2,3,4,5)+"<br />");
document.write("最小数="+Math.min(1,2,3,4,4,5)+"<br />");
</script>
</head>
<body>
</body>
</html>
7.JavaScript RegExp 对象
RegExp:是正则表达式(regular expression)的简写。
RegExp就是一个用来检索,判断文本数据的一种格式。在做数据校验的时候经常使用。
创建格式:
var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers; 【不推荐使用】
注意:当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)。
var re = new RegExp("\\d+");
\s | 匹配任何不可见字符,包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。 |
\W | 匹配任何非单词字符。等价于“[^A-Za-z0-9_]” |
^ | 匹配输入字行首 |
$ | 匹配输入行尾 |
* | 任意次 |
? | 零次或一次 |
{n} | 匹配确定的n次 |
{n,} | 至少匹配n次 |
{n,m} | 最少匹配n次且最多匹配m次 |
.点 |
|
\d | 匹配一个数字字符 |
\w | 匹配包括下划线的任何单词字符 |
+ | 一次或多次(大于等于1次) |
[a-z] | 字符范围。匹配指定范围内的任意字符 |
[^a-z] | 负值字符范围。匹配任何不在指定范围内的任意字符 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>正则表达式</title>
<script type="text/javascript">
var zhengze=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
var tel="15895926135";
var test1=zhengze.test(tel);
document.write("<h1>"+test1+"</h1>");
var chazhao=new RegExp("jsc");
var zhi="ilgnimelajsc";
var test2=chazhao.exec(zhi);
if(test2==null){
document.write("不存在");
}else{
document.write("<h1>存在,值="+test2+"</h1>");
}
</script>
</head>
<body>
</body>
</html>
Javascript中的元素
- 变量 【var】
- 运算,表达式 【1.赋值 2.算数{++,--} 3.比较{===} 4.逻辑 5.typeof】
- 语句 【1.顺序结构 2.选择结构{switch{...break}} 3.循环{for/in} 4.....】
- 函数{方法} 【function】
- 数据类型
- 对象 【1.内置对象 2.DOM 3 BOM】
JavaScript 类型转换---数据类型的转换
1.通过使用 JavaScript 函数 例如:toString()
2.通过 JavaScript 自身自动转换 例如:var num1=100; var res=num1+”hello”;
1.将数字转换为字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类型转换</title>
<script type="text/javascript">
//1.通过使用 JavaScript 函数 例如:toString()
//2.通过 JavaScript 自身自动转换 例如:var num1=100; var res=num1+”hello”;
var num1=100;
document.write("<h1>num1==="+typeof num1+num1+"</h1>");
var test1=num1+"";
document.write("<h1>test1==="+typeof test1+test1+"</h1>");
var bool1=false;
var test2=bool1+1;
document.write("<h1>test2==="+typeof test2+test2+"</h1>");
//将数字转换为字符串;
//1.全局方法 String() 可以将数字转换为字符串。
var num2=100;
var string1=new String(num2);//string object;
var string11=String(num2);//string,value;
document.write("<h1>string1==="+typeof string1+string1+"</h1>");
document.write("<h1>string11==="+typeof string11+string11+"</h1>");
//2.number 方法 tostring();
var string2=num2.toString() //string value;
document.write("<h1>string2==="+typeof test2+test2+"</h1>");
//3.toFixed(小数的位数)把数字转化为字符串,结果的小鼠点后有指定位数的数字;
var tofixed1=num2.toFixed(0);
document.write("<h1"+typeof tofixed1+tofixed1+"</h1>");
//4.+""
num2=100;
var kong=num2+"";
document.write("<h1>空字符串"+kong+typeof+kong);
//将包含数字值的字符串转换为数字
var str1="25";
//全局方法 Number()可以将字符串转换为数字
var num3=new Number(str1);
document.write("<h1>num3==="+num3+",type=="+typeof num2+"</h1>");
//2.包含数字值的字符串*1
var str4="1000";
var num4=str4*1;
document.write("<h1>num4==="+num4+"type=="+typeof num4+"</h1>");
//3一元运算符;
var str5="100";
var num5=+str5;//Number value
document.write("<h1>num5==="+num5+",type=="+typeof num5+"</h1>");
//=======================================
//将布尔值转换位字符串
//1.全局方法 String() 可以将布尔值转换为字符串;
var bool2=true;
var string3=new String(bool2);
var string33=String(bool2);
document.write("<h1>bool-string"+typeof string3+string3+"</h1>");
//Boolean 方法 toString();
var string4=bool2.toString();
document.write("<h1>bool-string"+typeof string33+string33+"</h1>");
//将字符串转换位布尔值
//1.空字符串被转换成false
var str1="";
var bool3=new Boolean(str1);//Boolean object
var bool33=Boolean(str1);//Boolean value
document.write("<h1>string--boolean"+typeof bool3+bool3+"</h1>");
document.write("<h1>string--boolean"+typeof bool33+bool33+"</h1>");
//2,非空字符串被转换成true;
var feikong="asds";
var bool4=new Boolean(feikong);
var bool44=Boolean(feikong);//Boolean object
document.write("<h1>string--boolean"+typeof bool4+bool4+"</h1>");
document.write("<h1>string--boolean"+typeof bool44+bool44+"</h1>");
//注意:值位false的字符串被转换成boolean值位true值,因为值位false的字符串也是非空字符串;
var false1="false";
var bool5=Boolean(false1);
document.write("<h1>string--boolean"+typeof bool5+bool5+"</h1>");
//将数字转换位布尔值
//1.数字0被转换位false
var number1=0;
var boolnum=new Boolean(number1);
var boolnum1=Boolean(number1);
document.write("<h1>string--boolean"+typeof boolnum+boolnum+"</h1>");
document.write("<h1>string--boolean"+typeof boolnum1+boolnum1+"</h1>");
//2.非0数字被转换位true;
var number2=123;
var boolnum2=new Boolean(number2);
var boolnum22=Boolean(number2);
document.write("<h1>string--boolean"+typeof boolnum2+boolnum2+"</h1>");
document.write("<h1>string--boolean"+typeof boolnum22+boolnum22+"</h1>");
//将布尔值转换为数字
var boolnum3=true;//true=》1;
var numbool1=new Number(boolnum3);
var numbool11= Number(boolnum3);
document.write("<h1>string--boolean"+typeof numbool1+numbool1+"</h1>");
document.write("<h1>string--boolean"+typeof numbool11+numbool11+"</h1>");
//false被转换为数字0;
var boolnum4=false;//false=》0;
var numbool2=new Number(boolnum4);
var numbool22=Number(boolnum4);
document.write("<h1>string--boolean"+typeof numbool2+numbool2+"</h1>");
document.write("<h1>string--boolean"+typeof numbool22+numbool22+"</h1>");
//乘1【*1】
var boolnum5=numbool1*1;
document.write("<h1>string--boolean"+typeof boolnum5+boolnum5+"</h1>");
var boolnum6=numbool2*1;
document.write("<h1>string--boolean"+typeof boolnum6+boolnum6+"</h1>");
//将日期转换为数字
var date1=new Date();
var numdate=new Number(date1);
var numdate2=Number(date1);
document.write("<h1>string--boolean"+typeof numdate+numdate+"</h1>");
document.write("<h1>string--boolean"+typeof numdate2+numdate2+"</h1>");
//注意:日期被转换为数字以后是从1970-1-1到当前日期的毫秒数
//日期方法 getTime() 也有相同效果
var numdate3=date1.getTime();
document.write("<h1>string--boolean"+typeof numdate3+numdate3+"</h1>");
//将数字转换为日期
var numberdate1=1605844538320;
var date11=new Date(numberdate1);//object
var date111=Date(numberdate1);//string
document.write("<h1>string--boolean"+typeof date11+date11+"</h1>");
document.write("<h1>string--boolean"+typeof date111+date111+"</h1>");
//如果数字是年份|月份|天数|时分秒的数字,那么我们可以通过
//Date对象提供的setXXXX()方法
var setdate= new Date();
setdate.setFullYear(2020,11,20);
document.write("<h1>"+setdate+"</h1>+");
//将日期转换为字符串
//全局方法 String()
var date2=new Date();
var datestring1=new String(date2);
var datestring11=String(date2);
document.write("<h1>string--boolean"+typeof datestring1+datestring1+"</h1>");
document.write("<h1>string--boolean"+typeof datestring11+datestring11+"</h1>");
//date方法 tostring()也有同样的效果;
var date3=date2.toString();
document.write("<h1>string--boolean"+typeof date3+date3+"</h1>");
//
//将字符串转换为日期;
var stringdate="2020-11-20 17:16:40";
var date1=new Date(stringdate);
document.write("<h1>string--boolean"+typeof date1+date1+"</h1>");
//注意:字符串中包含的是符合日期时间格式的字符串数据
</script>
</head>
<body>
</body>
</html>
DOM对象
DOM--Document Object Model[文档对象模型]
当网页被加载时,浏览器会创建页面的文档对象模型。
HTML DOM 模型被构造为对象的树
Html文件
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=””>My link</a>
<h1>My header</h1>
</body>
</html>
2.DOM可以完成的功能
1.JavaScript 能够改变页面中的所有 HTML 元素
2.JavaScript 能够改变页面中的所有 HTML 属性
3.JavaScript 能够改变页面中的所有 CSS 样式
4.JavaScript 能够对页面中的所有事件做出反应
3. 查找 HTML 元素
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
3.1. getElementById(id属性值);通过 id 查找 HTML 元素
3.2. getElementsByTagName(标签名)通过标签名查找 HTML 元素
3.3. getElementsByClassName(class属性值)通过类名找到 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML DOM对象</title>
<script type="text/javascript">
//getElementById(id属性值);通过 id 查找 HTML 元素
function testByID (){
var p1=document.getElementById("p1");
//p1--[object HTMLParagraphElement]; DOM对象
p1.style.color='red';
var p2=document.getElementById("p2");
//p2--[object HTMLParagraphElement] DOM对象
p2.style.fontSize='30px';
var p3=document.getElementById("p3");
p3.style.fontSize='40px';
p3.style.color='blue';
}
//getElementsByTagName(标签名)通过标签名查找 HTML 元素
function testByTagname(){
var p=document.getElementsByTagName("p");
//p---[object HTMLCollection] DOM对象的集合---数组
//typeof p---object 数组也是对象所以typeof p值才会是
//p[5]---[object HTMLParagraphElement] DOM对象
var size=10;
for(var i=0;i<p.length;i++)
{
var fonts=size*i+size;
p[i].style.fontSize=fonts+"px";
}
//当元素在html文件中只有一个的时候,
//通过getElementsByTagName方法得到的结果依然是数组
var h2=document.getElementsByTagName("h2");
//alert(h2); [object HTMLCollection] DOM对象的集合---数组
if(h2.length==1){
h2[0].style.color='blue';
}
}
function testByClassName(){
var p1=document.getElementsByClassName("p1");
//alert(p1); //[object HTMLCollection]
for (var i=0;i<p1.length;i++){
p1[i].style.color='red';
}
var h=document.getElementsByClassName("h");
//alert(h); //[object HTMLCollection]
for(var i=0;i<h.length;i++){
h[i].style.color='green';
}
}
</script>
</head>
<body>
<p id="p1">p元素测试getElementById(id属性值)</p>
<p id="p2">p元素测试getElementById(id属性值)</p>
<p id="p3">p元素测试getElementById(id属性值)</p>
<p id="p4">p元素测试getElementById(id属性值)</p>
<input type="button" value="测试getElementById(id属性值)" onclick="testByID();">
<hr>
<p>p元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
<p>p元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
<p>p元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
<p>p元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</p>
<h2>h2元素测试 getElementsByTagName(标签名)通过标签名查找 HTML 元素</h2>
<input type="button" value="测试 getElementsByTagName(标签名)"onclick="testByTagname();">
<hr >
<p class="p1">p元素测试getElementsByClassName(class属性值)通过类名找到 HTML 元素</p>
<p class="p1">p元素测试 getElementsByClassName(class属性值)通过类名找到 HTML 元素</p>
<h2 class="h">h2元素测试 getElementsByClassName(class属性值)通过类名找到 HTML 元素</h2>
<h2 class="h">h2元素测试 getElementsByClassName(class属性值)通过类名找到 HTML 元素</h2>
<input type="button" name="" id="" value="测试 getElenentByClassName(class属性值)"onclick="testByClassName()" />
</body>
</html>
4.JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]
innerHTML 属性--改变页面中HTML 元素的文本内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
function test1(){
var text1=document.getElementById("text1");
var textv=text1.value;
var h=document.getElementsByTagName("h1")[0];
h.innerHTML=textv;
}
function test2(){
var text=document.getElementById("text1");
var value=text.value;
var h=document.getElementsByTagName("h1")[0];
h.innerText=value;
}
</script>
</head>
<body>
<h1>欢迎使用</h1>
<input id="text1" type="text" name="" id="" value="" />
<input onclick="test1()" type="button" name="" id="but1" value="innerHTML 属性" />
<input onclick="test2()" type="button" name="" id="but2" value="innerText 属性" />
</body>
</html>
//注意:innerHTML中设置的字符串内容中有html标记,那么这个被包含的html标记会被解释运行
//注意:innerText中设置的字符串内容中有html标记,那么这个被包含的html标记会被作为字符串输出。
5.JavaScript 能够改变页面中的所有 HTML 属性
属性在html和css中都有。
Html中的属性---是给浏览器解释运行html标记时通过附加信息。
往往出现在html的开始标记中,如果有多个中间使用空格分离。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
function test1(){
imgs=document.getElementsByTagName("img");
imgs[0].src="imgs/avatar2.png";}
</script>
</head>
<body>
<img src="imgs/avatar.png" >
<input type="button" name="" id="" value="控制" onclick="test1()" />
</body>
</html>
6.JavaScript 能够改变页面中的所有 CSS 样式
dom对象.style.具体的css属性名称=属性名称对应的属性值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test1(){
var imgs=document.getElementsByTagName("img")[0];
var but=document.getElementsByName("bnt")[0];
var butvalue=but.value;
if(butvalue=="隐藏"){
imgs.style.display="none";
but.value="显示";
}
if(butvalue=="显示"){
imgs.style.display="block";
but.value="隐藏";
}
}
</script>
</head>
<body>
<img src="imgs/avatar.png" >
<input onclick="test1()" type="button" name="bnt" id="" value="隐藏" />
</body>
</html>