js之dom操作练习 ---- js篇
2024-05-06 13:20:31
一、自动计数器
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}function stopCount()
{
clearTimeout(t)
}
</script>
</head><body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
<p>
点击 Start Count 开始计数，点击Stop count 暂停计数
</p>
</body></html>二、history和location练习2
2.1、案例
<HTML>
<HEAD></HEAD><BODY >
<CENTER><INPUT type="button" name="Submit" value=" 前 进 " onClick="javascript: history.forward( )"> <INPUT type="button" name="Submit2" value=" 后 退 " onClick="javascript: history.back( )">
<INPUT type="button" name="Submit3" value=" 刷 新 " onClick="javascript: location.reload( )"> <INPUT type="button" name="Submit322" value="关闭窗口" onClick="javascript: window.close( )"> <INPUT type="button" name="Submit3222" value="sohu主页" onClick="javascript: window.open("www.sohu.com" )">
</CENTER>
</BODY></HTML>2.2、季节、颜色切换
2.2.1、autumn.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>秋季</TITLE>
</HEAD><BODY bgcolor="#FFFCBE">
<TABLE width="736" border="0" cellpadding="0" cellspacing="0"><TR><TD width="402"><IMG src="data:images/autumn.jpg" width="381" height="289"></TD><TD width="334"><P><FONT color=#0000ff>秋雨——高楼目尽欲黄昏，梧桐叶上萧萧雨。<BR>秋夜——睡起秋声无觅处，满阶梧叶日明中。<BR>秋声——未觉池塘春草梦，阶前梧叶已秋声。<BR>秋叶——夜深风竹敲秋韵，万叶千声皆是恨。<BR>秋色——雨侵坏瓮新苔绿，秋入横林数叶红。<BR>秋月——月光浸水水浸天，一派空明互回荡。<BR>秋菊——宁可枝头抱香死，何曾吹落北风中。<BR>秋思——故人万里无消息，便拟江头问断鸿。<BR>秋愁——莫道身闲总是，孤灯夜夜写清愁。 <BR>秋兴——西风吹叶满湖边，初换秋衣独慨然。<BR>秋怀——出门未免流年叹，又见湖边木叶飞。<BR>秋梦——清梦初回秋夜阑，床前耿耿一灯残。<BR>秋忆——砧杵敲残深巷月，梧桐摇落故园秋。<BR>秋悟——人人解说悲秋事，不似诗人彻底知。<BR>秋味——蟋蟀独知秋令早，芭蕉下得雨声多。<BR></FONT><FONT color=#0000ff><FONT size="4"><A href="spring.html">春天</A> <A href="summer.html">夏天</A><A href="winter.html">冬天</A></FONT> <A href="javascript:history.back();">后退</A> <A href="javascript:history.forward();">前进</A> </FONT> </P></TD></TR>
</TABLE>
<FONT class=big><FONT class=viewthread><BR>
</FONT></FONT>
</BODY>
</HTML>
2.2.2、main.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>LOACTION和HISTORY对象</TITLE>
<SCRIPT language="JavaScript" >function jump ( )
{location.href=document.myform.menu1.value; }
</SCRIPT>
<STYLE type="text/css">
<!--
body {background-color: #1F6ECD;
}
.style2 {font-size: 18px;font-weight: bold;color: #FFFFFF;
}
.STYLE3 {color: #FF0000}
-->
</STYLE></HEAD><BODY>
<FORM name="myform"><TABLE border="0" cellspacing="0" cellpadding="0" align="center"><TR><TD width="190"><A href="javascript:location='spring.html'"><IMG src="data:images/1.jpg" alt="春" border="0"></A></TD><TD width="200"><A href="javascript:location='summer.html'"><IMG src="data:images/2.jpg" alt="夏" width="198" height="153" border="0"></A></TD></TR><TR align="center" class="STYLE3"><TD>春</TD><TD>夏</TD></TR><TR><TD><A href="javascript:location='autumn.html'"><IMG src="data:images/3.jpg" alt="秋" width="191" height="152" border="0"></A></TD><TD><A href="javascript:location='winter.html'"><IMG src="data:images/4.jpg" alt="冬"border="0"></A></TD></TR><TR align="center" class="STYLE3"><TD>秋</TD><TD>冬</TD></TR></TABLE></FORM
></BODY>
</HTML>
2.2.3、spring.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>春天</TITLE>
</HEAD><BODY bgcolor="#CEBEAF"><TABLE width="736" border="0" cellspacing="0" cellpadding="0"><TR><TD width="399"><IMG src="data:images/spring.jpg" width="381" height="289" align="left"></TD><TD width="337"><P><FONT
color=#0000ff size="3">春来——爆竹声中一岁除，春风送暖入屠苏。<BR>春雨——小楼一夜听春雨，深巷明朝卖杏花。<BR>春花——惆怅东栏一株雪，人生看得几清明。<BR>春夜——更深月夜半人家，北斗阑干南斗斜。<BR>春水——春水碧于天，画船听雨眠。 <BR>春风——春风又绿江南岸，明月何时照我还。<BR>春光——等闲识得东风面，万紫千红总是春。<BR>春景——试上超然台上看，半壕春水一城花。<BR>春游——东风知我欲山，吹断檐间积雨声。 <BR>春思——春心莫共花争发，一寸相思一寸灰。<BR>春寂——春潮带雨晚来急，野渡无人舟自横。<BR>春愁——问君能有几多愁，恰似一江春水向东流<BR>春梦——枕上片时春梦中，行尽江南数千里。<BR>春恨——人生自是有情痴，此恨不关风和月。<BR>春归——落红不是无情物，化作春泥更护花。<BR></FONT><FONT color=#0000ff> <FONT size="4"><A href="summer.html">夏天</A> <A href="autumn.html">秋天</A> <A href="winter.html">冬天</A></FONT> <A href="javascript:history.back();">后退</A> <A href="javascript:history.forward();">前进</A></FONT></P></TD></TR>
</TABLE></BODY>
</HTML>
2.2.4、summer.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>夏季</TITLE>
</HEAD><BODY bgcolor="#E5F4F9">
<TABLE width="760" border="0" cellpadding="0" cellspacing="0"><TR><TD width="414"><IMG src="data:images/summer.jpg" width="381" height="280"></TD><TD width="346"><P><FONT
color=#0000ff>夏颂——纳清风台榭开怀，傍流水亭轩赏心。<BR>夏景——叶上初阳干宿雨，水面清圆，风荷举。<BR>夏初——槐柳成阴雨洗尘，樱桃乳酪并尝新。<BR>夏热——日轮当午凝不去，万国如在洪炉中。<BR>夏雨——风声撼山翻怒涛，雨点飞空射强弩。<BR>夏水——涧影见藤竹，潭香闻芰荷。<BR>夏夜——散发乘夕凉，开轩卧闲敞。<BR>夏花——荷叶罗裙一色裁，芙蓉向脸两边开。<BR>夏鸟——漠漠水田飞白鹭，阴阴夏木啭黄鹂。<BR>夏蝉——垂缍饮清露，流响出疏桐。<BR>夏节——彩线轻缠红玉臂，小符斜桂绿云鬟。<BR>夏思——夏虫也为我沉默，沉默是今晚的康桥！<BR>夏游——松风涧水杂清音，空山如弄琴。<BR>夏趣——懒摇白羽扇，裸体青林中。<BR></FONT><FONT color=#0000ff><FONT size="4"><A href="spring.html">春天</A> <A href="autumn.html">秋</A> <A href="winter.html">冬天</A></FONT> <A href="javascript:history.go(-1);">后退</A> <A href="javascript:history.go(1);">前进</A></FONT></P></TD></TR>
</TABLE>
</BODY>
</HTML>
2.2.5、winter.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>冬日</TITLE>
</HEAD><BODY bgcolor="#ACB9E3">
<TABLE width="737" border="0" cellpadding="0" cellspacing="0"><TR><TD width="397"><IMG src="data:images/winter.jpg" width="381" height="289"></TD><TD width="340"><P><FONT color=#0000ff size="3">冬雪——忽如一夜春风来，千树万树梨花开。<BR>冬梅——不是一番寒彻骨，争得梅花赴鼻香。<BR>冬景——岸容待腊将舒柳，山意冲寒欲放梅。<BR>冬天——琥珀珠海黏行处雪，棕榈帚扫卧来云。<BR>冬夜——岁华皆采获，冬晚共严枯。<BR>冬风——飘飘送下遥天雪，飒飒吹干旅命烟。<BR>冬思——岁寒，然后知柏之后凋。<BR>冬狩——会挽雕弓如满月，西北望，射末狼。<BR>冬愁——云横秦岭家何在，雪拥蓝关马不前。<BR>冬行——草枯鹰眼疾，雪尽马蹄轻。<BR>冬恨——夜阑卧听风吹雨，铁马冰河入梦来。<BR></FONT><FONT size="4"> <A href="spring.html">春天</A> <A href="summer.html">夏天</A> <A href="autumn.html">秋天</A></FONT> <A href="javascript:history.go(-1);">后退</A> <A href="javascript:history.go(1);">前进</A><BR></FONT></P></TD></TR>
</TABLE>
</BODY>
</HTML>
三、falsh文件的引入
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>广告专栏</TITLE>
</HEAD><BODY>
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="297" height="352"><PARAM name="movie" value="flash.swf"><PARAM name="quality" value="high"><EMBED src="flash.swf" QUALITY="high" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" TYPE="application/x-shockwave-flash" width="297" height="352"></EMBED>
</OBJECT>
</BODY>
</HTML>
四、模式窗口
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>模式窗口练习</TITLE>
<STYLE type="text/css">
<!--
.STYLE1 {font-family: Verdana; font-size:14px}
-->
</STYLE>
<SCRIPT type="text/javascript" language="javascript">
function closeWindow(){var province=document.myform.province.value;var city=document.myform.city.value;var district=document.myform.district.value;var number=document.myform.number.value;var street=document.myform.street.value;if(province==city)window.returnValue=city+district+street+number;elsewindow.returnValue=province+city+district+street+number;window.close();
}</SCRIPT>
</HEAD><BODY>
<FORM action="" name="myform" method="post">
<TABLE width="290" height="206" align="center" border="0" bgcolor="#FFC8C8" cellpadding="0" cellspacing="0"><TR><TD colspan="2" align="center"><SPAN class="STYLE1">送货地址确认</SPAN></TD></TR><TR><TD width="124" align="right" valign="middle">省份：</TD><TD width="166"><SELECT name="province"><OPTION value="北京市">北京市</OPTION><OPTION value="广东省">广东省</OPTION><OPTION value="河北省">河北省</OPTION><OPTION value="四川省">四川省</OPTION><OPTION value="江苏省">江苏省</OPTION></SELECT></TD></TR><TR><TD align="right" valign="middle">城市：</TD><TD><SELECT name="city"><OPTION value="北京市" selected>北京市</OPTION><OPTION value="上海市">上海市</OPTION><OPTION value="广州市">广州市</OPTION><OPTION value="邯郸市">邯郸市</OPTION><OPTION value="峨眉山市">峨眉山市</OPTION></SELECT></TD></TR><TR><TD align="right" valign="middle">区：</TD><TD><SELECT name="district"><OPTION value="西城区">西城区</OPTION><OPTION value="海淀区">海淀区</OPTION><OPTION value="白云区">白云区</OPTION><OPTION value="解放区">解放区</OPTION><OPTION value="进城区">进城区</OPTION></SELECT></TD></TR><TR><TD align="right" valign="middle">街道：</TD><TD><INPUT name="street" type="text" size="20"></TD></TR><TR><TD align="right" valign="middle">门牌号：</TD><TD><INPUT name="number" type="text" size="20"></TD></TR><TR><TD colspan="2" align="center"><INPUT name="btn" type="button" value="确认" onClick="closeWindow()"></TD></TR>
</TABLE>
</FORM></BODY>
</HTML>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>模式窗口练习</TITLE>
<SCRIPT language="javascript" type="text/javascript">function openWindow(){var address=window.showModalDialog("address.html","","dialogWidth=340px;dialogHeight=270px");document.myform.address.value=address;}function showInfo(){var address=document.myform.address.value;var flage=confirm("您本次购买的商品信息如下：\n商品名称：跑跑游戏道具；\n商品数量：5件；\n商品单价：12.5美金；\n运费：10美金；\n费用总计：72.5美金；\n送货地址:"+address+"\n请确认以上信息是否有误！！！");if(flage){alert("您的订单已提交");}
}
</SCRIPT>
</HEAD><BODY>
<FORM action="" method="post" name="myform">
<TABLE width="533" height="133" border="1" bgcolor="#FFC8C8" align="center" cellpadding="0" cellspacing="0"><TR><TH colspan="5">简易购物车</TH></TR><TR align="center"><TD width="92">商品名称</TD><TD width="100">数量(件)</TD><TD width="110">单价(美元)</TD><TD width="101">运费(美元)</TD><TD width="130">合计</TD></TR><TR align="center"><TD>跑跑道具</TD><TD>5</TD><TD>12.5</TD><TD>10</TD><TD>72.5美元</TD></TR><TR align="center"><TD colspan="5"><A href="javascript:openWindow()">填写你的邮寄地址</A><INPUT name="address" type="text" size="40" disabled> <INPUT name="sub" onClick="showInfo()" type="button" value="提交定单"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
五、date对象
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>DATE对象</TITLE>
<SCRIPT language="javascript" type="text/javascript" >
function reloop(){var time = new Date( ); //获得当前时间//获得年、月、日，Date()函数中的月份是从0－11计算var year = time.getYear(); var month = time.getMonth()+1;var date = time.getDate(); var weekday = 0;switch(time.getDay()){case 0:weekday = "星期日";break;case 1:weekday = "星期一";break;case 2:weekday = "星期二";break;case 3:weekday = "星期三";break;case 4:weekday = "星期四";break;case 5:weekday = "星期五";break;case 6:weekday = "星期六";break;}document.write("今天是"+year+"年"+month+"月"+date+"日"+weekday);
}
</SCRIPT></HEAD><BODY onLoad="reloop()">
</BODY>
</HTML>
六、多次弹出框
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>病毒提示</TITLE>
</HEAD><BODY >
<IMG src="pic.jpg"></BODY>
</HTML>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>作业三</TITLE>
<SCRIPT language="JavaScript">function open1( num){var count=parseInt(num);count++;if(count<=6){open("adv.htm","", "toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=500, height=700");setTimeout("open1("+count+")",1000);}else{alert("恭喜你，你中奖了！！！");}}</SCRIPT>
</HEAD><BODY >
<INPUT name="openButton" type="button" id="openButton1" value="病毒警告" onClick=" open1('1') ">
</BODY>
</HTML>
js之dom操作练习 ---- js篇相关推荐
- MV* 框架 与 DOM操作为主 JS库 的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库 与 MV* 框架的对比 案例(MV* 框架 与 DOM操作 JS库 实例对比) 购物车页面 ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- js hover 触发事件_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量 浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
- 原生js循环展示dom_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量 浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
- JS的DOM操作1--获取元素与修改元素(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
- 失去jQuery Bloat —使用NodeList.js进行DOM操作
p.tip {background-color: rgba(128,128,128,0.05);border-top-right-radius: 5px;border-bottom-right-rad ...
- JS的DOM操作3--删除事件，注册事件与冒泡⭐⭐⭐(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
- 超详细的jQuery的 DOM操作，一篇就足够！
摘要:今天来和大家分享有关jQuery框架中DOM操作的相关技术,又是一个堪称DOM"全家桶"系列的讲解,建议收藏关注认真学习! 本文分享自华为云社区<[JQuery框架]超 ...
- js 原生dom 操作
一. 首先要了解什么是 DOM? DOM: 全称 Document Object Mode 文档对象模型,表示由多层节点构成的文档. document: 表示每个文档的根节点,它的唯一子结点是 htm ...
最新文章
- Chapter 7. 对话框控件
- PCB电路设计10大基本原则
- Netty中的那些坑
- Mysql命令行修改字段类型
- 在树洞里,渝粤题库在线整理
- android一键分享功能不使用任何第三方sdk
- java循环的概念_Java数据结构之循环队列简单定义与用法示例
- Validator验证Ajax提交表单的方法
- 别墅客厅吊顶怎么做？有哪些注意事项？
- Kylin之Caused by :...The table :DWD_ORDER_INFO Dup key found
- Java视频教程免费分享（网盘直接取）
- python如何获取鼠标位置_python实时得到鼠标的位置
- MRP存在的七大缺陷，你造吗？
- 【建行】龙支付新老用户赚200元详细教程
- oracle数据块坏,ORACLE中修复数据块损坏
- Linux系统时钟同步
- IE11兼容ES6语法问题
- 基于STM32F103的液晶显示电子钟
- Tesseract学习（一）
- PS：“内容识别填充”去水印