【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();//获取当前页的url

实例六：日期选择控件——My97DatePicker

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

第一步：下载WdatePicker.js等相关文件（单击下载）

第二步：在html页面中导入WdatePicker.js

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

第三步：在输入框input元素上加入class=”Wdate” onclick=”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>