//凡是html标签中的属性和值是一样的,那么在js中用true或者false
1,阅读协议倒计时
<input type="button" name="name" value="请仔细阅读协议(5)" disabled="disabled" id="btn" /> <script type="text/javascript">
window.onload = function () {
var btnObj = document.getElementById('btn');
var sec = 5;
var setId = setInterval(function () {
sec = sec - 1;
if (sec <= 0) { btnObj.value = '同意';
clearInterval(setId); //清除计时器
btnObj.disabled = false;
} else {
btnObj.value = '请仔细阅读协议(' + sec + ')';
}
}, 1000);
};
2,事件冒泡
window.event.cancelBubble = true; //阻止事件冒泡.
<script type="text/javascript">
//冒泡排序,--元素中有元素(元素的嵌套如果触发了里面元素的事件,那么外面元素的事件也会被触发)(事件是相同的事件)
//阻止事件冒泡
window.onload = function () {
document.getElementById('dv').onclick = function () {
alert(this.id);
//alert(window.event.srcElement.id);//事件源的id
};
document.getElementById('p1').onclick = function () {
alert(this.id);
};
document.getElementById('sp').onclick = function () {
alert(this.id);
window.event.cancelBubble = true; //阻止事件冒泡.
//return false;//没有阻止事件冒泡
};
};
</script>
3,dom动态创建元素
<script type="text/javascript">
window.onload = function () {
//获取按钮添加点击事件
document.getElementById('btn').onclick = function () {
//创建一个层的对象
var dvObj = document.createElement('div');
dvObj.style.width = '300px';
dvObj.style.height = '200px';
dvObj.style.backgroundColor = 'yellow';
//把层添加到body中
document.body.appendChild(dvObj);
};
};
</script>
4,将创建的元素添加到现有元素中
var i = 0;
document.getElementById('btnc').onclick = function () {
i++;
//创建一个input标签
var inputObj = document.createElement('input');
inputObj.type = 'button';
inputObj.value = '我骄傲' + i;
//document.getElementById('dv').appendChild(inputObj);
document.getElementById('dv').insertBefore(inputObj, document.getElementById('dv').firstChild);
};
5,简单无刷新评论
<table border="1" id="tb">
<tr>
<td>猫猫
</td>
<td>
我好困
</td>
</tr>
</table>
昵称: <input type="text" name="name" value="" id="txt" />
<br />
<textarea rows="10" clos="10" id="txtContent"></textarea>
<br />
<input type="button" name="name" value="提交" id="btn" />
<script type="text/javascript">
window.onload = function () {
document.getElementById('btn').onclick = function () {
//获取昵称
var name = document.getElementById('txt').value;
//获取内容
var txtCt = document.getElementById('txtContent').value;
//获取页面的表格
var tbObj = document.getElementById('tb');
//创建行
var trObj = document.createElement('tr');
//创建单元格
var td1 = document.createElement('td');
var td2 = document.createElement('td');
td1.innerText = name;
td2.innerText = txtCt;
//把单元格添加到行中
trObj.appendChild(td1);
trObj.appendChild(td2);
//行添加到表中
tbObj.appendChild(trObj);
};
};
</script>
6,创建表格方式
<script type="text/javascript">
window.onload = function () { document.getElementById('btn').onclick = function () { var tb = document.createElement('table');
var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" }; for (var key in dic) {
//创建行,根据表创建行
var trObj = tb.insertRow(-1);
//创建单元格,根据行创建单元格 var td1 = trObj.insertCell(-1);
td1.innerText = key;
//创建单元格
var td2 = trObj.insertCell(-1);
td2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>'; }
//表格添加到body中
document.body.appendChild(tb); };
}; </script>
7,为元素添加样式
<script type="text/javascript">
window.onload = function () { document.getElementById('btn').onclick = function () {
document.getElementById('dv').className = 'cls'; };
}; </script>
8,文本框焦点事件(onfocus与onblur)
//创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur。
window.onload=function(){
//获取所有的文本框
var txts = document.getElementsByTagName('input');
for (var i = 0; i < txts.length; i++) {
txts[i].onblur = function () {
if (this.value.length == 0) {
this.style.backgroundColor = 'red';
}
else {
this.style.backgroundColor = '';//恢复默认颜色
}
}; //注册失去焦点事件
}
};
9,★☆评分控件
<script type="text/javascript">
window.onload = function () {
var tds = document.getElementById('tb').getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].onmouseover = function () {//注册一个鼠标进入的事件
for (var j = 0; j < tds.length; j++) {
//this.innerText = '★';
tds[j].innerText = '★';
if (tds[j] == this) {
break;
}
}
};
tds[i].onmouseout = function () {
for (var i = 0; i < tds.length; i++) {
tds[i].innerText = '☆';
}
};
}
};
</script>
10,点击按钮,表格隔行变色
<script type="text/javascript">
//点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr，依次遍历，如果是偶数就…………。
window.onload = function () { document.getElementById('btn').onclick = function () {
var trs = document.getElementById('tb').getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
if (i % 2 != 0) {
trs[i].style.backgroundColor = 'yellow';
} else {
trs[i].style.backgroundColor = '';
}
}
};
}; </script>
11,鼠标放到超链接上,显示图片(层)
<script type="text/javascript">
window.onload = function () {
//获取超链接, //为超链接注册一个事件--鼠标进入事件
document.getElementById('ak').onmouseover = function () {
if (!document.getElementById('imxy')) {
//创建一个图片
var im = document.createElement('img');
im.id = 'imxy';
im.src = 'xy.JPG';
//图片要脱离文档流
im.style.position = 'absolute';
//超链接距离左边距离
var x = this.offsetLeft + 'px';
//超链接距离上面加上超链接高度距离
var y = this.offsetTop + this.offsetHeight + 'px';
//图片添加到body中
document.body.appendChild(im);
}
};
//鼠标离开
document.getElementById('ak').onmouseout = function () {
if (document.getElementById('imxy')) {
document.body.removeChild(document.getElementById('imxy'));
}
};
}
</script>
12,让图片跟随图片
<script type="text/javascript">
window.onload = function () {
document.onmousemove = function () {
// alert('让你动');
var imObj = document.getElementById('im');
imObj.style.position = 'absolute';
imObj.style.left = window.event.clientX + 'px';
imObj.style.top = window.event.clientY + 'px';
//给鼠标加样式
document.body.style.cursor = 'url(dinosau2.ani)';
};
};
</script>
13,正则表达式
var msg = '中国移动:10086,中国联通:10010,中国电信:10000';
var reg=/\d+/g;//全局
var result;
while ((result = reg.exec(msg)) != null) {
alert(result);
}
14,js匹配邮箱
document.getElementById('txt').onblur = function () {
var email = this.value; //获取邮箱
var regObj = /^\w+@\w+\.+\w+$/;
alert( regObj.test(email)?'是邮箱':'不是邮箱');
};
15,电话号码指定位置换星号
<script type="text/javascript">
var msg = '杨小舅:13888888888张三:13999999999小李子:13111111111';
// /\d{3}\d{4}\d{4}/;
var result= msg.replace(/(\d{3})(\d{4})(\d{4})/g,'$1****$3');
alert(result);
</script>
16,切除字符串两端空格
<script type="text/javascript">
var msg = ' 天气还可以 ';
function trimString(txt) {
//先切左边再切右边-（query中1.8.3文件中是前面的方式）---可以左边右边一起切
return txt.replace(/^\s+/,'').replace(/\s+$/,'');
}