javascript 经典代码

 我想收集一些具有实用功能和经典的javaScript代码,比如验证、coolie操作类、浏览器信息等等,大家认为值得一贴的javaScript代码都可以贴上来,谢谢大家!
Response.Write("〈script language=javascript〉window.open('rq.aspx', '', 'top=80;; left=150;; height=160,width=330,status=no,toolbar=no,menubar=no,location=no')〈/script〉");;
HTML事件的控件触发
http://dev.csdn.net/Develop/article/20/20566.shtm
JavaScript通用库(二)
http://dev.csdn.net/article/28/28057.shtm
破解网页禁止鼠标右键的技巧
http://dev.csdn.net/develop/article/19/19419.shtm
如何利用JAVASCRIPT实现浮动广告
http://community.csdn.net/Expert/topic/3226/3226990.xml?temp=.5731165
加入收藏夹大全
http://www.588188.com/netbook/tech/other/html/other.ohchina.6.htm
客户端脚本真藏
http://www.pcdog.com/info/2974.htm
//打开模式对话框
function doSelectUser(txtId)
{


   strFeatures="dialogWidth=500px;;dialogHeight=360px;;center=yes;;middle=yes ;;help=no;;status=no;;scroll=no";;

   var url,strReturn;;

  

   url="selUser.aspx";;

  

   strReturn=window.showModalDialog(url,'',strFeatures);;

}

//返回模式对话框的值
function okbtn_onclick()
{
var commstr='';;

  
window.returnValue=commstr;;


   window.close() ;;
}
全屏幕打开 IE 窗口
var winWidth=screen.availWidth ;;
var winHeight=screen.availHeight-20;;
window.open("main.aspx","surveyWindow","toolbar=no,width="+ winWidth +",height="+ winHeight +",top=0,left=0,scrollbars=yes,resizable=yes,center:yes,statusbars=yes");;
break
//脚本中中使用xml
function initialize() {

  var xmlDoc

  var xslDoc


  xmlDoc = new ActiveXObject('Microsoft.XMLDOM')

  xmlDoc.async = false;;


  xslDoc = new ActiveXObject('Microsoft.XMLDOM')

  xslDoc.async = false;;

xmlDoc.load("tree.xml")

  xslDoc.load("tree.xsl")

  

  

  folderTree.innerHTML = xmlDoc.documentElement.transformNode(xslDoc)
}
一、验证类
1、数字验证内

  1.1 整数

  1.2 大于0的整数 (用于传来的ID的验证)

  1.3 负整数的验证

  1.4 整数不能大于iMax

  1.5 整数不能小于iMin
2、时间类

  2.1 短时间,形如 (13:04:06)

  2.2 短日期,形如 (2003-12-05)

  2.3 长时间,形如 (2003-12-05 13:04:06)

  2.4 只有年和月。形如(2003-05,或者2003-5)

  2.5 只有小时和分钟,形如(12:03)
3、表单类

  3.1 所有的表单的值都不能为空

  3.2 多行文本框的值不能为空。

  3.3 多行文本框的值不能超过sMaxStrleng

  3.4 多行文本框的值不能少于sMixStrleng

  3.5 判断单选框是否选择。

  3.6 判断复选框是否选择.

  3.7 复选框的全选,多选,全不选,反选

  3.8 文件上传过程中判断文件类型
4、字符类

  4.1 判断字符全部由a-Z或者是A-Z的字字母组成

  4.2 判断字符由字母和数字组成。

  4.3 判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母

  4.4 字符串替换函数.Replace();;
5、浏览器类

  5.1 判断浏览器的类型

  5.2 判断ie的版本

  5.3 判断客户端的分辨率

  
6、结合类

  6.1 email的判断。

  6.2 手机号码的验证

  6.3 身份证的验证

  

二、功能类

1、时间与相关控件类

  1.1 日历

  1.2 时间控件

  1.3 万年历

  1.4 显示动态显示时钟效果(文本,如OA中时间)

  1.5 显示动态显示时钟效果 (图像,像手表)
2、表单类

  2.1 自动生成表单

  2.2 动态添加,修改,删除下拉框中的元素

  2.3 可以输入内容的下拉框

  2.4 多行文本框中只能输入iMax文字。如果多输入了,自动减少到iMax个文字(多用于短信发送)

  
3、打印类

  3.1 打印控件
4、事件类

  4.1 屏蔽右键

  4.2 屏蔽所有功能键

  4.3 --〉 和〈-- F5 F11,F9,F1

  4.4 屏蔽组合键ctrl+N
5、网页设计类

  5.1 连续滚动的文字,图片(注意是连续的,两段文字和图片中没有空白出现)

  5.2 html编辑控件类

  5.3 颜色选取框控件

  5.4 下拉菜单

  5.5 两层或多层次的下拉菜单

  5.6 仿IE菜单的按钮。(效果如rongshuxa.com的导航栏目)

  5.7 状态栏,title栏的动态效果(例子很多,可以研究一下)

  5.8 双击后,网页自动滚屏
6、树型结构。

  6.1 asp+SQL版

  6.2 asp+xml+sql版

  6.3 java+sql或者java+sql+xml
7、无边框效果的制作
8、连动下拉框技术
9、文本排序
10,画图类,含饼、柱、矢量贝滋曲线
11,操纵客户端注册表类
12,DIV层相关(拖拽、显示、隐藏、移动、增加)
13,TABLAE相关(客户端动态增加行列,模拟进度条,滚动列表等)
14,各种〈object classid=〉相关类,如播放器,flash与脚本互动等
16, 刷新/模拟无刷新 异步调用类(XMLHttp或iframe,frame)


一、验证类
1、数字验证内

  1.1 整数

   /^(-|/+)?/d+$/.test(str)

  1.2 大于0的整数 (用于传来的ID的验证)

   /^/d+$/.test(str)

  1.3 负整数的验证

   /^-/d+$/.test(str)
2、时间类

  2.1 短时间,形如 (13:04:06)

   function isTime(str)

   {

   var a = str.match(/^(/d{1,2})(:)?(/d{1,2})/2(/d{1,2})$/);;

   if (a == null) {alert('输入的参数不是时间格式');; return false;;}

   if (a[1]〉24 || a[3]〉60 || a[4]〉60)

   {

   alert("时间格式不对");;

   return false

   }

   return true;;

   }

  2.2 短日期,形如 (2003-12-05)

   function strDateTime(str)

   {

   var r = str.match(/^(/d{1,4})(-|//)(/d{1,2})/2(/d{1,2})$/);;

   if(r==null)return false;;

   var d= new Date(r[1], r[3]-1, r[4]);;

   return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);;

   }

  2.3 长时间,形如 (2003-12-05 13:04:06)

   function strDateTime(str)

   {

   var reg = /^(/d{1,4})(-|//)(/d{1,2})/2(/d{1,2}) (/d{1,2}):(/d{1,2}):(/d{1,2})$/;;

   var r = str.match(reg);;

   if(r==null)return false;;

   var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);;

   return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);;

   }

  2.4 只有年和月。形如(2003-05,或者2003-5)

  2.5 只有小时和分钟,形如(12:03)
3、表单类

  3.1 所有的表单的值都不能为空

   〈input οnblur="if(this.value.replace(/^/s+|/s+$/g,'')=='')alert('不能为空!')"〉

  3.2 多行文本框的值不能为空。

  3.3 多行文本框的值不能超过sMaxStrleng

  3.4 多行文本框的值不能少于sMixStrleng

  3.5 判断单选框是否选择。

  3.6 判断复选框是否选择.

  3.7 复选框的全选,多选,全不选,反选

  3.8 文件上传过程中判断文件类型
4、字符类

  4.1 判断字符全部由a-Z或者是A-Z的字字母组成

   〈input οnblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')"〉

  4.2 判断字符由字母和数字组成。

   〈input οnblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')"〉

  4.3 判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母

   /^([a-zA-z_]{1})([/w]*)$/g.test(str)

  4.4 字符串替换函数.Replace();;
5、浏览器类

  5.1 判断浏览器的类型

   window.navigator.appName

  5.2 判断ie的版本

   window.navigator.appVersion

  5.3 判断客户端的分辨率

   window.screen.height;; window.screen.width;;

  
6、结合类

  6.1 email的判断。

   function ismail(mail)

   {

   return(new RegExp(/^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/).test(mail));;

   }

  6.2 手机号码的验证

  6.3 身份证的验证

   function isIdCardNo(num)

   {

   if (isNaN(num)) {alert("输入的不是数字!");; return false;;}

   var len = num.length, re;;

   if (len == 15)

   re = new RegExp(/^(/d{6})()?(/d{2})(/d{2})(/d{2})(/d{3})$/);;

   else if (len == 18)

   re = new RegExp(/^(/d{6})()?(/d{4})(/d{2})(/d{2})(/d{3})(/d)$/);;

   else {alert("输入的数字位数不对!");; return false;;}

   var a = num.match(re);;

   if (a != null)

   {

   if (len==15)

   {

   var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);;

   var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];;

   }

   else

   {

   var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);;

   var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];;

   }

   if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对!");; return false;;}

   }

   return true;;

   }

画图:
〈OBJECT
id=S
style="LEFT: 0px;; WIDTH: 392px;; TOP: 0px;; HEIGHT: 240px"
height=240
width=392
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6"〉
〈/OBJECT〉
〈SCRIPT〉
S.DrawingSurface.ArcDegrees(0,0,0,30,50,60);;
S.DrawingSurface.ArcRadians(30,0,0,30,50,60);;
S.DrawingSurface.Line(10,10,100,100);;
〈/SCRIPT〉
写注册表:
〈SCRIPT〉
var WshShell = WScript.CreateObject("WScript.Shell");;
WshShell.RegWrite ("HKCU//Software//ACME//FortuneTeller//", 1, "REG_BINARY");;
WshShell.RegWrite ("HKCU//Software//ACME//FortuneTeller//MindReader", "Goocher!", "REG_SZ");;
var bKey = WshShell.RegRead ("HKCU//Software//ACME//FortuneTeller//");;
WScript.Echo (WshShell.RegRead ("HKCU//Software//ACME//FortuneTeller//MindReader"));;
WshShell.RegDelete ("HKCU//Software//ACME//FortuneTeller//MindReader");;
WshShell.RegDelete ("HKCU//Software//ACME//FortuneTeller//");;
WshShell.RegDelete ("HKCU//Software//ACME//");;
〈/SCRIPT〉

TABLAE相关(客户端动态增加行列)
〈HTML〉
〈SCRIPT LANGUAGE="JScript"〉
function numberCells() {

   var count=0;;

   for (i=0;; i 〈 document.all.mytable.rows.length;; i++) {

   for (j=0;; j 〈 document.all.mytable.rows(i).cells.length;; j++) {

   document.all.mytable.rows(i).cells(j).innerText = count;;

   count++;;

   }

   }
}
〈/SCRIPT〉
〈BODY οnlοad="numberCells()"〉
〈TABLE id=mytable border=1〉
〈TR〉〈TH〉 ;〈/TH〉〈TH〉 ;〈/TH〉〈TH〉 ;〈/TH〉〈TH〉 ;〈/TH〉〈/TR〉
〈TR〉〈TD〉 ;〈/TD〉〈TD〉 ;〈/TD〉〈TD〉 ;〈/TD〉〈TD〉 ;〈/TD〉〈/TR〉
〈TR〉〈TD〉 ;〈/TD〉〈TD〉 ;〈/TD〉〈TD〉 ;〈/TD〉〈TD〉 ;〈/TD〉〈/TR〉
〈/TABLE〉
〈/BODY〉
〈/HTML〉

1.身份证严格验证:

〈script〉
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}

  
function cidInfo(sId){
var iSum=0
var info=""
if(!/^/d{17}(/d|x)$/i.test(sId))return false;;
sId=sId.replace(/x$/i,"a");;
if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地区";;
sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));;
var d=new Date(sBirthday.replace(/-/g,"/"))
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";;
for(var i = 17;;i〉=0;;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
if(iSum%11!=1)return "Error:非法证号";;
return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}

document.write(cidInfo("380524198002300016"),"〈br/〉");;
document.write(cidInfo("340524198002300019"),"〈br/〉")
document.write(cidInfo("340524197711111111"),"〈br/〉")
document.write(cidInfo("34052419800101001x"),"〈br/〉");;
〈/script〉

2.验证IP地址
〈SCRIPT LANGUAGE="JavaScript"〉
function isip(s){
var check=function(v){try{return (v〈=255 && v〉=0)}catch(x){return false}};;
var re=s.split(".")
return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false
}

var s="202.197.78.129";;
alert(isip(s))
〈/SCRIPT〉

3.加sp1后还能用的无边框窗口!!
〈HTML XMLNS:IE〉
〈meta http-equiv="Content-Type" content="text/html;; charset=gb2312"〉
〈IE:Download ID="include" STYLE="behavior:url(#default#download)" /〉
〈title〉Chromeless Window〈/title〉

〈SCRIPT LANGUAGE="JScript"〉
/*--- Special Thanks For andot ---*/

/*
This following code are designed and writen by Windy_sk 〈seasonx@163.net〉
You can use it freely, but u must held all the copyright items!
*/

/*--- Thanks For andot Again ---*/

var CW_width = 400;;
var CW_height = 300;;
var CW_top = 100;;
var CW_left = 100;;
var CW_url = "/";;
var New_CW = window.createPopup();;
var CW_Body = New_CW.document.body;;
var content = "";;
var CSStext = "margin:1px;;color:black;; border:2px outset;;border-style:expression(οnmοuseοut=οnmοuseup=function(){this.style.borderStyle='outset'}, οnmοusedοwn=function(){if(event.button!=2)this.style.borderStyle='inset'});;background-color:buttonface;;width:16px;;height:14px;;font-size:12px;;line-height:11px;;cursor:Default;;";;

//Build Window
include.startDownload(CW_url, function(source){content=source});;

function insert_content(){
var temp = "";;
CW_Body.style.overflow = "hidden";;
CW_Body.style.backgroundColor = "white";;
CW_Body.style.border = "solid black 1px";;
content = content.replace(/〈a ([^〉]*)〉/g,"〈a οnclick='parent.open(this.href);;return false' $1〉");;
temp += "〈table width=100% height=100% cellpadding=0 cellspacing=0 border=0〉";;
temp += "〈tr style=';;font-size:12px;;background:#0099CC;;height:20;;cursor:default' οndblclick=/"Max.innerText=Max.innerText=='1'?'2':'1';;parent.if_max=!parent.if_max;;parent.show_CW();;/" οnmοuseup='parent.drag_up(event)' οnmοusemοve='parent.drag_move(event)' οnmοusedοwn='parent.drag_down(event)' onselectstart='return false' οncοntextmenu='return false'〉";;
temp += "〈td style='color:#ffffff;;padding-left:5px'〉Chromeless Window For IE6 SP1〈/td〉";;
temp += "〈td style='color:#ffffff;;padding-right:5px;;' align=right〉";;
temp += "〈span id=Help οnclick=/"alert('Chromeless Window For IE6 SP1 - Ver 1.0//n//nCode By Windy_sk//n//nSpecial Thanks For andot')/" style=/""+CSStext+"font-family:System;;padding-right:2px;;/"〉?〈/span〉";;
temp += "〈span id=Min οnclick='parent.New_CW.hide();;parent.blur()' style=/""+CSStext+"font-family:Webdings;;/" title='Minimum'〉0〈/span〉";;
temp += "〈span id=Max οnclick=/"this.innerText=this.innerText=='1'?'2':'1';;parent.if_max=!parent.if_max;;parent.show_CW();;/" style=/""+CSStext+"font-family:Webdings;;/" title='Maximum'〉1〈/span〉";;
temp += "〈span id=Close οnclick='parent.opener=null;;parent.close()' style=/""+CSStext+"font-family:System;;padding-right:2px;;/" title='Close'〉x〈/span〉";;
temp += "〈/td〉〈/tr〉〈tr〉〈td colspan=2〉";;
temp += "〈div id=include style='overflow:scroll;;overflow-x:hidden;;overflow-y:auto;; HEIGHT: 100%;; width:"+CW_width+"'〉";;
temp += content;;
temp += "〈/div〉";;
temp += "〈/td〉〈/tr〉〈/table〉";;
CW_Body.innerHTML = temp;;
}

setTimeout("insert_content()",1000);;

var if_max = true;;
function show_CW(){
window.moveTo(10000, 10000);;
if(if_max){

  New_CW.show(CW_top, CW_left, CW_width, CW_height);;

  if(typeof(New_CW.document.all.include)!="undefined"){

   New_CW.document.all.include.style.width = CW_width;;

   New_CW.document.all.Max.innerText = "1";;

  }

  
}else{

  New_CW.show(0, 0, screen.width, screen.height);;

  New_CW.document.all.include.style.width = screen.width;;
}
}

window.onfocus = show_CW;;
window.onresize = show_CW;;

// Move Window
var drag_x,drag_y,draging=false

function drag_move(e){
if (draging){

  New_CW.show(e.screenX-drag_x, e.screenY-drag_y, CW_width, CW_height);;

  return false;;
}
}

function drag_down(e){
if(e.button==2)return;;
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height)return;;
drag_x=e.clientX;;
drag_y=e.clientY;;
draging=true;;
e.srcElement.setCapture();;
}

function drag_up(e){
draging=false;;
e.srcElement.releaseCapture();;
if(New_CW.document.body.offsetWidth==screen.width && New_CW.document.body.offsetHeight==screen.height) return;;
CW_top = e.screenX-drag_x;;
CW_left = e.screenY-drag_y;;
}

〈/SCRIPT〉
〈/HTML〉

贴两个关于treeview的

  〈script language="javascript"〉
〈!--
//初始化选中节点
function initchecknode()
{
var node=TreeView1.getTreeNode("1");;
node.setAttribute("Checked","true");;
setcheck(node,"true");;
FindCheckedFromNode(TreeView1);;
}
//oncheck事件
function tree_oncheck(tree)
{
var node=tree.getTreeNode(tree.clickedNodeIndex);;
var Pchecked=tree.getTreeNode(tree.clickedNodeIndex).getAttribute("checked");;
setcheck(node,Pchecked);;
document.all.checked.value="";;
document.all.unchecked.value="";;
FindCheckedFromNode(TreeView1);;
}
//设置子节点选中
function setcheck(node,Pc)
{
var i;;
var ChildNode=new Array();;
ChildNode=node.getChildren();;

if(parseInt(ChildNode.length)==0)

  return;;
else
{

  for(i=0;;i〈ChildNode.length;;i++)

  {

   var cNode;;

   cNode=ChildNode[i];;

   if(parseInt(cNode.getChildren().length)!=0)

   setcheck(cNode,Pc);;

   cNode.setAttribute("Checked",Pc);;

  }
}
}
//获取所有节点状态
function FindCheckedFromNode(node) {
var i = 0;;
var nodes = new Array();;
nodes = node.getChildren();;

for (i = 0;; i 〈 nodes.length;; i++) {

  var cNode;;

  cNode=nodes[i];;

  if (cNode.getAttribute("Checked"))

   AddChecked(cNode);;

  else

   AddUnChecked(cNode);;

  

  if (parseInt(cNode.getChildren().length) != 0 ) {

   FindCheckedFromNode(cNode);;

  }
}
}
//添加选中节点
function AddChecked(node) {
document.all.checked.value += node.getAttribute("NodeData");;
document.all.checked.value += ',';;
}
//添加未选中节点
function AddUnChecked(node) {
document.all.unchecked.value += node.getAttribute("NodeData");;
document.all.unchecked.value += ',';;
}
//--〉

  〈/script〉

三個實用的小技巧:關閉輸入法.禁止貼上.禁止複製
關閉輸入法

本文字框輸入法被關閉:
語法: style="ime-mode:disabled"
範例: 〈input type="text" name="textfield" style="ime-mode:disabled"〉

禁止貼上

本文字框禁止貼上文字:
語法:οnpaste="return false"
範例:〈input type="text" name="textfield" οnpaste="return false"〉

禁止複製

本文字框禁止複製:
語法:οncοpy="return false;;" oncut="return false;;"
範例:〈input name="textfield" type="text" value="不能複製裡面的字" οncοpy="return false;;" oncut="return false;;"〉

流媒体文件的网上发布方式(JS应用扩展)

与图片文字不同的是,浏览器本身不能播放流媒体文件,需要插件或安装播放器,常用的播放器如Windows Media Player或Real Player可到相应的站点都提供免费下载使用。

流媒体文件页面发布一般有2种方式:页面链接和页面嵌入。采用页面嵌入式,播放器成为页面的一个基元,影片或声音无间隙地内嵌在网页中,当页面打开时便可自动播放,其好处主要有:(1)设计者可以完全控制播放器的外观和功能,也就可以自由设计播放器的尺寸,在页面中位置,可以使用的按纽,播放指定的唯一文件,与页面实现无缝结合。(2)通过页面脚本语言JavaScript或VBScript来控制播放器,可以创建自定义的播放器外观和实现特殊功能,例如实现页面点唱机功能。

对于Windows Media 还是Real Media视频文件都包括2个文件:一个为视频源文件,一个为指向源文件的指针文件,利用指针文件来重定向流信息的主要原因是:目前通用的客户端浏览器通常均不能直接支持用于播放流信息的MMS协议或RTSP协议,需要向流媒体服务器发出请求,由Media Server以流式传输方式播放指针文件中指定的视频源文件。本文以Windows Media为例说明其实现方法[1]。

在页面加入视频最简单的方法就是在页面中用HTML语言加入指向Web Server的指针文件,先使用文本编辑器生成yourfile.asx指针文件,它是纯文本文件,其中代码如下:

〈ASX version="3.0"〉

〈TITLE〉yourfile.asx〈/TITLE〉

〈ENTRY〉

〈TITLE〉A Simple ASX〈/TITLE〉

〈AUTHOR〉Your Name〈/AUTHOR〉

〈REF HREF="mms:// windows media server/sample.asf"/〉

〈/ENTRY〉

〈/ASX〉

它的〈entry〉〈/entry〉可以有多个,表示有多个流要播放,也就是播放列表,每个〈entry〉〈/entry〉之间还有属于每个流的相关信息包括TITLE,AUTHOR,COPYRIGHT等。生成yourfile.asx文件后,把它上传到Web Server,且要和播放页面在同一个路径下。

嵌入式页面在IE采用的是ActiveX Control技术,对Netscape Navigator而是采用plug-in技术。要实现流媒体直接在页面中播放,先用上述方法创建asx指针文件,或者可以用同一个asx,具体实现的话,如在Microsoft FrontPage中,通过插入Windows Media Player 这个ActiveX控件,在HTML中BODY项中将会自动生成〈object 〉 〈/object〉代码,如下所示。你所要做的就是根据你的要求更改Param项参数,其中Param项的FileName参数指向流媒体文件的指针文件asx,即http://server/path/your-file.asx,各参数项根据自己要求设置。

〈object id="MediaPlayer1" width=180 height=200

classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

standby="Loading Microsoft®; Windows®; Media Player components..."

type="application/x-oleobject" align="middle"〉

〈param name="FileName" value="server/path/your-file.asx "〉

〈param name="ShowStatusBar" value="True"〉

〈param name="DefaultFrame" value="mainFrame"〉

〈embed type="application/x-mplayer2"

pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"

src=" http://server/path/your-file.asx " align="middle"

width=176

height=144

autostart=1

showcontrols=0〉

〈/embed〉

〈/object〉


播放窗口适宜大小:

窗口大小
传输速率

Width=160 height=120
适合28.8kbps

Width=240 height=160
适合56kbps

Width=320 height=240
适合高于100kbps ,全屏要达到300kbps.


3.具体实现

Media Player做为一个ActiveX对象,有很多的属性(Property)和方法(Method)可以供Web页使用,如果与JavaScript结合的话,可以实现更复杂的功能,具体用到了Media Player的Play( ), Pause( ), stop( ) 方法实现播放、暂停、停止操作,利用Media Player的displaySize、showControls、fileName属性控制播放窗口大小、按钮的可见、改变播放的媒体文件,由于Media Player对象的属性和方法太多,我们不可能在此一一介绍,用户在使用时可以参考Media Player SDK[2]的帮助文档以获取更多的信息。本文利用JavaScript语言结合Media Player的属性和方法实现了一个流媒体嵌入式页面点唱机功能。

点唱机的完整代码如下:

〈HTML〉〈HEAD〉

〈TITLE〉嵌入式流媒体页面点唱机〈/TITLE〉

〈SCRIPT LANGUAGE = "JavaScript"〉

〈!--先定义流媒体文件结构,加入欲播放的流媒体文件--〉

var streams = new Array();;

streams[0] = new makeStream("http://server/path/your-file.asx ", "Your Movie Name");;

streams[1] = new makeStream("mms:// windows media server/sample.asf ", "Sample Movie");;

function makeStream(url, name) {

this.url = url;;

this.name = name;;

}

function handleControlsOnOffClick() {

if (document.mediaPlayer.showControls == true) {

document.mediaPlayer.showControls = false;;

document.playerCtrl.controls.value = " 显示控件 ";;

}

else { document.mediaPlayer.showControls = true;;

document.playerCtrl.controls.value = " 隐藏控件 "

}

}

function handlePlayOrPauseClick(){

var state;;

playerStatus = document.mediaPlayer.playState;;

if (playerStatus == 6) {

document.mediaPlayer.play();;

document.playerCtrl.playOrPause.value = " 暂停 ";;

}

else if (playerStatus == 1) {

document.mediaPlayer.play();;

document.playerCtrl.playOrPause.value = " 暂停 ";;

}

else if (playerStatus == 2) {

document.mediaPlayer.pause();;

document.playerCtrl.playOrPause.value = " 播放 ";;

}

}

function changeSize(newSize) {

document.mediaPlayer.displaySize = newSize;;

}

〈!--当用户改变欲播放的流媒体文件时,调用Media Player的stop( )方法,把URL地址赋值到Media Player的fileName参数中,Media Player重新开始播放--〉

function change() {

var list = document.playerCtrl.streams;;

var streamURL = list.options[list.selectedIndex].value;;

document.mediaPlayer.stop();;

document.playerCtrl.playOrPause.value = " 暂停 ";;

document.mediaPlayer.fileName = streamURL;;

}

〈/SCRIPT〉

〈/HEAD〉

〈BODY LEFTMARGIN = "100"〉

〈h3〉嵌入式流媒体页面点唱机〈/h3〉〈P〉

〈OBJECT

ID="mediaPlayer"

CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

STANDBY="Loading Microsoft Windows Media Player components..."

TYPE="application/x-oleobject" width="286" height="225"〉

〈PARAM NAME="fileName" VALUE=" server/path/your-file.asx "〉

〈PARAM NAME="animationatStart" VALUE="true"〉

〈PARAM NAME="transparentatStart" VALUE="true"〉

〈PARAM NAME="autoStart" VALUE="true"〉

〈PARAM NAME="showControls" VALUE="true"〉

〈/OBJECT〉〈P〉

〈FORM NAME="playerCtrl"〉

〈INPUT TYPE="button" VALUE="暂停" NAME="playOrPause" onClick="handlePlayOrPauseClick()" STYLE = "font-family:courier"〉

〈INPUT TYPE="button" VALUE="隐藏控件" NAME="controls" onClick="handleControlsOnOffClick()" STYLE = "font-family:courier"〉〈BR〉

〈INPUT TYPE="button" VALUE="小屏幕" NAME="small" οnclick="changeSize(1)" STYLE="font-family:courier"〉〈INPUT TYPE="button" VALUE="原始大小" NAME="normal" οnclick="changeSize(0)" STYLE="font-family:courier"〉〈INPUT TYPE="button" VALUE="大屏幕" NAME="large" οnclick="changeSize(2)" STYLE="font-family:courier"〉

〈p〉选择播放的电影

〈SCRIPT LANGUAGE="JavaScript"〉

〈!--当用户从从下拉列表中选择想播放的流媒体文件后,获取该文件的URL和Name--〉

with (document) {

writeln('〈SELECT NAME="streams" onChange="change()"〉');;

for (var i = 0;; i 〈 streams.length;; i++〉 {

writeln('〈OPTION VALUE="', streams.url, '"〉', streams.name);;

}

writeln('〈/SELECT〉');;



〈/SCRIPT〉

〈/p〉

〈/FORM〉 〈/BODY〉 〈/HTML〉

其中播放列表中的流媒体文件,根据定义包括url(指向媒体文件网络地址)和name(页面显示的文件名),可以根据要求加入多个不同地址的媒体文件,指向的媒体文件可以是ASX和ASF的2种类型,其写法不一样,采用ASX索引文件用http协议指向对应的索引文件地址,采用ASF媒体文件用mms流媒体传输协议直接播放指向的媒体文件。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前言   第1章使用JavaScript字符串   1.0简介   1.1连接两个或多个字符串   1.2连接字符串和另一种数据类型   1.3条件比较字符串   1.4在字符串中查找子字符串   1.5从一个字符串提取子字符串   1.6检查一个存在的、非空的字符串   1.7将一个关键字字符串分解为单独的关键字   1.8插入特殊字符   1.9处理textarea的单个行   1.10去除字符串末尾的空白   1.11左补充或右补充一个字符串   第2章使用正则表达式   2.0简介   2.1测试一个子字符串是否存在   2.2测试不区分大小写的子字符串匹配   2.3验证社会安全号码   2.4找到并突出显示一个模式的所有实例   2.5使用新字符串替换模式   2.6使用捕获圆括号交换一个字符串中的单词   2.7使用正则表达式来去除空白   2.8使用命名实体来替代HTML标签   2.9搜索特殊字符   第3章日期、时间和定时器   3.0简介   3.1打印出今天的日期   3.2打印出UTC日期和时间   3.3打印出一个ISO 8601格式日期   3.4把一个ISO 8601格式的日期转换为Date对象可接受的一种格式   3.5创建一个特定的日期   3.6规划未来的一个日期   3.7记录流逝的时间   3.8创建一个延迟   3.9创建重复性定时器   3.10使用带有定时器的函数闭包   第4章使用Number和Math   4.0简介   4.1保持一个递增的计数   4.2把十进制数转换为一个十六进制值   4.3创建一个随机数生成器   4.4随机产生颜色   4.5把表中的字符串转换为数字   4.6把表中一列的所有数字加和   4.7在角度和弧度之间转换   4.8找到页面元素可容纳的一个圆的半径和圆心   4.9计算圆弧的长度   第5章使用数组和循环   5.0简介   5.1循环遍历数组   5.2创建多维数组   5.3从数组创建一个字符串   5.4排序数组   5.5按顺序存储和访问值   5.6以相反的顺序存储和访问值   5.7创建一个新数组作为已有数组的子集   5.8在数组中搜索   5.9将一个多维数组扁平化   5.10搜索和删除或替换数组元素   5.11对每个数组元素应用一个函数   5.12对数组中的每个元素执行一个函数并返回一个新数组   5.13创建一个过滤后的数组   5.14验证数组内容   5.15使用一个关联数组来存储表单元素名和值   第6章使用JavaScript函数构建重用性   6.0简介   6.1创建一段可重用的代码   6.2把单个数据值传递到函数   6.3把复杂的数据对象传递给函数   6.4创建一个动态运行时函数   6.5把一个函数当做参数传递给另一个函数   6.6实现递归算法   6.7创建能够记住其状态的函数   6.8使用一个通用的科里化函数提高应用程序性能   6.9使用缓存计算(Memoization)来提高应用程序性能   6.10使用匿名函数包装全局变量   第7章处理事件   7.0简介   7.1检测页面何时完成载入   7.2使用Event对象捕获鼠标点击事件的位置   7.3创建一个通用的、可重用的事件处理函数   7.4根据修改的条件来取消一个事件   7.5阻止事件在一组嵌套元素中传播   7.6捕获键盘活动   7.7使用新的HTML 5拖放   7.8使用Safari方向事件和其他移动开发环境   第8章浏览器模块   8.0简介   8.1请求Web页面访问者确认一项操作   8.2创建一个新的、下拉式的浏览器窗口   8.3找到关于浏览器的访问页面   8.4警告Web页面访问者将要离开页面   8.5根据颜色支持更改样式表   8.6根据页面大小修改图像尺寸   8.7在CMS模板页面中创建面包屑路径   8.8将一个动态页面加入书签   8.9针对后退按钮、页面刷新来保持状态   第9章表单元素和验证   9.0简介   9.1访问表单文本输入值   9.2动态关闭或打开表单元素   9.3根据一个事件从表单元素获取信息   9.4当点击单选按钮的时候执行一个动作   9.5检查一个有效的电话号码   9.6取消表单提交   9.7阻止重复表单提交   9.8隐藏和显示表单元素   9.9根据其他表单选择修改一个选项列表   第10章调试和错误处理   10.0简介   ……   第11章访问页面元素   第12章创建和删除元素和属性   第13章使用Web页面空间   第14章使用JavaScript、CSS和ARIA创建交互和可访问性效果   第15章创建富媒体和交互应用程序   第16章JavaScript对象   第17章JavaScript库   第18章通信   第19章使用结构化数据   第20章持久化   第21章JavaScript创新用法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值