【BS】网站常用功能实例

前言

在网页制作的过程中，HTML负责页面内容，CSS负责样式的设置，这些都是静态属性，而JavaScript则负责实现网页的动态效果。下面列举了制作网页过程中常用的实例，以备后用。

用回车键代替点击按钮

系统登录的时候输入用户名和密码后，需点击登录按钮登录，为了用户体验，我们一般将这个登录按钮设为默认，实现回车键直接登录。

<script type="text/javascript">
	document.onkeydown = keyListener;
    function keyListener(e) {
        // 当按下回车键，执行我们的代码  
        if (e.keyCode == 13) {
			test();
    	}
	}
	function test(){
		//点击按钮执行的代码
	}
</script>

鼠标移上去按钮变色，鼠标移开按钮颜色恢复

<input value="登录"  type="button" onmousemove="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='';">

文本框默认文字

//placeholder属性可以使文本框显示一些提示信息
<input name="username" placeholder="用户名" required="" type="text">
<input name="password" id="password" placeholder="密码" required="" type="password">

插入多媒体文件

网页中的多媒体除了滚动文字外还包括音频文件和视频文件及Flash文件等。而要在网页中插入这些文件就要使用标记embed，利用该标记可以直接调用多媒体文件，非常方便。autostart属性用来设置多媒体文件是否自动播放，默认是false；loop属性用来设置多媒体文件是否循环播放， 默认是false。

<embed src="多媒体文件地址" width="文件宽度" height="文件高度" autostart="true|false" loop="true|false" />

后台获取当前页的URL

string url = HttpContext.Current.Request.Url.ToString();

日期选择控件——My97DatePicker

对于12306来说，日期控件很常见。那么，我们现在来做个demo，以备后用。它可以设置时间任意显示格式、文本框只读、隐藏清空按钮、设置今天为最小（最大）日期、设置日期范围等功能，详情请看参考文章。（源码下载、参考文章、控件文档）
第一步：下载WdatePicker.js等相关文件（单击下载）
第二步：在html页面中导入WdatePicker.js

<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>

第三步：在输入框input元素上加入class=“Wdate” οnclick=“WdatePicker()”

<input type="text" class="Wdate" onclick="WdatePicker()" style="cursor:pointer"/>

第四步：打开页面查看效果

单击按钮，显示隐藏文本

<input type="button" value="单击" onclick="test()" /><br />
<p id="txt" style="display:none">琚建飞</p>
<script type="text/javascript">
	function test(){
		document.getElementById("txt").style.display ="";
	}
</script>