标签：style blog http io color ar os java for
//凡是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+$/,‘‘);
}
标签：style blog http io color ar os java for
原文地址：http://www.cnblogs.com/valiant1882331/p/4071350.html
