html中用js调用ASP文件,实现静态页面动态显示

Nodejs中搭建⼀个静态Web服务器,通过读取⽂件获取响应类型场景Web服务器⼀般指⽹站服务器，是指驻留于因特⽹上某种类型计算机的程序，可以向浏览器等Web客户端提供⽂档，也可以放置⽹站⽂件让全世界浏览，还可以放置数据⽂件，让全世界下载。

⽬前最主流的Web服务器有Apache、Nginx、Its等。

Nodejs中的fs模块的使⽤：Node中的Http模块和Url模块的使⽤：怎样使⽤Node搭建⼀个静态资源服务器，使其根据请求不同的⽂件类型设置不同的响应头。

⽐如：".png":"image/png" ,".png":"image/png" ,".zip":"application/zip" ,".htm":"text/html" ,".html":"text/html" ,".css":"text/css" ,".js":"application/x-javascript" ,注：实现要实现搭建⼀个静态资源服务器，⾸先要拦截每个请求，根据请求的url的⽂件后缀名格式进⾏对应的响应头设置。

⽐如请求html⽂件，就要设置响应头为{'Content-Type': 'text/html';charset="utf-8"'}要是请求js⽂件，响应头为{'Content-Type': 'text/javascript';charset="utf-8"'}如果是请求压缩包zip⽂件，则响应头为{'Content-Type': 'application/zip';charset="utf-8"'}所以将这些不同后缀名格式的⽂件的请求映射为不同的响应头就能搭建⼀个静态资源服务器。

完整的动态网页代码，图片无缝滚动代码<table width="880" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td height="115" valign="middle"><div id=demo style="OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 115px"><table cellpadding=0 align=left border=1 cellspace="0" bordercolor="#ffffff"><tr bordercolor="#FFFFFF"><td id=demo11><table width='100%' cellpadding='0' cellspacing='2' border='0'><tr><td align='center'><a href="scml.asp" target="_blank"><a href='img/1.jpg'><img src='imgs/1.jpg' width='140' height='115' border="0"></a></td><td align='center'><a href="scml.asp" target="_blank">&nbsp;<a href='img/2.jpg'><img src='imgs/2.jpg' width='140' height='115' border='0'></a></td><td align='center'><a target="_blank" href="scml.asp">&nbsp;<a href='img/3.jpg'><img src='imgs/3.jpg' width='140' height='115' border='0'></a></td><td align='center'><a href="scml.asp" target="_blank">&nbsp;<a href='img/4.jpg'><img src='imgs/4.jpg' width='140' height='115' border='0'></a></td><td align='center'><a href="scml.asp" target="_blank">&nbsp;<a href='img/5.jpg'><img src='imgs/5.jpg' width='140' height='115' border='0'></a></td><td align='center'><a href="scml.asp" target="_blank">&nbsp;<a href='img/6.jpg'><img src='imgs/6.jpg' width='140' height='115' border='0'></a></td></tr></table></td><td id=demo12></td></tr></table></div><SCRIPT>var speed=15demo12.innerHTML=demo11.innerHTMLfunction Marquee11(){if(demo12.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo11.offsetWidthelse{demo.scrollLeft++}}var MyMar1=setInterval(Marquee11,speed)demo.onmouseover=function() {clearInterval(MyMar1)}demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}</SCRIPT></td></tr></table>时间代码:1<div id="jnkc"></div><script>setInterval("jnkc.innerHTML=new Date().toLocaleString()+'星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script></div>2<SCRIPT language=JavaScript src="js/openfullwin.js"></SCRIPT>3<div id="jnkc" class="d12"><script>setInterval("jnkc.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script></div>4.日期：<div id="jnkc" class="d12"><script>setInterval("jnkc.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);</script></div>5.显示日期<script language="JavaScript" type="text/javascript">today=new Date();function initArray(){this.length=initArray.arguments.lengthfor(var i=0;i<this.length;i++)this[i+1]=initArray.arguments[i] }var d=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");document.write("<font color=red style='font-size:10pt;font-family: 宋体'> ","今天是：",today.getYear(),"年",today.getMonth()+1,"月",today.getDate(),"日",d[today.getDay()+1],"</font>" );</script>天气预报的代码一、天气预报的代码:<div align="center"><iframe src=" /weather.htm" width="160" height="60"frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div>二、天气预报的代码:<div align="center"><iframe src=" /weather.htm" width="160" height="60"frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe></div>天气预报<iframe src='/weather.htm' width='168' height='50' frameborder='0' marginwidth='0' marginheight='0' scrolling='no'></iframe>新闻频道代码新闻代码<iframe border=0 name=I1 marginwidth=0marginheight=0 src="/iframe/o/allnews/input/index.htm" frameborder=No width=760 scrolling=no height=12></iframe>一.新闻糸统1.查询开始的代码<%Set rs = Server.CreateObject ("ADODB.Recordset")sql = "Select top 6 * from news order by id desc"rs.Open sql,conn,1,1%>2.循环开始代码<%if rs.EOF and rs.BOF thenresponse.write ("暂时还没有文章")elseDo Until rs.EOF%>3.循环结束代码<%rs.MoveNextLoopend if%>4.查询结束代码<%rs.closeSet rs = Nothingconn.closeset conn=Nothing%>******************************************************************************二.新闻目录1.循环开始代码<%Const MaxPerPage=18dim totalPutdim CurrentPagedim TotalPagesdim jdim sqlif Not isempty(request("page")) thencurrentPage=Cint(request("page"))elsecurrentPage=1end ifset rs=server.CreateObject("adodb.recordset")sql="select * from news order by id"rs.open sql,conn,1,1a=1if err.number<>0 thenresponse.write "数据库中无数据"end ifif rs.eof And rs.bof thenResponse.Write "<p align='center' class='contents'> 暂没信息！</p>"elsetotalPut=rs.recordcountif currentpage<1 thencurrentpage=1end ifif (currentpage-1)*MaxPerPage>totalput thenif (totalPut mod MaxPerPage)=0 thencurrentpage= totalPut \ MaxPerPageelsecurrentpage= totalPut \ MaxPerPage + 1end ifend ifif currentPage=1 thenshowContentshowpage totalput,MaxPerPage,"newsml.asp" elseif (currentPage-1)*MaxPerPage<totalPut then rs.move (currentPage-1)*MaxPerPagedim bookmarkbookmark=rs.bookmarkshowContentshowpage totalput,MaxPerPage,"newsml.asp" elsecurrentPage=1showContentshowpage totalput,MaxPerPage,"newsml.asp" end ifend ifend ifsub showContentdim i,ji=0%><% do while not rs.eof %>2.循环结束代码<% i=i+1j=j+1if i>=MaxPerPage then Exit Doif i mod 2= 0 then response.write("</tr><tr>") rs.movenextlooprs.closeset rs=nothing%>3.翻页执行代码<%End SubFunction showpage(totalnumber,maxperpage,filename)Dim nIf totalnumber Mod maxperpage=0 Thenn= totalnumber \ maxperpageElsen= totalnumber \ maxperpage+1End IfResponse.Write "<form method=Post action="&filename&">"Response.Write "<p align='center' class='contents'> "If CurrentPage<2 ThenResponse.Write "<font class='contents'>首页上一页</font> "ElseResponse.Write "<a href="&filename&"?page=1 class='contents'>首页</a> "Response.Write "<a href="&filename&"?page="&CurrentPage-1&" class='contents'>上一页</a> "End IfIf n-currentpage<1 ThenResponse.Write "<font class='contents'>下一页尾页</font>"ElseResponse.Write "<a href="&filename&"?page="&(CurrentPage+1)&" class='contents'>" Response.Write "下一页</a> <a href="&filename&"?page="&n&" class='contents'>尾页</a>" End IfResponse.Write "<font class='contents'> 页次：</font><font class='contents'>"&CurrentPage&"</font><font class='contents'>/"&n&"页</font> " Response.Write "<font class='contents'> 共有"&totalnumber&"个信息"Response.Write "<font class='contents'>转到：</font><input type='text' name='page' size=2 maxlength=10 class=smallInput value="&currentpage&">"Response.Write "&nbsp;<input type='submit' class='button' value='GO' name='cndok'></form>" End Function%>****************************************************************************** 三.显示新闻的初始代码<!--#include file="conn.asp" --><%dim idid=request.QueryString("id")set rs=server.CreateObject("adodb.recordset")sql="select * from news where id="&id&"" rs.open sql,conn,1,1%>2.释放代码<%rs.closeset rs=nothingconn.closeset conn=Nothing%>。

JavaScript实现动态网页特效JavaScript是一种常用的编程语言，可以用于实现动态网页特效。

通过JavaScript，开发者可以为网页添加各种交互效果，使用户体验更加丰富和吸引人。

以下是一些常见的JavaScript动态网页特效的实现方法：1. 鼠标悬停效果：通过JavaScript可以实现当鼠标悬停在某个区域上时，改变该区域的样式或显示隐藏的内容。

例如，当用户将鼠标悬停在一个按钮上时，可以让按钮的颜色变化或显示按钮下方的一段描述文字。

2. 幻灯片效果：通过JavaScript可以实现网页上的幻灯片效果，使多张图片自动轮播展示。

可以通过设置定时器和改变图片的显示状态来实现。

这种效果常用于图片展示、轮播广告等地方。

3. 下拉菜单效果：通过JavaScript可以实现网页上的下拉菜单效果，让用户点击或悬停在一个导航栏上时，下方显示出更多的选项。

可以通过设置事件监听和改变菜单的可见性来实现。

4. 表单验证效果：通过JavaScript可以实现网页上的表单验证效果，检查用户输入的内容是否符合要求。

可以通过设置事件监听和编写验证函数来实现。

例如，当用户提交表单时，可以检查是否所有的必填项都已填写，并给出相应的提示。

5. 动态加载内容效果：通过JavaScript可以实现动态加载内容的效果，当用户滚动网页到一定位置时，自动加载更多的内容。

可以通过监听滚动事件和设置ajax 请求来实现。

这种效果常用于博客、社交媒体等网站上。

6. 特效动画效果：通过JavaScript可以实现各种特效动画，如淡入淡出效果、滑动效果、旋转效果等。

可以通过改变元素的显示状态、设置定时器和改变元素的样式来实现。

这种效果常用于网页中的广告、特效展示等地方。

7. 音频视频播放效果：通过JavaScript可以实现网页上的音频和视频播放效果。

可以通过设置事件监听、控制播放状态和改变样式来实现。

例如，当用户点击一个按钮时，可以播放音频或视频，并显示相应的控制按钮。

使⽤html2canvas.js 实现页⾯截图并显⽰或上传 最近写项⽬有⽤到html2canvas.js ，可以实现页⾯的截图功能，但遭遇了许多的坑，特此写⼀篇随笔记录⼀下。

在使⽤html2canvas 时可能会遇到诸如只能截取可视化界⾯、截图没有背景⾊、svg 标签⽆法截取等问题，下⾯详细的说明⼀下。

⼀、导⼊html2canvas.js 也可以直接导⼊链接： 使⽤起来也⾮常简单，具体的API 可以去⽹上查找，⽣成png 图⽚使⽤“image/png”即可。

其中$("#xxx")为你想要截取的div ，外⾯可以通过jquery 获取它，当然document 获取也是可以的。

其它类型的图⽚如jpg ，为image/jpeg 等等，可⾃⾏查询API 。

到这⾥其实简单的截图已经完成了，如果界⾯稍微复杂⼀点的话，可能就会出现各种坑，下⾯⼀个⼀个解决。

⼆、svg ⽆法截取的问题 当我们截取⼀个div 时，如果这个div 中存在svg 标签，⼀般情况下是截取不到的，⽐如截取⼀个流程图，得到的是下⾯这个样⼦： 可以看到，流程图的线没有截取到，也就是svg 没有截取到，这时的解决⽅法是把svg 转换成canvas 再进⾏截图即可，直接上代码。

这⾥的each 循环是循环所有的svg 标签，将它们全部转换为canvas<script src="https:///html2canvas/0.5.0-beta4/html2canvas.js"></script>html2canvas($("#xxx"), {onrendered: function (canvas) {var url = canvas.toDataURL("image/png"); window.location.href = url;}});if (typeof html2canvas !== 'undefined') {//以下是对svg 的处理var nodesToRecover = [];var nodesToRemove = [];var svgElem = cloneDom.find('svg');svgElem.each(function (index, node) {var parentNode = node.parentNode;var svg = node.outerHTML.trim();var canvas = document.createElement('canvas');canvas.width = 650;canvas.height = 798;canvg(canvas, svg);if (node.style.position) {canvas.style.position += node.style.position;canvas.style.left += node.style.left;canvas.style.top += node.style.top;}nodesToRecover.push({parent: parentNode,child: node});parentNode.removeChild(node);nodesToRemove.push({parent: parentNode,child: canvas});parentNode.appendChild(canvas);});} 这⾥需要⽤到canvg.js，以及它的依赖⽂件rgbcolor.js，⽹上可以直接下载，也可以直接导⼊。

HTML知识第3章 HTML相关技术基础知识纵观各种动态页⾯开发技术，⽆论是JSP、ASP还是PHP都⽆法摆脱HTML的影⼦。

这些动态的页⾯开发技术⽆⾮是在静态HTML页⾯的基础上添加了动态的可以交互的内容。

HTML是所有动态页⾯开发技术的基础。

在接下来的章节将要详细介绍的就是HTML相关的⼀系列技术，包括HTML、JavaScript和CSS。

其中HTML是⼀组标签，负责⽹页的基本表现形式；JavaScript是在客户端浏览器运⾏的语⾔，负责在客户端与⽤户的互动；CSS是⼀个样式表，起到美化整个页⾯的功能。

本书不是详细介绍HTML的专著，在本章也只是讲解Web开发中最常见的HTML知识，⽬的在于使读者能尽快进⼊Web开发的状态。

如果读者有更深层次的需求可以参考专门讲解HTML的书籍。

3.1 HTML 基础知识在各种Web开发技术中，HTML⽆疑是最为基础的。

任何动态语⾔都离不开HTML的⽀持。

所以在开始Web开发的学习之前，读者还是需要静下⼼来打好这个基础。

在这个章节中将会概述HTML的框架知识。

3.1.1 什么是HTMLHTML（Hyper Text Markup Language）即超⽂本标记语⾔，⽤来描述Web⽂档数据。

⽤户可以通过URL链接来访问这种Web⽂档，从⽽达到信息展⽰、信息共享的⽬的。

下⾯就是⼀个简单的HTML ⽂档的例⼦。

//--------⽂件名：First.html-------------------欢迎光临！这是我的第⼀个HTML⽂档。

在这个HTML⽂档中，可以看出HTML的简单结构，每个HTML⽂档都包括⼀对标签，这是所有HTML⽂档所必需的。

在这个标签中间还包括着其他两对、，其中在中是HTML⽂档的头信息，包括标题、关键字、页⾯编码格式、引⼊的CSS或者是JavaScript⽂件的路径等基本信息。

在中间放置的是⽂档要表述展⽰的内容，在上⾯这个例⼦中我们要展⽰的仅仅是“欢迎光临！这是我的第⼀个HTML⽂档。

静态页⾯和动态页⾯的区别⼀、静态web页⾯：1、在静态Web程序中，客户端使⽤Web浏览器（IE、FireFox等）经过⽹络(Network)连接到服务器上，使⽤HTTP协议发起⼀个请求（Request），告诉服务器我现在需要得到哪个页⾯，所有的请求交给Web服务器，之后WEB服务器根据⽤户的需要，从⽂件系统（存放了所有静态页⾯的磁盘）取出内容。

之后通过Web服务器返回给客户端，客户端接收到内容之后经过浏览器渲染解析，得到显⽰的效果。

2、为了让静态web页⾯显⽰更加好看，使⽤javascript／VBScript／ajax（AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指⼀种创建交互式⽹页应⽤的⽹页开发技术。

）但是这些特效都是在客户端上借助于浏览器展现给⽤户的，所以在服务器上本⾝并没有任何的变化。

3、静态web⽆法连接数据库；4、静态web资源开发技术：HTML；5、由于现在的web页⾯中，⼤量使⽤JS，导致浏览器打开页⾯，就会占⽤⼤量的内存，服务端的压⼒是减轻了，但压⼒转移到了客户端。

⼆、动态web页⾯：动态WEB中，程序依然使⽤客户端和服务端，客户端依然使⽤浏览器（IE、FireFox等），通过⽹络(Network)连接到服务器上，使⽤HTTP 协议发起请求（Request），现在的所有请求都先经过⼀个WEB Server来处理。

如果客户端请求的是静态资源(*.htm或者是*.htm)，则将请求直接转交给WEB服务器，之后WEB服务器从⽂件系统中取出内容，发送回客户端浏览器进⾏解析执⾏。

如果客户端请求的是动态资源（*.jsp、*.asp/*.aspx、*.php），则先将请求转交给WEB Container(WEB容器)，在WEB Container中连接数据库，从数据库中取出数据等⼀系列操作后动态拼凑页⾯的展⽰内容，拼凑页⾯的展⽰内容后，把所有的展⽰内容交给WEB服务器，之后通过WEB服务器将内容发送回客户端浏览器进⾏解析执⾏。