js实现动态IE标题栏效果

以前经常玩的把戏,现在用的不多了,通过本代码你会了解一下JavaScript对象交换的知识,挺简单的,有空的时候根据此可以写出不少JS功能来。
<script language=”JavaScript”>
var n=0;
function title(){
 n++;
    if (n==3) {n=1}
    if (n==1) {document.title=’☆★IT中国★☆’}
    if (n==2) {document.title=’★☆IT中国☆★’}
    setTimeout(“title()”,1000);
}
title();
</script>

上下翻滚JS特效代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>建站代码-上下翻滚JS</title>

</head>

<body>
<div id="adsfar" style="background:#FF0000">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td bgcolor="#FFFFFF">11111111111111111</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">22222222222222222</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">33333333333333333</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">44444444444444444444444444</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">55555555555555555555555</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">66666666666666666666666666666</td>
    </tr>
</table>
</div>
<script type="text/javascript">
marque(400,28,"adsfar")
var scrollId;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
function marque(width,height,marqueId,marqueTagName){
   try{
      marqueesHeight = height;
      stopscroll     = false;

      scrollId = document.getElementById(marqueId);
      with(scrollId){
       style.width     = width + "px";
       style.height    = marqueesHeight + "px";
       style.overflow = ‘hidden’;
       noWrap          = true;
      }

      scrollId.onmouseover = new Function(‘stopscroll = true’);
      scrollId.onmouseout = new Function(‘stopscroll = false’);

      preTop     = 0;
      currentTop = 0;
      stoptime   = 0;
      alert( scrollId.scrollHeight);
      if(height < scrollId.scrollHeight){
          leftElem = document.getElementById(marqueId);
          //alert(leftElem.cloneNode(true));
          scrollId.appendChild(leftElem.cloneNode(true)); //cloneNode(true) 如果这个布尔参数设置为 true,被克隆的节点会复制原始节点的所有子节点。
           
          init_srolltext();
      }
   }catch(e) {}
}

function init_srolltext(){
scrollId.scrollTop = 0;
setInterval(‘scrollUp()’, 18);
}

function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == marqueesHeight+1) {
    stoptime += 1;
    currentTop -= 1;
    if(stoptime == (marqueesHeight)*1) {//??
      currentTop = 0;
      stoptime = 0;
    }
}else{

    preTop = scrollId.scrollTop;    //网页被卷去的高
   //alert(preTop);
    scrollId.scrollTop += 1;
    if(preTop == scrollId.scrollTop){
      scrollId.scrollTop = marqueesHeight;
      scrollId.scrollTop += 1;
    }
}
}
</script>

</body>
</html>

八款JS框架介绍及比较

Dojo
    Dojo 是目前最为强大的JS框架,它在自己的 Wiki 上给自己下了一个定义,Dojo 是一个用 JavaScript 编写的开源的DHTML工具箱。Dojo 很想做一个“大一统”的工具箱,不仅仅是浏览器层面的,野心还是很大的。Dojo 包括 Ajax、Browser、Event、Widget 等跨浏览器 API,包括了 JS 本身的语言扩展,以及各个方面的工具类库,和比较完善的 UI 组件库,也被广泛应用在很多项目中,他的 UI 组件的特点是通过给 HTML 标签增加 TAG 的方式进行扩展,而不是通过写 JS 来生成,Dojo 的 API 模仿 Java 类库的组织方式。用 Dojo 写 Web OS 可谓非常方便。Dojo 现在已经 4.0 了,Dojo 强大的地方在于界面和特效的封装,可以让开发者快速构建一些兼容标准的界面。
    优点:库相当完善,发展时间也比较长,功能强大,据说利用 Dojo 的 io.bind() 可以实现 comet 看见其功能强大非一般,得到 IBM 和 SUN 的支持。
    缺点:文件体积比较大,200多KB,初次下载相当慢,此外,Dojo 的类库使用显得不是那么易用,JS语法增强方面不如 Prototype

 

Prototype
    它是一个非常优雅的 JS 库,定义了 JS 的面向对象扩展,DOM 操作API,事件等等,以 Prototype 为核心,形成了一个外围的各种各样的 JS 扩展库,是相当有前途的 JS 底层框架,值得推荐,感觉也是现实中应用最广的库类(RoR 集成的 AJAX JS 库),之上还有 Scriptaculous 实现一些JS组件功能和效果。
    优点:基本底层,易学易用,甚至是其他一些js特效开发包的底层,体积算是最小的了。
    缺点:如果说缺点,可能就是功能是他的弱项

 

dScriptaculous
    Scriptaculous 是基于prototype.js 框架的 JS 效果。包含了 6 个 js 文件,不同的文件对应不同的 js 效果,所以说,如果底层用 prototype 的话,做js效果用 Scriptaculous 那是再合适不过的了,连大名鼎鼎的 digg 都在用他,可见不一般
    优点:基于prototype 是最大的优点,由于使用 prototype 的广泛性,无疑对用户书锦上添花。
    缺点:刚刚兴起,需要时间的磨练

 

Yui-ext
    基于 Yahoo UI 的扩展包 yui-ext 是具有 CS 风格的 Web 用户界面组件,能实现复杂的 Layout 布局,界面效果可以和 backbase 媲美,而且使用纯 javascript 代码开发。真正的可编辑的表格 Edit Grid,支持 XML 和 Json 数据类型,直接可以迁入 Grid。许多组件实现了对数据源的支持,例如动态的布局,可编辑的表格控件,动态加载的 Tree 控件、动态拖拽效果等等。从 1.0 beta 版开始同 Jquery 合作,推出基于 jQuery 的 Ext 1.0,提供了更多有趣的功能。
    优点:结构化,类似于 java 的结构,清晰明了,底层用到了 Jquery 的一些函数,使整合使用有了选择,最重要的一点是界面太让让人震撼了。
    缺点:太过复杂,整个界面的构造过于复杂。

 

Jquery
    JQuery 是一款同 prototype 一样优秀 js 开发库类,特别是对 css 和 XPath 的支持,使我们写 js 变得更加方便!如果你不是个 js 高手又想写出优秀的 js 效果,那么 JQuery 可以帮你达到目的!并且简介的语法和高的效率一直是jQuery追求的目标。
优点:注重简介和高效,js 效果有 yui-ext 的选择,因为 yui-ext 重用了很多 jQuery 的函数
    缺点:据说太嫩,历史不悠久。

 

Mochikit
    MochiKit 自称为一个轻量级的 js 框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发,另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便,能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的,如果与 MochiKit 和 Ajax 结合在一起,使用 XHTML 包装的微格式尤其方便。Mochikit 可以直接对字符串或者数字格式化输出,比较实用和方便。它还有自己的 js 代码解释器
    优点:MochiKit.DOM 这部分很实用,简介也是很突出的
    缺点:轻量级的缺点

 

Mootools
    MooTools 是一个简洁,模块化,面向对象的 JavaScript 框架。它能够帮助你更快,更简单地编写可扩展和兼容性强的 JavaScript 代码。Mootools 跟 prototypejs 相类似,语法几乎一样。但它提供的功能要比 prototypejs 多,而且更强大。比如增加了动画特效、拖放操作等等。
    优点:可以定制自己所需要的功能,可以说是 prototypejs 的增强版。
    缺点:不大不小,具体应用具体分析。

 

Moo.fx
    Moo.fx是 一个超级轻量级的 javascript 特效库(7k),能够与 prototype.js 或mootools 框架一起使用。它非常快、易于使用、跨浏览器、符合标准,提供控制和修改任何 HTML 元素的 CSS 属性,包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计,所以可以在它的基础上开发你需要的任何特效。
    优点:小块头有大能耐
    缺点:这么小了,已经不错了

走动的时间JS代码

<strong><font color="#000000">
<Script language="JavaScript">
var enabled = 0; today = new Date();
var day; var date;
if(today.getDay()==0) day = "星期日 "
if(today.getDay()==1) day = "星期一 "
if(today.getDay()==2) day = "星期二 "
if(today.getDay()==3) day = "星期三 "
if(today.getDay()==4) day = "星期四 "
if(today.getDay()==5) day = "星期五 "
if(today.getDay()==6) day = "星期六 "
document.fgColor = " FF0072";
date1 =(today.getFullYear()) + "年" + (today.getMonth() + 1 ) + "月" + today.getDate() + "日 " ;
date2 = day ;
document.write(date1+"&nbsp;");
document.write(date2+"&nbsp;");
document.write("<span id=’clock’></span>&nbsp;");
var now,hours,minutes,seconds,timeValue;
function showtime(){
now = new Date();
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
timeValue = (hours >= 12) ? " " : " ";
timeValue += hours+ ":";
timeValue += ((minutes < 10) ? "0" : "") + minutes + ":";
timeValue += ((seconds < 10) ? "0" : "") + seconds + "";
clock.innerHTML = timeValue;
setTimeout("showtime()",100);
}
showtime();
</Script>
</font></strong>

JS屏蔽功能类(屏蔽F5,退格键,空格键……)

1.屏蔽功能类

1.1 屏蔽键盘所有键
<script language="javascript">
<!--
function document.onkeydown(){
event.keyCode = 0;
event.returnvalue = false;
}
-->
</script>

1.2 屏蔽鼠标右键

在body标签里加上oncontextmenu=self.event.returnvalue=false

或者

<script language="javascript">
<!--
function document.oncontextmenu() 

return false; 

-->
</script>

function nocontextmenu()

if(document.all) {
event.cancelBubble=true;
event.returnvalue=false; 
return false; 
}
}

或者

<body onmousedown="rclick()" oncontextmenu= "nocontextmenu()">

<script language="javascript">
<!--
function rclick()
{
if(document.all) {
if (event.button == 2){
event.returnvalue=false;
}
}
}
-->
</script>

1.3 屏蔽 Ctrl+N、Shift+F10、F5刷新、退格键

<script language="javascript">
<!--
//屏蔽鼠标右键、Ctrl+N、Shift+F10、F5刷新、退格键
function window.onhelp(){return false} //屏蔽F1帮助
function KeyDown(){
if ((window.event.altKey)&&
((window.event.keyCode==37)|| //屏蔽 Alt+ 方向键 ←
(window.event.keyCode==39))){ //屏蔽 Alt+ 方向键 →
alert("不准你使用ALT+方向键前进或后退网页!");
event.returnvalue=false;
}

/* 注:这还不是真正地屏蔽 Alt+ 方向键,
因为 Alt+ 方向键弹出警告框时,按住 Alt 键不放,
用鼠标点掉警告框,这种屏蔽方法就失效了。以后若
有哪位高手有真正屏蔽 Alt 键的方法,请告知。*/

if ((event.keyCode == 8) && 
(event.srcElement.type != "text" && 
event.srcElement.type != "textarea" && 
event.srcElement.type != "password") || //屏蔽退格删除键 
(event.keyCode ==116)|| //屏蔽 F5 刷新键
(event.ctrlKey && event.keyCode==82)){ //Ctrl + R
event.keyCode=0;
event.returnvalue=false;
}
if ((event.ctrlKey)&&(event.keyCode==78)) //屏蔽 Ctrl+n
event.returnvalue=false;
if ((event.shiftKey)&&(event.keyCode==121)) //屏蔽 shift+F10
event.returnvalue=false;
if (window.event.srcElement.tagName == "A" && window.event.shiftKey) 
window.event.returnvalue = false; //屏蔽 shift 加鼠标左键新开一网页
if ((window.event.altKey)&&(window.event.keyCode==115)){ //屏蔽Alt+F4
window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
return false;}
}
/* 另外可以用 window.open 的方法屏蔽 IE 的所有菜单
第一种方法:
window.open("你的.htm", "","toolbar=no,location=no,directories= no,menubar=no,scrollbars=no,resizable=yes,status=no,top=0,left=0")
第二种方法是打开一个全屏的页面:
window.open("你的.asp", "", "fullscreen=yes")
*/
//-->
</script>

1.4屏蔽浏览器右上角“最小化”“最大化”“关闭”键

<script language=javascript>
function window.onbeforeunload()
{
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
window.event.returnvalue = "";
}
}
</script>

或者使用全屏打开页面

<script language="javascript">
<!--
window.open(www.32pic.com,"32pic","fullscreen=3,height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
-->
</script>

注:在body标签里加上onbeforeunload="javascript:return false"(使不能关闭窗口)

1.5屏蔽F5键

<script language="javascript">
<!--
function document.onkeydown() 

if ( event.keyCode==116) 

event.keyCode = 0; 
event.cancelBubble = true; 
return false; 
}
}
-->
</script>

1.6屏蔽IE后退按钮

在你链接的时候用 <a href="javascript:location.replace(url)">

1.7屏蔽主窗口滚动条

在body标签里加上 style="overflow-y:hidden"

1.8 屏蔽拷屏,不断地清空剪贴板

在body标签里加上onload="setInterval('clipboardData.setData(\'Text\',\'\')',100)"

1.9 屏蔽网站的打印功能

<style>
@media print {
* { display: none }
}
</style>

1.10 屏蔽IE6.0 图片上自动出现的保存图标

方法一:
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
方法二:
<img galleryimg="no">

1.11 屏蔽页中所有的script

<noscrript></noscript>

2.表单提交验证类

2.1 表单项不能为空

<script language="javascript">
<!--
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert("请输入您姓名!");
document.form.name.focus();
return false;
}
return true;
}
-->
</script>

2.2 比较两个表单项的值是否相同

<script language="javascript">
<!--
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert("您两次输入的密码不一样!请重新输入.");
document.ADDUser.PWD.focus();
return false;
}
return true;
}
-->
</script>

2.3 表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等

<script language="javascript">
<!--
function isNumber(String)

var Letters = "1234567890-"; //可以自己增加可输入值
var i;
var c;
if(String.charAt( 0 )=='-')
return false;
if( String.charAt( String.length - 1 ) == '-' )
return false;
for( i = 0; i < String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert("您的电话号码不合法!");
document.form.TEL.focus();
return false;
}
return true;
}
-->
</script>

2.4 表单项输入数值/长度限定

<script language="javascript">
<!--
function CheckForm() 
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert("输入数值不能小于零大于100!");
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length<10)
{
alert("输入文字小于10!");
document.form.MESSAGE.focus();
return false;
}
return true;
}
//-->
</script>

2.5 中文/英文/数字/邮件地址合法性判断

<SCRIPT LANGUAGE="javascript">
<!--

function isEnglish(name) //英文值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}

function isChinese(name) //中文值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}

function isMail(name) // E-mail值检测
{
if(! isEnglish(name))
return false;
i = name.indexOf("@");
j = name.lastIndexOf("@");
if(i == -1)
return false;
if(i != j)
return false;
if(i == name.length)
return false;
return true;
}

function isNumber(name) //数值检测
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < "0" || name.charAt(i) > "9")
return false;
}
return true;
}

function CheckForm()
{
if(! isMail(form.Email.value)) {
alert("您的电子邮件不合法!");
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) {
alert("英文名不合法!");
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) {
alert("中文名不合法!");
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) {
alert("邮政编码不合法!");
form.PublicZipCode.focus();
return false;
}
return true;
}
//-->
</SCRIPT>

2.6 限定表单项不能输入的字符

<script language="javascript">
<!--

function contain(str,charset)// 字符串包含测试函数
{
var i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return true;
return false;
}

function CheckForm()
{
if ((contain(document.form.NAME.value, "%\(\)><")) || (contain(document.form.MESSAGE.value, "%\(\)><")))
{
alert("输入了非法字符");
document.form.NAME.focus();
return false;
}
return true;
}
//-->
</script> 

html css js php 注释

HTML 注释 <!–This is a comment–>

CSS注释以"/*" 开头,以"*/" 结尾,如下:
/* 定义段落样式表 */
p{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial; /* 字体为arial */}

JavaScript 注释可用于增强代码的可读性。
第一:单行的注释以 // 开始。举例如下:

<script type="text/javascript">
// 这行代码输出标题:
document.write("<h1>文章标题</h1>");
// 这行代码输出段落:
document.write("<p>我的未来不是梦!</p>");
</script>

第二:多行注释以 /* 开头,以 */ 结尾。举例如下:

<script type="text/javascript">
/*
下面的代码将输出
一个标题和一个个段落
*/

<?php
   echo "这是第一种例子。n"; // 本例是 C++ 语法的注释
   /* 本例采用多行的
      注释方式       */
   echo "这是第两种例子。n";
   echo "这是第三种例子。n"; # 本例使用 UNIX Shell 语法注释
?>

不过在使用多行注释时请注意,不能让注释陷入递归循环当中,否则会引起错误。

<?php  /*   echo "这是错误的示范。n"; /* 递归注释会引起问题 */  */?>