原生的几个javascript常用特效
1 仿网上表格特效：鼠标经过的行高亮显示源码：
<html >
<head>
<title>鼠标经过的行高亮显示</title>
<!--实现原理：鼠标经过当前行改变其背景颜色，除此之外 还可以有很多扩展-->
<script type="text/javascript">
function trinitEvent() {
var trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
var tr = trs[i];
tr.onmouseover = function() {
this.style.background = "red";
}
tr.onmouseout = function () {
this.style.background = "white";
}
tr.style.cursor = "pointer";
}
}
</script>
</head>
<body onload="trinitEvent()">
<table id="tbColor">
<tr><td>好地方很多很多很多很多</td></tr>
<tr><td>好地方很多很多很多很多</td></tr>
<tr><td>好地方很多很多很多很多</td></tr>
<tr><td>好地方很多很多很多很多</td></tr>
<tr><td>好地方很多很多很多很多</td></tr>
<tr><td>好地方很多很多很多很多</td></tr>
</table>
</body>
</html>
2 表格的隔行换色
<html >
<head>
<title>表格的隔行换色</title>
<script type="text/javascript">
function setLineColor() {
var tbColor = document.getElementById("tbColor");
var trs = tbColor.getElementsByTagName("tr");
for (var i = 0; i <trs.length; i++) {
if (i % 2 == 0) {
var tr = trs[i];
tr.style.background = "red";
}
}
}
</script>
</head>
<body onload="setLineColor()">
<table id="tbColor">
<tr><td>哈哈啊哈</td></tr>
<tr><td>哈哟</td></tr>
<tr><td>哈你</td></tr><tr><td>哈我为</td></tr>
</table>
</body>
</html>
3 超链接提示(鼠标移入超链接时动态加载层给予一些详细的提示，当然原生的html+css也能达到效果)
<html >
<head>
<title>超链接提示</title>
<style type="text/css">
.toolTip
{
width:80px;
height:80px;
background:blue;
border:1px solid green;
}
</style>
<script type="text/javascript">
function decrarionA() {
var as = document.getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
var a = as[i];
a.onmouseover = function () {
var div = document.createElement("div");
div.className = "toolTip";
div.innerText = "超炫的提示信息哟！！";
div.style.position = "absolute";
div.style.left = window.event.clientX + "px";
div.style.top = window.event.clientY + "px";
document.body.appendChild(div);
}
a.onmouseout = function () {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.className == "toolTip") {
document.body.removeChild(div);
}
}
}
}
}
</script>
</head>
<body onload="decrarionA() ">
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
</body>
</html>
4. 超链接效果：被点击的链接高亮显示
<html >
<head>
<title>超链接效果：被点击的链接高亮显示</title>
<script type="text/javascript">
function searchA() {
var linkAs = document.getElementsByTagName("a");
for (var i = 0; i < linkAs.length; i++) {
var linkA = linkAs[i];
linkA.onclick = aClick;
}
}
function aClick() {
var linkAs = document.getElementsByTagName("a");
for (var i = 0; i < linkAs.length; i++) {
var linkA = linkAs[i];
if (linkA == this) {
this.style.background = "red";
}
else {
linkA.style.background = "white";
}
}
}
</script>
</head>
<body onload="searchA()">
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
<a href="#">百度</a>
</body>
</html>
5 用户登录提示框
<html >
<head>
<title>用户登录提示框</title>
<!--点击登录的时候提示登录div，取消的时候消失-->
<style type="text/css">
#login
{
width:400px;
height:300px;
background:gray;
border:10px solid yellow;
position:absolute;
top:200px;
left:450px;
text-align:center;
line-height:100px;
}
</style>
<script type="text/javascript">
function showLogin() {
var login = document.getElementById("login");
login.style.display = "";
}
function hideLogin() {
var login = document.getElementById("login");
login.style.display = "none";
}
</script>
</head>
<body>
<input type="button" value="登录" onclick="showLogin()"/>
<div id="login" style="display:none">
用户名：<input type="text" /><br />
密码：<input type="text" /><br />
<input type="button" value="登录" />
<input type="button" value="取消" onclick="hideLogin()" />
</div>
</body>
</html>
6、点击按钮层的高度自动增加
<html >
<head>
<title>点击按钮层的高度自动增加</title>
<script type="text/javascript">
function addHeigth() {
var dv = document.getElementById("dHeight");
var oldHeight = dv.style.height;
oldHeight = parseInt(oldHeight, 10);
oldHeight += 10;
oldHeight = oldHeight + "px";
dv.style.height = oldHeight;
}
</script>
</head>
<body>
<div id="dHeight" style="border:1px solid blue;width:200px;height:200px">哈哈哈O(∩_∩)O哈~</div>
<input type="button" value="高度加十" onclick=" addHeigth()"/>
</body>
</html>
7、依据数据动态加载表格
<html >
<head>
<title>依据数据动态加载表格</title>
<script type="text/javascript">
function createTable() {
var tbData = document.getElementById("tbData");
var data = { "百度": "http://www.baidu.com", "搜狐": "http://www.baidu.com", "Q": "http://www.baidu.com" };
for (var key in data) {
var value = data[key];
var tr = document.createElement("tr");
td1 = document.createElement("td");
td2 = document.createElement("td");
td1.innerText = key;
tr.appendChild(td1);
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>"; ;
tr.appendChild(td2);
tbData.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="tbData"></table>
<input type="button" value="创建一个表格" onclick="createTable()" />
</body>
</html>
8、歌曲选择器
<html >
<head>
<title>歌曲选择器</title>
<style type="text/css">
#musicSel
{
width:200px;
height:auto;
border:2px solid blue;
text-align:left;
}
</style>
<script type="text/javascript">
var data = ["那一夜", "月亮之上", "天使的翅膀", "月光洲"];
function loadMusic() {//加载歌曲信息
var musicSel = document.getElementById("musicSel");
for (var i = 0; i < data.length; i++) {
var input = document.createElement("input");
var label = document.createElement("label");//给input增加label属性这样当点击input外侧的文本就可以选中该checkbox
var br = document.createElement("br");//每次加载完一首歌曲就换行
input.type = "checkbox";
input.value = data[i];
var mcId = input.id = "mc" + i;//设定checkbox的ID
label.innerText = data[i];
label.setAttribute("for", mcId); //无法定义label的for属性，采用setAttribute预定义for属性
musicSel.appendChild(input);
musicSel.appendChild(label);
musicSel.appendChild(br);
}
}
//因为火狐浏览器不支持inerText属性所以需要解决一下，firefox改成了contentText属性，需要用Javascript重新定义innerText属性 ，使得在Firefox中也可以使用innerText属性
function isIE() { //判断是否是ie
if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 1)
return true;
else
return false;
}
if (!isIE()) { //firefox下Javascript重新定义innerText属性
HTMLElement.prototype.__defineGetter__("innerText",
function () {
var anyString = "";
var childS = this.childNodes;
for (var i = 0; i < childS.length; i++) {
if (childS[i].nodeType == 1)
anyString += childS[i].tagName == "BR" ? '\n' : childS[i].innerText;
else if (childS[i].nodeType == 3)
anyString += childS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__("innerText",
function (sText) {
this.textContent = sText;
}
);
}
//业务逻辑的实现
function selectionAll() {//全选
var musicSel = document.getElementById("musicSel");
var inputs = musicSel.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
input.checked = "checked";
}
}
}
function CancelSelectioned() {//取消选定
var musicSel = document.getElementById("musicSel");
var inputs = musicSel.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
input.checked = "";
}
}
}
function ReverseSelectioned() {//反选
var musicSel = document.getElementById("musicSel");
var inputs = musicSel.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
input.checked =!input.checked;
}
}
}
</script>
</head>
<body onload="loadMusic()">
<div id="musicSel">
</div>
<input type="button" value="全选" onclick="selectionAll()" />
<input type="button" onclick="CancelSelectioned()" value="取消选定" />
<input type="button" value="反选" onclick="ReverseSelectioned()" />
</body>
</html>
9、规定时间后方可注册
<html >
<head>
<title>规定时间后方可注册</title>
<script type="text/javascript">
var secounds = 10;
var intervalId;
function Count() {
var btn = document.getElementById("btn");
if (btn) {
if (secounds <= 0) {
btn.value = "注册";
btn.disabled = false;
clearInterval(intervalId);
}
else {
btn.value = "请仔细阅读协议还剩" + secounds + "秒";
secounds--;
}
}
}
setInterval("Count()",1000);
</script>
</head>
<body>
<input type="button" id="btn" disabled="disabled" />
</body>
</html>
10、获得焦点的文本框背景为红色(可根据需求扩展)
<html >
<head>
<title>获得焦点的文本框背景为红色</title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "text") {
input.onfocus = function () {
this.style.background = "red";
}
input.onblur = function () {
this.style.background = "white";
}
}
}
}
</script>
</head>
<body onload="initEvent() ">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</body>
</html>
11、隐藏高级选项
<html >
<head>
<title>隐藏高级选项</title>
<style type="text/css">
#showDiv
{
width:200px;
height:200px;
font-size:18px;
background:blue;
border:2px solid red;
}
</style>
<script type="text/javascript">
function showMes(ck) {
var ckd = document.getElementById("ckd");
var showDiv = document.getElementById("showDiv");
if (ck.checked) {
showDiv.style.display = '';
}
else {
showDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<input type="checkbox" id="ckd" onclick="showMes(this)"/><label for="ckd">显示高级选项</label>
<div id="showDiv" style="display:none">这里有很多特殊的文字哟</div>
</body>
</html>
12、每分钟换一张美女时钟
<html >
<head>
<title>每一分钟换一张美女时钟</title>
<script type="text/javascript">
function getTenNumber(number) {
if (number < 10) {
return "0" + number;
}
else {
return number;
}
}
function setTimeMM() {
var imgMM = document.getElementById("imgMM");
if (imgMM) {
var now = new Date();
var filePath = getTenNumber(now.getHours()) + "_" + getTenNumber(now.getMinutes()) + ".jpg";
imgMM.src = "mm/"+filePath;
}
}
setInterval("setTimeMM()", 60000);
</script>
</head>
<body onload="setTimeMM()">
<img src="" id="imgMM"/>
</body>
</html>
13、评分控件的开发
<html>
<head>
<title>评分控件的开发</title>
<script type="text/javascript">
var secore;
function indexOf(arr, element) {//获取当前元素在数组中的下标
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function setScore() {//设置评分规则
var tbScore = document.getElementById("tbScore");
var secore = document.getElementById("secore");
var tds = tbScore.getElementsByTagName("td");
var index = indexOf(tds, this);
secore = index;
for (var i = 0; i <= index; i++) {
var td = tds[i];
td.style.background = "red";
}
for (var i = index+1; i <tds.length; i++) {
var td = tds[i];
td.style.background = "white";
}
}
function initEvent() {//评分加载
var tbScore = document.getElementById("tbScore");
var tr = tbScore.getElementsByTagName("tr");
var tds = tbScore.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onmouseover = setScore;
td.style.cursor = "pointer";
}
}
</script>
</head>
<body onload="initEvent()">
<table id="tbScore">
<tr>
<td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
</tr>
</table>
</body>
</html>
14、省市选择器
<html >
<head>
<title>省市选择器：如果市的value为none则隐藏该select</title>
<script type="text/javascript">
var data = { "江西": ["南昌", "宜春"], "山东": ["济南", "青岛"], "河南": ["郑州", "洛阳"] };
//加载省的信息
function loadProv() {
var prov = document.getElementById("prov");
for (var key in data) {
var option = document.createElement("option");
var city = document.getElementById("city");
option.value = key;
option.innerText = key;
prov.appendChild(option);
}
}
//当选择的省发生变化时候加载对应的市
function selectChange_Prov() {
var prov = document.getElementById("prov");
var city = document.getElementById("city");
for (var i = city.childNodes.length - 1; i >= 0; i--) {
city.removeChild(city.childNodes[i]);
}
if (prov.value == "none") {
city.style.display = "none";
return;
}
city.style.display = "";
var citys = data[prov.value];
for (var i = 0; i < citys.length; i++) {
var option = document.createElement("option");
option.value = citys[i];
option.innerText = citys[i];
city.appendChild(option);
}
}
</script>
</head>
<body onload="loadProv() ">
<select id="prov" onchange="selectChange_Prov() ">
<option value="none">--请选择省--</option>
</select>
<select id="city" style="display:none"></select>
</body>
</html>
15、鼠标经过时控件其value值发生变化
<html>
<head>
<title>鼠标经过时控件其value值发生变化</title>
<!-- 实现思路：设定二个函数：inputMouseover()用于设置按钮的事件所指向的函数（当然也可设置成一个匿名函数实现）、inputOver()用于按钮事件具体的行为-->
<!--此列可以扩展成鼠标进过时按钮的相关的html元素改变比如;背景图片、背景颜色等以及Tag导航中当前访问的Tag高亮显示-->
<script type="text/javascript">
function inputMouseover() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onmouseover = inputOver;
// input.onmouseout = inoutOut;
}
}
function inputOver() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input == window.event.srcElement) {
// window.event.srcElement:获取引发事件的控件
input.value = "重置";
}
else {
input.value = "哟哟";
}
}
}
/*用于扩展
function inoutOut() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "哟哟";
}
}
*/
</script>
</head>
<body onload="inputMouseover()">
<input type="button" value="哟哟" />
<input type="button" value="哟哟" />
<input type="button" value="哟哟" />
<input type="button" value="哟哟" />
</body>
</html>
16、追随鼠标飞的图片
<html >
<head>
<title>追随鼠标飞的图片</title>
<script type="text/javascript">
document.onmousemove = function () {
var x = window.event.clientX;
var y = window.event.clientY;
var flyImg = document.getElementById("flyImg");
if (flyImg) {
flyImg.style.left = x + "px";
flyImg.style.top = y + "px";
}
}
</script>
</head>
<body>
<div id="flyImg" style="position:absolute"><img src="mm/05_49.jpg"></div>
</body>
</html>
