zoukankan      html  css  js  c++  java
  • 给自己的网站加点情趣,常用的javaScript效果

    1,文本框焦点
    
    效果:获得焦点的时候有一段提示文字,没有获得焦点的时候为空。 
    
    代码:
    
    <input type="text" value="请输入密码" onblur="if(value=='请输入密码'){value=''}" onfocus="if(value==''){value='请输入密码'}"/> 
    
    2. 鼠标移近移出
    
    效果:靠近颜色或者图片发生变化,离开也是。 
    
    代码:
    
    <input  type="button" value="确定" onmouseout="this.style.color='blue'" onmouseover="this.style.color='red'"/>
    
    3.使文字上下移动
    
    效果:如同标题
    
    代码:
    
    <marqueue direction="up" srollamount="1" scrolldelay="1000" onmouseover="this.stop()" onmouseout="this.start()">我爱博客园!</marqueue> 
    
    4.状态栏上显示信息
    
    效果:如同标题
    
    备注:确保浏览器的状态栏打开。 
    
    代码:
    
    <input type="button" value="我的状态可以显示在状态栏" onclick="window.status='我的状态可以显示在状态栏';return true;"/> 
    
    5.点击文字实现radio选项
    
    效果:如同标题
    
    代码:
    
    <input type="radio" id="A1" name="sex"/><label for="A1">花木兰</label> 
    
    <input type="radio" id="A2" name="sex"/><label for="A2">卢俊义</label>
    6.font的点击事件
    
    效果:点击文字,触发事件。
    
    代码:
    
    <font onclick="alert('纯爷们,你点了我!')">敢点我吗?</font> 
    
    7.打印网页
    
    效果:打开打印对话框
    
    代码:
    
    <input type="button" value="打印这些货" onclick="window.print()"> 
    
    8.显示文档的最后修改日期
    
    效果:如标题
    
    代码:
    
    <script type="text/javascript">
    
    function showModifyDate()
    
      {   alert(document.lastModified); } 
    
    </script> 
    
    <input type="button" value="显示最后修改日期" onclick="showModifyDate()">
    9.根据选项改变背景
    
    效果:如标题
    
    代码:
    
    <script type="text/javascript">
    
    function bgchange(obj)
    
      {   newColor=obj.options[obj.selectedIndex].text ;
    
           document.bgcolor=newColor; 
    
    }
    
    </script>
    <select onchange="bgchange(this)">
    
    <option>Red</option>
    
    <option>blue</option>
    </select> 
    
    10.刷新,前进,后退,全屏显示,转移到目标url
    
    效果:如标题
    
    代码:
    
    <input type="button" value="刷新" onclick="history.go(0)"/> 
    
    <input type="button" value="前进" onclick="history.go(1)"/>
    <input type="button" value="后退" onclick="history.go(-1)"/>
    <input type="button" value="全屏" onclick="window.open(document.location,'url','fullscreen')"/>
    <input type="button" value="跳转" onclick="javascript:window.location='目标地址'"/>
    11.实时显示时间
    
    效果:页面中动态显示时间
    
    代码:
    
     <script type="text/javascript">
    
     window.onload=  function()
    
      {   setInterval("document.form1.textlock.value=(new Date);",1000);
    
    }
    
    </script>
     
    
     <textarea id="textlock" rows=5 cols=40></textarea>
    
     12.设为首页
    
     
    
    <a  onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sc-lyjs.com/');" target="" >设为首页</a>
     
    
    13.增加到收藏夹 
    
     
    
     <script>
                    function addfavorite() 
                    {
                      var title="博客园";//加入收藏的标题
                      var url="http://www.cnblogs.com/";//加入收藏的URL
                      var desc="博客园";
                      if (window.sidebar) 
                     {
                        window.sidebar.addPanel(title, url,desc); //判断为火狐浏览器
                      } 
                      else if( document.all )
                     { //判断为IE浏览器
                        window.external.AddFavorite( url, title); 
                      } 
                      else if( window.opera && window.print )
                     { //not support Now
                        return true;
                      }
                    }
     </script>
     
    

      

    js几秒以后倒计时跳转示例:

    <html> 
    <head> 
    <title>出错啦~~~</title> 
    <link href="css/login1.css" mce_href="css/login1.css" rel="stylesheet" type="text/css" /> 
    <script language="javascript" type="text/javascript"> 
    var i = 5; 
    var intervalid; 
    intervalid = setInterval("fun()", 1000); 
    function fun() { 
    if (i == 0) { 
    window.location.href = "../index.html"; 
    clearInterval(intervalid); 
    } 
    document.getElementById("mes").innerHTML = i; 
    i--; 
    } 
    </script> 
    </head> 
    <body> 
    <div id="errorfrm"> 
    <h3>出错啦~~~</h3> 
    <div id="error"> 
    <img src="images/error.gif" mce_src="images/error.gif" alt="" /> 
    <p>系统出错,请联系管理员!</p> 
    <p>将在 <span id="mes">5</span> 秒钟后返回首页!</p> 
    </div> 
    
    </div> 
    </body> 
    </html> 
  • 相关阅读:
    16 pymysql模块的使用
    15 可视化工具 Navicat的简单使用
    14 补充 MySQL的创建用户和授权
    13 多表查询
    linux常用查看文件或日志命令
    linux查找大文件命令
    linux测试环境维护之磁盘空间维护
    linux配置IP访问权限
    通过pytty工具代理连接数据库mysql(绕开数据库白名单限制)
    redis安装详解
  • 原文地址:https://www.cnblogs.com/hansonglin/p/5305616.html
Copyright © 2011-2022 走看看