js中常见小应用

 

一：动态的显示或隐藏网页中的某部分内容

　　这里以ID=“divUpload”这个层为例，页面加载时默认隐藏这个层；当用户选中复选框，弹出该层，再次点击复选框时又隐藏该层

　　主要是通过复选框的onclick事件来调用js函数，函数通过获取ID=“divUpload”这个层，来控制该层的display属性

 1 <head runat="server">
 2     <title></title>
 3     <script type="text/javascript">
 4         function up() {
 5             var div = document.getElementById("divUpload");
 6             if (div.style.display == "none") {
 7                 div.style.display ="";
 8             }
 9             else {
10                 div.style.display = "none";
11             }
12         
13         }
14     </script>
15 </head>
16 <body>
17     <form id="form1" runat="server">
18     <input id="ckUpload" type="checkbox"  onclick="up()"/><label for="ckUpload">上传</label>
19     <div id="divUpload"  style="display:none">
20         <asp:FileUpload ID="FileUpload1" runat="server" />
21         <asp:Button ID="btnUp" runat="server" Text="上传"/>
22         <span class="red size12">（为了显示的美观，请上传前将图片处理成宽151 高117，大小不超过200K）格式只能为：jpg|bmp|gif</span>
23     </div>
24     </form>
25 </body>

 　　默认隐藏下面的层：

　　

　　选中状态：

　　

 二：动态设置控件的属性（setAttribute（"属性","值"））

　　--为提交按钮设置了disabled属性；

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function set() {
            var btnSub = document.getElementById("btnSubmit");
            btnSub.setAttribute("disabled", "disabled");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="ckSet" type="checkbox"  onclick="set()"/>设置属性

        <input id="btnSubmit" type="button" value="提交" />
    </div>
    </form>
</body>

 

三：收藏本站

1.将收藏本站做为超链接，点击超链接调用js脚本

　　<a href="javascript:;"  onclick="addToFavorite();">收藏本站</a>

2.js脚本　

 1 function addToFavorite() {
 2     var a = "http://www.pzmall.com/";
 3     var b = "票庄网上商城-综合网购首选";
 4     if (document.all) {
 5         window.external.AddFavorite(a, b)
 6     } else if (window.sidebar) {
 7         window.sidebar.addPanel(b, a, "")
 8     } else {
 9         alert("对不起，您的浏览器不支持此操作!\n请您使用菜单栏或Ctrl+D收藏本站。")
10     }
11 };
posted @ 2012-04-27 09:36  fly_kw  阅读(316)  评论(0)  编辑  收藏  举报