<script>var flag =confirm("您确定要退出吗？");if(flag){//退出操作alert("欢迎再次光临！");}else{//提示：手别抖...alert("手别抖...");}var result =prompt("请输入用户名");alert(result);//打开新窗口var openBtn = document.getElementById("openBtn");var newWindow;
openBtn.onclick=function(){//打开新窗口
newWindow =open("https://www.baidu.com");}//关闭新窗口var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick=function(){// 关闭新窗口
newWindow.close();}//setTimeout("fun();",2000);//代码片段var id =setTimeout(fun,2000);//方法对象clearTimeout(id);functionfun(){alert('boom~~');}var id =setInterval(fun,2000);clearInterval(id);var h1 = window.history;var h2 = history;var openBtn = window.document.getElementById("openBtn");alert(openBtn);/*document.getElementById("");*/</script>
案例2：轮播图
<script>//修改图片src属性var number =1;functionfun(){
number ++;//判断number是否大于3if(number >3){
number =1;}//获取img对象var img = document.getElementById("img");
img.src ="img/banner_"+number+".jpg";}//2.定义定时器setInterval(fun,3000);</script>
<body><p><spanid="time">5</span>秒之后，自动跳转到首页...</p><script>var second =5;var time = document.getElementById("time");functionshowTime(){
second --;if(second <=0){//跳转到首页
location.href ="https://www.baidu.com";}
time.innerHTML = second +"";}setInterval(showTime,1000);</script></body>
History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。
* 核心 DOM - 针对任何结构化文档的标准模型
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment:注释对象
* Node：节点对象，其他5个的父对象
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型
<script>//2.加载完成事件 onload
window.onload=function(){
document.getElementById("username").onblur=function(){}
document.getElementById("username").onmouseover=function(){}
document.getElementById("username").onmousedown=function(event){alert(event.button);}
document.getElementById("username").onkeydown=function(event){if(event.keyCode ==13){alert("提交表单");}}
document.getElementById("city").onchange=function(event){}
document.getElementById("form").onsubmit=function(){//校验用户名格式是否正确var flag =false;return flag;}}functioncheckForm(){returntrue;}</script><body><!--
function fun(){
return checkForm();
}
--><formaction="#"id="form"onclick="return checkForm();"><inputname="username"id="username"><selectid="city"><option>--请选择--</option><option>北京</option><option>上海</option><option>西安</option></select><inputtype="submit"value="提交"></form></body>
案例5：表格全选
<script>//1.在页面加载完后绑定事件
window.onload=function(){
document.getElementById("selectAll").onclick=function(){var cbs = document.getElementsByName("cb");for(var i =0; i < cbs.length; i++){
cbs[i].checked =true;}}
document.getElementById("unSelectAll").onclick=function(){var cbs = document.getElementsByName("cb");for(var i =0; i < cbs.length; i++){
cbs[i].checked =false;}}
document.getElementById("selectRev").onclick=function(){var cbs = document.getElementsByName("cb");for(var i =0; i < cbs.length; i++){
cbs[i].checked =!cbs[i].checked;}}
document.getElementById("firstCb").onclick=function(){var cbs = document.getElementsByName("cb");for(var i =0; i < cbs.length; i++){
cbs[i].checked =this.checked;}}var trs = document.getElementsByTagName("tr");for(var i =0; i < trs.length; i++){
trs[i].onmouseover=function(){this.className ="over";}
trs[i].onmouseout=function(){this.className ="out";}}}</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
