html小技巧

2016-02-19 17:42 7 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐html小技巧,无聊中的都看过来。

【 tulaoshi.com - 编程语言 】


  一.用javascript在网页上实现树状伸缩目录:
  
  1.建立空文件index.htm,在同目录下建立子目录images,在images之下有文件
  folder_close.gif(有子项的目录关闭时的图标)
  folder_open.gif(有子项的目录打开时的图标)
  folder_link.gif(没有子项的文件,只有链接的文件的图标)
  
  2.在head/head之间加上
  
  style
  !--
  #foldheader{cursor:hand ;color:#0000ff;list-style-image:url(images/folder_close.gif)}
  #foldinglist{list-style-image:url(images/folder_link.gif)}
  //--
  /style
  script language="JavaScript1.2"
  !--
  function change()
  {
  if(!document.all)
  return
  if (event.srcElement.id=="foldheader")
  {
  var srcIndex = event.srcElement.sourceIndex
  var nested = document.all[srcIndex+1]
  if (nested.style.display=="none")
  {
  nested.style.display=''
  event.srcElement.style.listStyleImage="url(images/folder_open.gif)"
  }
  else
  {
  nested.style.display="none"
  event.srcElement.style.listStyleImage="url(images/folder_close.gif)"
  }
  }
  }
  document.onclick=change
  //--
  /script
  
  3.在body之后加上如下代码:
  
  li id="foldheader"项目列表/li
  ul id="foldinglist" style="display:none"
   lia href="personalbox.htm"个人邮箱/a/li
   lia href="companybox.htm"企业邮箱/a/li
  /ul
  
  在IE中看index.htm的效果
  
  
  二.用javascript实现刷新:
  script
   parent.frames(1).location=parent.frames(1).location;
  /script
  
  
  三.用javasript判定网页中输入框填入项的状态:
  
  1.判定填入项中是否有某个字符或者串:
   if(document.AddForm.mail.value.indexOf("@",1) 0)
   {alert("Email输入格式不对!");return false;}
  
   indexOf这个函数的第一个参数是需要包含的字符或者串,第二个参数是从第几个
   字符开始判定(第一个字符的index为0)
   若未找到匹配的函数的返回值为-1,若找到匹配的则返回一个整数为子字符串的开始位置
  
  2.判定填入项是否为整数:
   //先将填入项转化为整数
   var integer = parseInt(document.AddForm.number.value);
   //先判定是否装化为数,然后判定是否全部为数
   if (isNaN(integer)integer.toString().length != document.AddForm.number.value.length)
   {alert("公司分机输入错误!");return false;}
  
  3.假如对输入的电话号码,限制只能是输入数字和()-+四个字符,这里要检查填入项的有效性:
  
  在head.../head之间加入如下代码:
  script LANGUAGE="javascript"
  !--
  function check()
  {
  if (document.form.phone.value=="")
  
   {
  alert("請输入电话号码!");
  document.form.tell.focus();
  return false;
  }
  else
  {
  var Letters = "0123456789()+-";
  for (i=0; i document.form.phone.value.length; i++)
  {
  var CheckChar = document.form.phone.value.charAt(i);
  if (Letters.indexOf(CheckChar) == -1)
  {
   alert("电话号码格式不正确!");
   document.form.phone.focus();
   return false;
  }
  }
  }
  }
  //--
  /script
  
  在body.../body之间的表单.
  form method="POST" name=form action="" onSubmit="return check();"
  p align="center"请输入电话号码:
  input type="text" name="phone" size="20"
  input type="submit" value="提交" name="B1"
  /p
  /form
  
  
  
  四.用javasript单一表单的多个递交方案:
  我们往往需要在同一个表单的Form域中将递交的内容分别交给不同的脚本去处理。
  下面的代码演示了:按下"submit 1"表单由cgi1.pl去处理,按下"submit 2 "表单由cgi2.pl去处理。
  
  Html
  head
  script
  function submitit1()
  {
  document.myForm.action = "http://www.site.com/cgi-bin/cgi1.pl"
  document.myForm.submit();
  }
  function submitit2()
  {
  document.myForm.action = "http://www.site.com/cgi-bin/cgi2.pl"
  document.myForm.submit();
  }
  /script
  /head
  
  body
  form name="myForm" METHOD=POST
  username:input type=text name=text1
  passWord:input type=password name=text2
  input type=button value="Submit 1" onClick="submitit1()"
  input type=button value="Submit 2" onClick="submitit2()"
  /form
  /body
  /html

来源:http://www.tulaoshi.com/n/20160219/1615857.html

延伸阅读
标签: Web开发
帧窗口是一种复杂的页面技术,应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容,可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果。实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口。每个窗口都对应有自己的HTML页面,按照一定的组合方式组合在一起,以实现特殊的效果。 在HTML中用frameset(...
标签: Web开发
今天做东东的时候要用js创建html元素然后动态给该元素添加方法,走了不少弯路。最后把解决方法发布,让大家以后少走弯路。 js文件 function CheckNull(id) {      //DoSomeThing    } var CheckNewNull= function(id) {     return function(){        ...
  插入表格,如何使表格緊貼網頁的上面邊緣,不留空位? 在页面的风格设定内加入下面的定义     <STYLE TYPE="text/css"       BODY {margin: 0px}     </STYLE   又或者在BODY中直接加入     <BODY STYLE="margin: 0px...
标签: Web开发
html: 代码如下: !DOCTYPE html html lang="en" head meta charset="utf-8" !-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -- meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" titleHTML5 Timer for work-relax balance/title meta na...
标签: Web开发
同一个元素被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,优先权问题是一个冲突解决的问题。     首先就是CSS规则的specificity(特殊性),CSS2.1有一套关于specificity的计算方式,用一个四位的数字串(CSS2是三位)来表示,最终specificity越高的规则越特殊,在优先级判定时也就越有优势。关于specificity的具体计算在...

经验教程

165

收藏

79
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部