javascirpt 特效编程

rain

先来个最基础的js入门程序，往后就省略开头，直接写中间部分内容。
<script type="text/javascript">
   document.write("Hellow World !");
</script>

一、自动刷新页面
方法一：<meta http-equiv="refresh" content="20">      每20秒刷新一次
方法二：用js写
<script type="text/javascript">
function fresh(){
   window.location.reload();
}
setTimeout('fresh()',20000);         //自动刷新定时器
</script>
//reload()函数的作用是让浏览器刷新当前网页。

rain

二、写个让页面前进和后退的按钮
1、js部分
//前进
function goForward(){window.history.forward();}
//后退
function goBack(){window.history.back();}
2、网页部分写好按钮
<input type="button" value="前进"  onclick="goForward()"/>
<input type="button" value="后退"/>

效果

ps：history 对象里，还有一个go()函数，用正负值表示，例如go(1)表示前进一页。

rain

三、关闭页面按钮
1、js
function  closeWin(){window.close();}
2、css
<input type="button" value="关闭窗口" onclick=closeWin()/>    //onclick 动作省去了“”，防止代码干扰

单击按钮，则该页面关闭

rain

四、页面载入等待界面
1、js
function submitForm(){
    var doing = document.getElementById('doing');      //获取界面的dom
    doing.style.display=' ';         //取消隐藏
    self.location.reload();           // 重新刷新页面
｝
2、css
<div id="doing" style="z-index:99; left:0px;top:0px;display:none; width:100%; position:absolute;height:100%;background:#ccc;">
载入中，请等待。。。。
</div>
<p>
         <input type="button" value="提交表单" />
</p>

点击按钮时出现等待提示，提交完成后恢复页面

rain

五、若干秒后不操作自动关闭窗口
var willClose = true;                          //定义一个是否关闭的全局变量
function clickBody(){
       willClose = false;                          //单击网页后，把变量置为false
}
setInterval ( function() {
      if (willClose){
           window.close();                           //关闭窗口
        }else{
           willClose = true ;
                }
                                    },10000);                 //      10秒后才执行该函数


setInterval() 用来记时和进行重复操作。本例中是10秒后执行第一个参数。

rain

六、修改网页标题

1、js
    function changeTitle(){
     var newTitle=document.getElementById('newTitle').value;      //得到新的Title值
     document.title=newTitle;                          //修改标题
}

2、css
<input type="text" name="newTitle" id="newTitle" value="" />
<input type="button" value="修改标题" />

在这里输入内容，点击按钮，则页面标题就改掉了

rain

七、禁止网页放入框架
防止网页被随意地引入到别人的框架里。

if(self != top){                                   //判断当前页是否为最顶层框架的网页
top.location.href=self.location.href;   //如果不是，则进行跳转
                    }

top和self是否等同，可以作为网页是否在一个框架中打开的判断标准。

rain

八、跳转到其它页面

function changURL(){
    var newURL = document.getElementById('newURL').value;   //得到新的url值
    self.location.href=newURL;       //通过修改地址栏的地址来跳转到新的网页地址

下面写个输入组件就可以了

如果网页处于一个框架当中，那么这样的跳转仅限于框架里，而不是整个窗口。如果整个窗口跳转，应把self换成window。

rain

九、进入页面时的问候

alert('欢迎您的光临');          //弹出对用户的问候


可以放在</html>后边

rain

十、在网页里动态加载javascript

function  loadJs(){
     var  theHead = document.getElementsByTagName('head').item(0);    //得到html的头部dom
     var  myScript = document.createElement('script');    //创建脚本的dom对象实例
     myScript.src='./myjs.js';          //指定脚本路径
     myScript.type='text/javascript';     //指定脚本类型
     myScript.defer=true;         //程序下载完后再解析和执行
     theHead.appendChild(myScript);    //把dom挂载到头部
                            ｝


定义按钮
<input type="button" value="动态加载JS"  onclick=loadJS() />