<!--
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>荒天帝</title>
<script>
//变量的声明
// var i=1
// var str="荒天帝"
// alert(typeof i)
// alert(typeof str)
// alert("str".length)
//变量的比较
// var str1=111;
// var str2="111"
// alert(str1==str2) //==数值相等即可
// alert(str1==str2)//===会去判断类型
//输出
// document.write("lover")//直接向页面输出
// console.log("向控制台输出")//浏览器开发者选项的console
//函数的声明
// var hanshu=function()
// {
// alert("fuc")
// }
//
// hanshu()
// function hanshu2()
// {
// alert("fuc")
// }
// hanshu2()
//调用事件
// var zhuchu=function()
// {
// alert("注册成功1")
// }
//
// function zhuchu2()
// {
// alert("注册成功2")
// }
//动态修改标签内的内容
// function xiugai()
// {
// var mydiv=document.getElementById("div1")
// mydiv.innerHTML="<font color='red'>内容被替换了</font>" //这个会把html代码也写上去
// mydiv.innerText="<font color='red'>内容被替换了</font>" //这个会把html代码当文本一起写上去
//
// }
//表单校验,唯独onsubmit事件需要返回值
// 1 确定事件,提交的事件onsubmit
// 2 事件触发函数
// 3 函数中做校验
// function mycheck1()
// {
// var my_input=document.getElementById("username")
// // alert(my_input.value)
// var myvalue=my_input.value.length
// if(myvalue>=6)
// {
// return true
// }else
// {
// alert("用户名太短")
// return false
// }
//
// }
//定时器
//window.setInterval("alert('123');",3000)
//每隔3秒钟调用一次字符串里的内容
//window.setTimeout("alert('456')",2000)
//俩秒钟之后执行字符串里的内容,只执行一次
//上面2个都会返回一个id,并且由下面的函数接受,取消定时器
//clearInterval() 取消由 setInterval() 设置的 timeout。
//clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
<!--图片轮播-->
//应该放在body onload加载完成的时候 <body onload="myinit()">
// var index=0
// function changeImg()
// {
// var img2=document.getElementById("img1")
// var cul=index%3+1 //0取模3等于0,1等于1,2等于2,3等于0,这样循环下去,才会达到轮播的效果
// img2.src="img/"+cul+".jpg"
// index++
// }
//
// function myinit()
// {
// window.setInterval("changeImg()",1000)
// }
<!--定时图片隐藏和显示-->
function hideAD()
{
var img=document.getElementById("img1")
img.style.display="none" //隐藏
}
function disAD()
{
var img=document.getElementById("img1")
img.style.display="block" //block块显示,后面会带有换行符
window.setTimeout("hideAD()",2000) //2秒后隐藏
}
function myinit()
{
window.setTimeout("disAD()",2000)//2秒后出现
}
</script>
</head>
<body onload="myinit()">
<!-- <input type="button" value="注册" onclick="zhuchu2()"/>
<input type="button" value="修改内容" onclick="xiugai()"/>-->
<!--内容替换示例-->
<!-- <div id="div1">
替换这里的内容
</div>-->
<!--表单校验-->
<!--唯独onsubmit事件需要返回值-->
<!-- <form action="_001_html最基本标签.html" onsubmit="return mycheck1()">
用户名 :<input type="text" id="username"/><br/>
<input type="submit" value="提交" />
</form>-->
<img src="img/1.jpg" width="100%" id="img1" style="display: none;"/>
</body>
</html>
js案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>荒天帝</title>
<script>
//动态校验表单
//获得焦点,onfocus,失去焦点 onblur后修改span的内容
//或者用onkeyup事件达到动态检测
// function onFoc() //鼠标点到编辑框的时候
// {
// var user=document.getElementById("userName")
// var userTip=document.getElementById("userTips")
// var num=user.value.length
// if(num<=6)
// {
// userTip.innerHTML="<font color='red'>你输入的小于6位"
// }else
// {
// userTip.innerHTML="<font color='green'>恭喜你可用"
// }
//
// }
//隔行换色
// function changeColor()
// {
// var trs=document.getElementById("tab"); //直接取tr用TagName
// var trs=trs.rows //所有行的对象数组
//
// for(var i=2;i<trs.length;i++) //这个从2开始是因为我们前倆行都不是我们的主要内容
// {
// if(i%2==0) //这个2是用来划分绿色和红色的
// {
// trs[i].style.background="green";
// }else
// {
// trs[i].style.background="red";
// }
//
// }
// }
//复选框的全选和反选的实现,this的作用,还有在js中绑定函数
// function setColor()
// {
// var trs=document.getElementsByTagName("tr");
// for(var i=2;i<trs.length;i++)
// {
// if(i%2==0)
// {
// trs[i].style.background="green";
// }else
// {
// trs[i].style.background="red";
// }
// }
// }
//
// function cancelColor()
// {
// var trs=document.getElementsByTagName("tr");
// for(var i=2;i<trs.length;i++)
// {
// trs[i].style.background='#FFFFFF';
// }
// }
//反选
// window.onload=function() //直接这样绑定函数
// {
// //也可以直接这样绑定函数
// document.getElementById("reserve").onclick=function()
// {
// var inputs= document.getElementsByTagName("input");
// for(var i=2;i<inputs.length;i++)
// {
// // inputs[i].click();//模拟每个都点击
// inputs[i].checked=!inputs[i].checked; // 也可以这样
// if(inputs[i].checked===true)
// {
// setColor()
// }else
// {
// cancelColor()
// }
// }
// }
//
// }
//
//下面是全选
// function ck(obj)
// {
// var jb=obj.checked;//把checked的状态传给变量，方便下面全部赋值
// if(jb===true)
// {
// setColor()
// }else
// {
// cancelColor()
// }
//
//
// var inputs=document.getElementsByTagName("input");//通过标签获取input数组
// for(var i=2;i<inputs.length;i++)
// {
// inputs[i].checked=jb;
// }
//
// }
</script>
</head>
<body>
<!--动态校验表单-->
用户名: <input type="text" id="userName" onkeyup="onFoc()"/> <span id="userTips"></span>
<!--隔行换色-->
<table border="2" cellspacing="0" width="50%" id="tab">
<tr>
<td colspan="5">
<input type="button" id="reserve" value="反选" />
</td>
</tr >
<tr bgcolor="antiquewhite">
<td>
<!--选中就换色,this是隐藏的本类对象-->
<input type="checkbox" onclick="ck(this)"/>
</td>
<td align="center">分类</td>
<td align="center">名称</td>
<td align="center">描述</td>
<td align="center">操作</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td >1</td>
<td>名称</td>
<td >描述</td>
<td >删除</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td >2</td>
<td>名称2</td>
<td >描述2</td>
<td >删除</td>
</tr>
</table>
</body>
</html>