document的范围比body的范围大,body的范围取决于网页中元素所占据的面积
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//如果需要操作页面上的元素,那么就需要页面加载后再执行
onload = function () {
document.getElementById('bd').onclick = function () {
alert('这是body的范围');
}
document.onclick = function () {
alert('这是document的范围');
}
}
</script>
</head>
<body id="bd">
<input type="button" name="name" value="按钮" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function btnclick() {
alert('我被点了');
}
function cbtn() {
document.getElementById('btn1').onclick = f2;
}
function f2() {
alert('我改变了');
}
</script>
</head>
<body id="bd">
<input type="button" name="name" value="按钮" id="btn1" οnclick="btnclick()"/>
<input type="button" name="name" value="改变按钮" id="btnc" οnclick="cbtn()"/>//点击后改变按钮注册的事件
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btn').onclick = function () {
//window.navigate('http://www.baidu.com'); //只支持IE
window.location.href = 'http://www.baidu.com'; //支持大多数浏览器
}
}
</script>
</head>
<body>
<input type="button" name="name" value="进入网站" id="btn"/>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var setId = setInterval(function () {
alert('计时器');
}, 2000);//计时器:每2秒执行一次 返回的是计时器的id
onload = function () {
document.getElementById('btn').onclick =function () {
clearInterval(setId);//清除计时器 使计时器直接报废
}
}
</script>
</head>
<body>
<input type="button" name="name" value="关闭计时器" id="btn" />
</body>
</html>
文本框自增:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
setInterval(function () {
var txtObj = document.getElementById('txt');//返回的是文本框对象
var txtNum = parseInt(txtObj.value);
document.getElementById('txt').value = txtNum + 1;
}, 2000);
}
</script>
</head>
<body>
<input type="text" name="name" value="0" id="txt" />
</body>
</html>
<!DOCTYPE html> //另一个计时器
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
//该计时器只执行了一次
var setId=setTimeout(function () {
alert('计时器测试');
}, 2000);
clearTimeout(setId);//清除掉计时器,释放资源
</script>
</body>
</html>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
alert("页面加载后执行");
}
onunload = function () {
alert('关闭之后执行的');
}
onbeforeunload = function () {
alert('关闭之前执行的');
}
</script>
<!--标签选择器-->
<style type="text/css">
div {
border: 2px yellow solid; /*solid是指实线*/
width: 200px;
height: 150px;
}
</style>
</head>
<body style="margin: 0; padding: 0">
<!--margin是指元素和元素之间的距离 padding是指元素和里面的内容之间的距离-->
<div>
哈哈
</div>
<input type="button" name="name" value="测试" />
</body>
</html>
<html><head> <meta charset="utf-8" /> <title>走马灯1234567890</title><script type="text/javascript">setInterval(function () {var tt = document.title;document.title = tt.substr(1, tt.length - 1) + tt.substring(0,1);}, 100);</script></head><body></body></html>
window.location.reload(); //刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btn').onclick = function () {
window.location.reload();
}
//document.getElementById('dv').onmousemove = function () {
// document.title = window.event.clientX + ',' + window.event.clientY; //标题变为相对于左上角所在的坐标 只能在IE中使用
//}
document.getElementById('dv').onmousemove = function (e) {
document.title = e.clientX + ',' + e.clientY; //可以在火狐中使用,在IE中会报错
} //screenX,screenY是相对于屏幕左上角的坐标
}
</script>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<input type="button" name="name" value="按钮" id="btn" />
<div id="dv">
</div>
</body>
</html>
window.event后面.出来的东西只能在IE浏览器中使用,火狐里面需要一个事件源(e),因此可以使用下面这种方式:
<script type="text/javascript">
onload = function () {
document.getElementById('btn').onclick = function () {
window.location.reload();
}
document.getElementById('dv').onmousemove = function () {
if (arguments.length == 0) {
document.title = window.event.clientX + ',' + window.event.clientY; //IE
}
else {
document.title = arguments[0].clientX + ',' + arguments[0].clientY; //火狐
}
}
}
</script>
<script type="text/javascript">
onload = function () {
document.getElementById('dv').onclick = function () {
if (window.event.ctrlKey) {
alert('用户按下了ctrl键');
} else if (window.event.shiftKey) {
alert('用户按下了shift键');
} else if (window.event.altKey) {
alert('用户按下了alt键');
} else {
alert('用户按下了鼠标');
}
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//直接用鼠标点击这个超链接,会跳转进该网页,如果按shift再点击超链接,会显示时间
onload = function () {
document.getElementById('ak').onclick = function () {
if (window.event.shiftKey) {
alert(new Date().toLocaleTimeString());
return false;//什么也不执行 取消默认事件
}
}
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="ak">百度</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btn').onclick = function () {
alert(window.screen.width + ',' + window.screen.height);
}
}
</script>
</head>
<body>
<input type="button" name="name" value="显示分辨率" id="btn" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('dv').onmousedown = function () {//显示按下的是鼠标哪个键
alert(window.event.button);
}
}
</script>
</head>
<body>
<div style="width:300px;height:200px;background-color:green" id="dv">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('bd').oncopy = function () {
alert('禁止复制');
return false;
}
document.getElementById('bd').onpaste = function () {
alert('禁止粘贴'); //在当前网页禁止粘贴
return false;
}
}
</script>
</head>
<body id="bd">
long long ago
</body>
</html>
<!DOCTYPE html>
<html>
<head> <!--设置粘贴板内容 限制在IE中使用-->
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('bd').oncopy = function () {
setTimeout(function () {
//首先获取粘贴板的内容
var txt = clipboardData.getData('text') + '本文出自网络';//获取粘贴板中的文本内容
clipboardData.setData('text', txt);//第一个参数:设置的是文本内容
}, 10);
}
}
</script>
</head>
<body id="bd">
文本内容
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//可以动态的创建标签 但是如果在页面加载后执行 那么,页面的其他标签都没有了
document.write('文字内容');
document.write('<font name="微软雅黑" color="red" size="7">文字内容</font>');//writeln,浏览器会把换行解析成空格
</script>
</head>
<body>
</body>
</html>
onload = function () {//三种获取元素的方法
//通过id获取元素
//document.getElementById('btn')
//通过name属性的值获取元素,返回的是一个元素的数组(集合)
var btns = document.getElementsByName('name');
for (var i = 0; i < btns.length; i++) {
alert(btns[i].value);
}
var ips = document.getElementsByTagName('input');
for (var i = 0; i < ips.length; i++) {
alert(ips[i].value);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
var n1 = document.getElementsByName('name1');
for (var i = 0; i < n1.length; i++) {
n1[i].onclick = function () {
alert('呜呜');
}
}
var n2 = document.getElementsByName('name');
for (var i = 0; i < n2.length; i++) {
n2[i].onclick = function () {
alert('哈哈');
}
}
}
</script>
</head>
<body>
<input type="button" name="name1" value="呜呜" />
<input type="button" name="name" value="哈哈" />
<input type="button" name="name" value="哈哈" />
<input type="button" name="name" value="哈哈" />
<input type="button" name="name" value="哈哈" />
<input type="button" name="name" value="哈哈" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
var i = 9;
var setId = setInterval(function () {
i--;
var btnObj = document.getElementById('btn');
if (i == 0) {
clearInterval(setId);
btnObj.value = '同意';
btnObj.disabled = false;
} else {
btnObj.value = '请仔细阅读协议(' + i + ')';
}
}, 1000);
};
</script>
</head>
<body>
<input type="button" name="name" value="请仔细阅读协议(10)" disabled="disabled" id="btn" />
<!--disabled使按钮失效-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('dv').onclick = function () {
//alert(this.id);
alert(window.event.srcElement.id);//表示记录事件源
}
document.getElementById('p1').onclick = function () {
//alert(this.id);
alert(window.event.srcElement.id);
window.event.cancelBubble = true;
}
document.getElementById('sp').onclick = function () {
//alert(this.id);
alert(window.event.srcElement.id);
window.event.cancelBubble = true;//取消事件冒泡
}
}
</script>
<style type="text/css">
div {
width: 300px;
height: 200px;
background-color: green;
cursor: pointer;
}
p {
width: 100px;
height: 150px;
background-color: orange;
cursor: pointer;
}
span {
background-color: yellow; /*设置宽高没有效果,只是把文本包围起来*/
cursor: pointer;
}
</style>
</head>
<body>
<div id="dv">
<p id="p1">
<span id="sp">this is a span
</span>
</p>
</div>
</body>
</html>
动态创建元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btn').onclick = function () {
//创建
var dvObj = document.createElement('div');//创建一个层,并且返回一个层对象
dvObj.style.width = '300px';
dvObj.style.height = '200px';
dvObj.style.backgroundColor = 'orange';
//加到body中去
document.body.appendChild(dvObj);
}
}
</script>
</head>
<body>
<input type="button" name="name" value="创建一个层" id="btn" />
</body>
</html>
createElement('element'):创建一个节点
appendChild(node):追加一个节点
removeChild(node):移除一个节点
replaceChild(new,old):替换一个节点
insertBefore(new, 参照) 把节点加到前面
属性:
firstChild
lastChild
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btn').onclick = function () {
//创建
var dvObj = document.createElement('div');//创建一个层,并且返回一个层对象
dvObj.style.width = '300px';
dvObj.style.height = '200px';
dvObj.style.backgroundColor = 'orange';
dvObj.id = 'dv';
//加到body中去
document.body.appendChild(dvObj);
};
document.getElementById('btnAdd').onclick = function () {
var inpObj = document.createElement('input');
inpObj.type = 'button';//声明是一个按钮
inpObj.value = '我是按钮';
document.getElementById('dv').appendChild(inpObj);
}
document.getElementById('btnRem').onclick = function () {
while (document.getElementById('dv').firstChild) {
document.getElementById('dv').removeChild(document.getElementById('dv').firstChild);
}
}
}
</script>
</head>
<body>
<input type="button" name="name" value="创建一个层" id="btn" />
<input type="button" name="name" value="添加按钮" id="btnAdd" />
<input type="button" name="name" value="移除层中所有的按钮" id="btnRem" />
</body>
</html>
innerText和innerHTML:(innerText在IE中使用,innerHTML在哪个浏览器中都可以使用,火狐对应innerText的是textContent)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btnText').onclick = function () {
//只显示文本内容
alert(document.getElementById('dv').innerText);
}
document.getElementById('btnHtml').onclick = function () {
//显示的是文本和标签
alert(document.getElementById('dv').innerHTML);
}
document.getElementById('btnT').onclick = function () {
//设置文本和标签
document.getElementById('dv').innerHTML = '<font color="blue">飞流直下三千尺</font>';
}
document.getElementById('btnH').onclick = function () {
//设置的是效果
document.getElementById('dv').innerHTML = '<font color="blue">飞流直下三千尺</font>';
}
}
</script>
</head>
<body>
<input type="button" name="name" value="显示innerText" id="btnText" />
<input type="button" name="button" value="显示innerHtml" id="btnHtml" />
<input type="button" name="name" value="设置innerText" id="btnT" />
<input type="button" name="name" value="设置innerHtml" id="btnH" />
<div style="width: 300px; height: 200px; border: 1px solid yellow" id="dv">
<font face="微软雅黑" size="7" color="red">
我爱天安门
</font>
</div>
</body>
</html>
三种创建元素的方式:
write
createElement
innerHTML
================
typeof()能力检测 判断是不是string类型来借此判断使用哪种浏览器的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
if (typeof (document.getElementById('dv').innerText) == 'string') {//IE浏览器(有innerText)
document.getElementById('dv').innerText = '<strong>哈哈哈</strong>';//粗体
} else {//火狐浏览器(没有innerText)
document.getElementById('dv').textContent = '<strong>哈哈哈</strong>';
}
}
</script>
</head>
<body>
<div id="dv">
<font>
哈哈哈
</font>
</div>
</body>
</html>
动态创建表格:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itvast.cn", "谷歌": "http://www.google.com" };
document.getElementById('btn').onclick = function () {
//创建表格
var tbObj = document.createElement('table');
tbObj.border = '1';
for (var key in dic) {
//创建行
var trObj = document.createElement('tr');
//创建单元格
var tdObj1 = document.createElement('td');
if (typeof (tdObj1.innerText) == 'string') {
tdObj1.innerText = key;//文字
} else {
tbObj1.textContent = key;
}
var tdObj2 = document.createElement('td');
tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';
//单元格加到行中
trObj.appendChild(tdObj1);
trObj.appendChild(tdObj2);
//行添加到表中
tbObj.appendChild(trObj);
}
//表添加到body中
document.body.appendChild(tbObj);
}
}
</script>
</head>
<body>
<input type="button" name="name" value="创建表格" id="btn" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btn').onclick = function () {
//获取昵称
var name = document.getElementById('txt').value;
//获取内容
var txtContentObj = document.getElementById('txtContent').innerText;
//创建行
var trObj = document.createElement('tr');
//创建单元格
var tdObj1 = document.createElement('td');
var tdObj2 = document.createElement('td');
tdObj1.innerText = name;
tdObj2.innerText = txtContentObj;
//单元格加到行中
trObj.appendChild(tdObj1);
trObj.appendChild(tdObj2);
//行添加到表中
document.getElementById('tb').appendChild(trObj);
}
}
</script>
</head>
<body>
<table border="1" id="tb">
<tr>
<td>mao</td>
<td>sleep</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" />
</body>
</html>
推荐这种方法创建表格(兼容性方式):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btn').onclick = function () {
var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itvast.cn", "谷歌": "http://www.google.com" };
//创建表格
tbObj = document.createElement('table');
tbObj.border = '1';
for (var key in dic) {
var trObj = tbObj.insertRow(-1);//追加一行 返回行
//创建单元格
var tdObj1 = trObj.insertCell(-1);
tdObj1.innerText = key;
var tdObj2 = trObj.insertCell(-1);
tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';
}
document.body.appendChild(tbObj);
}
}
</script>
</head>
<body>
<input type="button" name="name" value="创建表格" id="btn" />
</body>
</html>
移动层:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btn').onclick = function () {
if (typeof (document.getElementById('dv').style.styleFloat) == 'string') {
//ie的写法
document.getElementById('dv').style.styleFloat = 'right';
} else {
document.getElementById('dv').style.cssFloat = 'right';//火狐的写法
}
}
}
</script>
</head>
<body>
<input type="button" name="name" value="移动" id="btn" />
<div style="width: 300px; height: 200px; background-color: green" id="dv">
</div>
</body>
</html>
失去焦点事件:onblur
焦点进入控件:onfocus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onblur = function () {//失去焦点
if (this.value.length == 0) {
this.style.backgroundColor = 'red';
} else {
this.style.backgroundColor = '';//默认颜色
}
}
}
}
</script>
</head>
<body>
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
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 = 'orange';
}
}
}
}
</script>
</head>
<body>
<input type="button" name="name" value="变色" id="btn" />
<table border="1" id="tb">
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
var trs = document.getElementById('tb').getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = function () {
for (var j = 0; j < trs.length; j++) {
trs[j].style.backgroundColor = '';
}
this.style.backgroundColor = 'orange';
}
}
}
</script>
</head>
<body>
<table border="1" id="tb" style="cursor: pointer">
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btnYC').onclick = function () {
document.getElementById('dv').style.display = 'none';//隐藏
}
document.getElementById('btnXS').onclick = function () {
document.getElementById('dv').style.display = 'block';//显示
}
}
</script>
</head>
<body>
<input type="button" name="name" value="隐藏" id="btnYC" />
<input type="button" name="name" value="显示" id="btnXS" />
<div style="display:none;width: 30px; height: 200px; background-color: green; border: 1px solid red" id="dv">
</div>
</body>
</html>
如果在div标签的属性中设置 display那么通过js可以获取里面的值
如果是在style标签中设置的display找那个,在js中是获取不到的
超链接显示图片:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('ak').onmouseover = function () {
//创建层
if (!document.getElementById('dv')) {//判断是否有dv这个层
var dvObj = document.createElement('div');
dvObj.id = 'dv';
dvObj.style.width = '300px';
dvObj.style.height = '200px';
dvObj.style.backgroundColor = 'green';
dvObj.style.position = 'absolute';//脱离文档流
dvObj.style.left = this.offsetLeft + 'px';//距离左侧和超链接一样
dvObj.style.top = this.offsetHeight + this.offsetTop + 'px';
document.body.appendChild(dvObj);
}
}
}
</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
传说中有个神奇的网站 <a id="ak" href="http://www.baidu.com">百度</a>
<div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
var setId;
document.getElementById('btnYC').onclick = function () {
setId = setInterval(function () {
if (document.getElementById('dv').style.height) {//截取字符串取出像素值并减去相对应的要减少的像素,在加上'px'赋值给height,达到层逐步消失的效果
var strObj = document.getElementById('dv').style.height;
var num = parseInt(strObj.substr(0, strObj.length - 2));
num -= 5;
document.getElementById('dv').style.height = num + 'px';
} else {
clearInterval(setId);
document.getElementById('dv').style.display = 'none';
}
}, 1000);
}
document.getElementById('btnXS').onclick = function () {//判断计时器是否关闭,并且将层原样显示出来
if (setId) {
clearInterval(setId);
}
document.getElementById('dv').style.height = '300px';
document.getElementById('dv').style.display = 'block';
}
}
</script>
</head>
<body>
<input type="button" name="name" value="隐藏" id="btnYC" />
<input type="button" name="name" value="显示" id="btnXS" />
<div style="display: block; width: 400px; height: 300px; background-color: orange" id="dv">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.onmousemove = function () {
var imObj = document.getElementById('im');
imObj.style.position = 'absolute';//脱离文档流
imObj.style.left = window.event.clientX - imObj.offsetWidth + 'px';
imObj.style.top = window.event.clientY + 'px';
}
}
</script>
</head>
<body>
<img src="4.jpg" id="im" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {
width: 300px;
height: 30px;
text-align: center; /*居中*/
font-size: 20px;
cursor: pointer;
}
</style>
<script type="text/javascript">
onload = function () {
var tds = document.getElementById('tb').getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
//添加属性并赋值
tds[i].setAttribute('score', (i + 1) * 10);
tds[i].onclick = function () {
//获取该属性中的值
alert(this.getAttribute('score'));
};
}
};
</script>
</head>
<body>
<table border="1" id="tb">
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
document.getElementById('btnAll').onclick = function () {
var inputs = document.getElementsByName('name');
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;//选中
}
}
document.getElementById('btnCA').onclick = function () {
var inputs1 = document.getElementsByName('name');
for (var i = 0; i < inputs1.length; i++) {
inputs1[i].checked = false;
}
}
document.getElementById('btnOp').onclick = function () {
var inputs2 = document.getElementsByName('name');
for (var i = 0; i < inputs2.length; i++) {
inputs2[i].checked = !inputs2[i].checked;
}
}
}
</script>
</head>
<body>
<input type="button" name="name1" value="全选" id="btnAll" />
<input type="button" name="name1" value="取消全选" id="btnCA" />
<input type="button" name="name1" value="反选" id="btnOp" />
<input type="checkbox" name="name" value="1" />a
<input type="checkbox" name="name" value="1" />b
<input type="checkbox" name="name" value="1" />c
<input type="checkbox" name="name" value="1" />d
<input type="checkbox" name="name" value="1" />e
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
var datas = {
"mv/1-1.jpg": ["mv/1.jpg", "老牛", "163cm"],
"mv/2-1.jpg": ["mv/2.jpg", "老马", "165cm"],
"mv/3-1.jpg": ["mv/3.jpg", "老蒋", "150cm"]
}
//根据这个键值对,创建图片标签,并显示图片
for (var key in datas) {
//创建图片
var imObj = document.createElement('img');
imObj.src = key;
imObj.setAttribute('path', key);
imObj.style.marginRight = '10px';//距离右边10px
document.getElementById('dvSmall').appendChild(imObj);
imObj.onmouseover = function () {
var dvb = document.getElementById('dvBig');
dvb.style.position = 'absolute';
dvb.style.display = 'block';
dvb.style.left = this.offsetLeft + 'px';
dvb.style.top = this.offsetTop + this.offsetHeight + 'px';
dvb.getElementById('imBig').src = datas[this.getAttribute('path')][0];
document.getElementById('spName').innerText = datas[this.getAttribute('path')][1];
document.getElementById('spHeight').innerText = datas[this.getAttribute('path')][2];
}
}
}
</script>
</head>
<body>
<div id="dvSmall">
</div>
<div id="dvBig" style="background-color: orange; border: 1px solid green; width: 630px; display: none">
大头像:<br />
<img src="#" alt="Alternate Text" id="imBig" />
姓名:<span id="spName"></span><br />
身高:<span id="spHeight"></span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
// g代表全局模式,i代表忽略大小写,m代表多行匹配
var reg = /\d{5}/g;
var msg = '中国移动:10086,中国联通:10010,中国电信:10000';
//alert(reg.test(msg));//判断是否匹配
while ((result = reg.exec(msg)) != null) {//exec()找到了匹配的文本,则返回一个结果数组,否则返回null
alert(result);
}
</script>
</head>
<body>
</body>
</html>
将中间的手机号隐藏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var msg = '样中科:13888888888苏坤:13999999999小虎:13111111111';
var result = msg.replace(/(\d{3})(\d{4})(\d{4})/g, '$1****$3');//第一组$1 第三组$3
alert(result);
</script>
</head>
<body>
</body>
</html>
切掉前后空格:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var txt = ' 哈哈哈 ';
function trimString(msg) {
return msg.replace(/^\s+/, '').replace(/\s+$/, '');
}
var result = trimString(txt);
alert(result);
</script>
</head>
<body>
</body>
</html>
密码强弱:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function checkPwd(msg) {
var lvl = 0;
if (msg.match(/[0-9]/)) {
lvl++;
}
if (msg.match(/[a-zA-Z]/)) {
lvl++;
}
if (msg.match(/[^a-zA-Z0-9]/)) {
lvl++;
}
if (msg.length < 6) {
lvl--;
}
return lvl;
}
onload = function () {
document.getElementById('txt').onkeyup = function () {//键抬起的时候
var tds = document.getElementById('tb').getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
tds[i].style.backgroundColor = '';
}
if (this.value.length > 0) {
var num = checkPwd(this.value);
if (num == 3) {
tds[2].style.backgroundColor = 'blue';
tds[1].style.backgroundColor = 'blue';
tds[0].style.backgroundColor = 'blue';
} else if (num == 2) {
tds[0].style.backgroundColor = 'yellow';
tds[1].style.backgroundColor = 'yellow';
} else if (num <= 1) {
tds[0].style.backgroundColor = 'red';
}
}
}
}
</script>
</head>
<body>
<input type="text" name="name" value="" id="txt" style="width: 300px; height: 30px; border: 1px solid green; font-size: 25px" />
<table border="1" style="width: 300px; height: 30px; font-size: 25px; text-align: center" id="tb">
<tr>
<td>弱</td>
<td>中</td>
<td>强</td>
</tr>
</table>
</body>
</html>
window.event.keyCode 对应键的值
搜索栏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
setInterval(function () {
document.getElementById('txt').onchange();
}, 1000);
onload = function () {
var keyWords = {
"传智播客": ["传智播客java视频", "传智播客.net视频", "传智播客php视频"],
"杨忠科": ["杨忠科的视频", "杨忠科的微博", "杨忠科的邮箱"],
"杨": ["杨利伟", "杨振宁", "杨过"],
"杨忠": ["杨忠科", "杨忠学", "杨忠爱国"]
};
document.getElementById('txt').onchange = function () {
//判断用户输入的内容在键值对中是否存在
if (keyWords[this.value]) {
//判断是否有层,有就删除掉
if (document.getElementById('dv')) {
document.body.removeChild(document.getElementById('dv'));
}
//开始创建层
var dvObj = document.createElement('div');
dvObj.id = 'dv';
dvObj.style.width = '300px';
dvObj.style.position = 'absolute';
dvObj.style.border = '1px solid red';
dvObj.style.left = this.offsetLeft + 'px';
dvObj.style.top = this.offsetHeight + this.offsetTop + 'px';
document.body.appendChild(dvObj);
//创建可以显示文件的标签(循环创建)
for (var i = 0; i < keyWords[this.value].length; i++) {
var pObj = document.createElement('p');
pObj.innerText = keyWords[this.value][i];
pObj.style.cursor = 'pointer';
pObj.style.margin = '5px';
pObj.onmouseover = function () {
this.style.backgroundColor = 'red';
}
pObj.onmouseout = function () {
this.style.backgroundColor = '';
}
document.getElementById('dv').appendChild(pObj);
}
}
}
}
</script>
</head>
<body>
请输入搜索内容:
<input type="text" name="name" value="" id="txt" style="width: 300px; height: 25px; font-size: 20px; border: 1px solid green" />
<input type="button" name="name" value="百度一下" id="btn" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
//firefox下检测状态改变只能用oninput,且需要用哪个addEventListener来注册事件
if (/msie/i.test(navigator.userAgent))//ie浏览器
{
document.getElementById('txt').onpropertychange = handle;
}
else {//非ie浏览器
document.getElementById('txt').addEventListener('input', handle, false);
}
function handle() {
document.getElementById('msg').innerHTML = '输入的文字长度为:' + document.getElementById('txt').value.length;
}
}
</script>
</head>
<body>
<span id="msg"></span>
<input type="text" name="name" value="" id="txt" />
</body>
</html>