省市选择
<head>
<title>省市选择</title>
<script type ="text/javascript">
var data = { "北京": ["北京市"], "上海": ["上海市"], "天津": ["天津市"], "重庆": ["重庆市"], "香港": ["香港特别行政区"], "澳门": ["澳门特别行政区"], "台湾": ["台湾"], "浙江省": ["杭州", "湖州", "嘉兴", "宁波", "绍兴", "温州", "丽水", "金华", "衢州", "海宁", "余姚"], "广东省": ["广州", "韶关", "惠州", "梅县", "汕头", "深圳", "珠海", "佛山", "肇庆", "湛江", "江门", "东莞", "顺德", "中山", "台山", "潮州", "茂名"], "湖北省": ["武汉", "孝感", "黄石", "咸宁", "江陵", "沙市", "宜昌", "恩施", "十堰", "襄樊", "鄂州", "丹江口", "神农架"], "江苏省": ["南京", "镇江", "苏州", "南通", "扬州", "盐城", "徐州", "淮阳", "连云巷", "常州", "无锡", "张家港", "泰州"], "河北省": ["石家庄", "保定", "张家口", "承德", "唐山", "廊坊", "沧州", "衡水", "邢台", "邯郸", "秦皇岛"], "山西省": ["太原", "大同", "阳泉", "榆次", "长治", "晋城", "临汾", "离石", "运城", "忻州"], "内蒙古": ["呼和浩特", "包头", "乌海", "集宁", "赤峰"], "辽宁省": ["沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "朝阳"], "吉林省": ["长春市", "吉林市", "延吉市", "四平市", "通化市", "白城市", "辽源市", "公主岭市", "梅河口"], "黑龙江省": ["哈尔滨市", "齐齐哈尔市", "牡丹江市", "佳木斯市", "绥化市", "黑河市", "加格达奇", "伊春市", "鸡西市", "大庆市"], "安徽省": ["合肥市", "蚌埠市", "芜湖市", "淮南市", "马鞍山市", "安庆市", "宿州市", "阜阳市", "屯溪", "滁州", "淮北市", "铜陵市", "六安市", "黄山市"], "福建省": ["福州", "厦门市", "宁德市", "莆田市", "泉州市", "漳州市", "龙岩", "三明市", " 建阳市"], "江西省": ["南昌市", "九江市", "庐山", "上饶市", "抚州", "宜春市", "吉安市", "赣州市", "景德镇市", "萍乡市"], "山东省": ["济南市", "青岛市", "淄博市", "德州市", "烟台市", "潍坊市", "济宁市", "泰安市", "临沂市", "聊城市", "威海市", "龙口市", "青州", "枣庄市", "曲阜市"], "河南省": ["郑州市", "安阳市", "新乡市", "许昌市", "平顶山市", "南阳市", "开封市", "洛阳市", "商丘市", "焦作市", "鹤壁市", "漯河市", "濮阳市", "周口市", "三门陕", "驻马店市"], "湖南省": ["长沙市", "湘潭", "株洲", "衡阳", "郴州", "常德", "益阳", "绥宁", "岳阳市", "吉首", "怀化市"], "广西壮族自治区": ["南宁市", "柳州", "桂林市", "梧州", "玉林市", "北海"], "海南省": ["海口"], "四川省": ["成都市", "攀枝花市", "自贡", "绵阳市", "南充", "达县", "万县", "宜宾", "乐山", "西昌市", "雅安市", "泸州", "遂宁"], "贵州省": ["贵阳市", "遵义市", "安顺市", "都匀", "六盘水市"], "云南省": ["昆明市", "曲靖市", "楚雄", "思茅"], "西藏自治区": ["拉萨市"], "陕西省": ["西安市", "延安", "榆林", "渭南", "商州", "安康", "汉中", "宝鸡市", "铜川", "咸阳"], "甘肃《VIJK》省": ["兰州市", "武威", "张掖市", "酒泉市", "天水", "嘉峪关市"], "宁夏回族自治区": ["银川市", "石嘴山市"], "青海省": ["西宁市", "格尔木"], "新疆维吾尔自治区": ["乌鲁木齐市", "石河子市", "喀什市", "伊宁", "克拉玛依市"] };
function loadProv() {
var province = document.getElementById("province");
for (var key in data) {
var option = document.createElement("option");
option.value = key;
option.innerText = key;
province.appendChild(option);
}
}
function provChange() {
var province = document.getElementById("province");
var city = document.getElementById("city");
//先清除旧的市列表
//city.options.length = 0;//方法一
//方法二之不完整删除写法：
// for (var i = 0; i < city.childNodes.length; i++) {//遍历Select的所有子结点，从前往后删，每次都会有”漏网之鱼“，因为有重新排号的问题。
// var option = city.childNodes[i];
// city.removeChild(option);
// }
//方法二之完整删除写法：
for (var i = city.childNodes.length - 1; i >=0; i--) {//从后往前删就没有顺序的问题了.注：若写成var i = city.childNodes.length ;会出现：Microsoft JScript 运行时错误: 不支持此接口
var option = city.childNodes[i];
city.removeChild(option);
}
var provinceName = province.value;
if (provinceName == "none") {//如果选择的是请选择省，则不显示内容。
return;
}
var cities = data[provinceName]; //取出的内容：["杭州", "湖州", "嘉兴", "宁波", "绍兴", "温州", "丽水", "金华", "衢州", "海宁", "余姚"]
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i];
option.innerText = cities[i];
city.appendChild(option);
}
}
</script>
</head>
<body onload ="loadProv()">
<select id ="province"οnchange="provChange()">
<option value ="none">请选择省</option>
</select>
<select id ="city"></select>
</body>
</html>
歌曲选择（全选，全不选，反选）
<head>
<title></title>
<script type="text/javascript">
function selectAll() {
var playlist = document.getElementById("playlist");
var inputs = playlist.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
input.checked = "checked";
}
}
}
function deselectAll() {
var playlist = document.getElementById("playlist");
var inputs = playlist.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
input.checked = "";
}
}
}
function reverseSelect() {
var playlist = document.getElementById("playlist");
var inputs = playlist.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "checkbox") {
//input.checked = !input.checked; //其实用这一条代码就可以实现
// if (input.checked == "checked") {
// input.checked = "";
if (input.checked == true) {
input.checked = false;
}
else {
input.checked = true; //input.checked = "checked";
}
}
}
}
</script>
</head>
<body>
<div id ="playlist">
<input type ="checkbox"id="p1" /><label for ="p1">孤单北半球</label>
<input type ="checkbox"id="p2" /><label for ="p2">花都开好了</label>
<input type ="checkbox"id="p3" /><label for ="p3">Gee</label>
<input type ="checkbox"id="p4" /><label for ="p4">我和草原有个约定</label>
<p>
<input type ="button"οnclick="selectAll()"value="全选" />
<input type ="button"οnclick="deselectAll()"value="全不选" />
<input type ="button"οnclick="reverseSelect()"value="反选" />
</p>
</div>
</body>
</html>
权限选择
<head>
<title></title>
<script type ="text/javascript">
function moveSelected(selectSrc, selectDest) {//selectSrc是源select, selectDest是目标select
// for (var i = 0; i < selectSrc.childNodes.length; i++) {
for (var i = selectSrc.childNodes.length-1; i >=0; i--) {
var option = selectSrc.childNodes[i];
if (option.selected == true) {
selectSrc.removeChild(option);
option.selected = false;
selectDest.appendChild(option);
}
}
}
function moveAll(selectS, selectD) {
}
</script>
</head>
<body>
<select id ="select1"multiple ="multiple"style="float:left;width:15%;height:100px">
<option>添加</option>
<option>删除</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="float:left;width:15%">
<input style ="float:left;width:100%"type ="button"value=">"οnclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))"/>
<input style ="float:left;width:100%"type ="button"value="<"οnclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))" />
<input style ="float:left;width:100%"type ="button"value=">>"οnclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))" />
<input style ="float:left;width:100%"type ="button"value="<<"οnclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))" />
</div>
<select id ="select2"multiple="multiple"></select>
</body>
</html>
金额文本框（只能输入特定的数字，输入时左对齐，输入完成右对齐并加上千分号，只能粘贴数字）
<head>
<title></title>
<script type ="text/javascript">
function numKeyDown() {
var k = window.event.keyCode;
return isVilidNum(k);
}
function isVilidNum(k) {
return ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 190) || (k == 110) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40));
}
function commafy(n) {
var re = /\d{1,3}(?=(\d{3})+$)/g;//g：global 表示全部
var n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) { return s1.replace(re, "$&,") + s2; });
return n1;
}
function numPaste() {
var text = clipboardData.getData("Text");//text与Text没区别
for (var i = 0; i < text.length; i++) {
var asc = text.charCodeAt(i);
if (!isVilidNum(asc)) {
return false;
}
}
}
</script>
</head>
<body>
<input type ="text" οnpaste="return numPaste()" style ="ime-mode:disabled"οnkeydοwn="return numKeyDown()" οnfοcus="this.style.textAlign='left';this.value=this.value.replace(/,/g,'');"οnblur="this.style.textAlign='right';this.value=commafy(this. value)" />
<p>用快捷键不能粘贴，用鼠标可以。这是为什么呢？</p>
</body>
</html>
正则表达式
<head>
<title></title>
<script type ="text/javascript">
// var regex = /.+@.+/;
// alert(regex.test("afsaf@Bfdk.com"));
// alert(regex.test("jdsak.com"));
var s = "495807986@QQ.com";
var regex = /(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + ",服务器：" + RegExp.$2);
alert(RegExp.$1 );//取得第一组
alert(RegExp.$2 );//取得第二组
</script>
</head>
<body>
<p>
<br />JS中的正则表达式<br />
JavaScript中创建正则表达式类的方法：</p>
<ul>
<li>var regex = new RegExp("\\d{5}")或者var regex = /\d{5}/</li>
<li>/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了。</li>
</ul>
<p>
RegExp对象的方法：
（1）text(str)判断字符串Str是否匹配正则表达式，相当于C#中的IsMatch<br />
var regex =/.+@.+/;
alert(regex.test("afsaf@Bfdk.com"));
alert(regex.test("jdsak.com"));
（2）exec(str)进行搜索匹配，返回值为匹配结果。
（3）compile编译表达式，提高运行速度。
<br /><br /><br /><br /><br /><br /><br />
String对象中提供了一些与正则表达式相关的方法，相当于对于RegExp类的包装，简化调用：<br />
match(regexp),相当于调用exec<br />
var s ="432@163.com";
var regex=/(.+)@(.+)/;
var match = s.match(regex);
alert(RegExp.$1 + ",服务器："+RegExp.$2);
</p>
</body>
</html>
经校验后Submit提交
<head>
<title></title>
</head>
<body>
<form id ="form1" action ="OK.aspx" οnsubmit="if(document.getElementById('name').value.length<=0){alert('姓名不能为空(在点击Submit后Form的事件被触发，在Onsubmit中可以进行数据校验，数据有问题，返回False即可取消提交）');return false}">
<input type ="text" id ="name" />
<input type ="button"value="OK" id="btn1" οnclick="alert('蜜桃成熟时')" />
<input type ="button" value ="触发OK按钮" onclick ="document.getElementById('btn1').click()" />
<input type ="button" value ="提交(相当于点击了Submit按钮）" onclick ="document.getElementById('form1').submit()" />
<input type ="submit" />
<p>在点击Submit后Form的事件被触发，在Onsubmit中可以进行数据校验，数据有问题，返回False即可取消提交）</p><br />
<input type = "text" value ="鼠标离开即提交表单"id="name2" οnblur="document.getElementById('form1').submit()" />
</form>
</body>
</html>
搜索框效果
<head>
<title></title>
<script type="text/javascript">
function inputBlur(keyWord) {
if (keyWord.value.length <= 0) {
keyWord.value = "输入搜索关键字";
keyWord.style.color = "red";
}
}
function inputFocus(keyWord) {
if (keyWord.value == "输入搜索关键字") {
keyWord.value = '';
keyWord.style.color = 'blue';
}
}
</script>
</head>
<body>
<input type ="text" οnblur="inputBlur(this)" οnfοcus="inputFocus(this)"id="keyWord"value="输入搜索关键字"style="color:Gray" />
</body>
</html>
点击小图显示详细资料
<head>
<title></title>
<script type = "text/javascript">
var data = { "zhanghanyunsmall.jpg": ["zhanghanyun.jpg", "张含韵", "165cm"], "林依晨small.jpg": ["林依晨.jpg", "林依晨", "170cm"], "刘亦菲small.jpg": ["刘亦菲.jpg", "刘亦菲", "175cm"] };
function loadImg() {
for (var smallimgpath in data) {
var smallImg = document.createElement("img");
smallImg.src = smallimgpath;
smallImg.setAttribute("a1", data[smallimgpath][0]);
smallImg.setAttribute("a2", data[smallimgpath][1]);
smallImg.setAttribute("a3", data[smallimgpath][2]);
smallImg.onmouseover = function () {
document.getElementById("detailImg").src = this.getAttribute("a1");
document.getElementById("detailName").innerHTML = this.getAttribute("a2");
document.getElementById("detailHeight").innerHTML = this.getAttribute("a3");
var details = document.getElementById("details");
// details.style.top = window.event.clientY;
// details.style.left = window.event.clientX;
details.style.top = "300px";
details.style.left = "300px";
details.style.display = "";
};
document.body.appendChild(smallImg);
}
}
function hideDetails() {
var details = document.getElementById("details");
details.style.display = "none";
}
</script>
</head>
<body onload ="loadImg()">
<div style ="display:none;position:absolute;" id = "details">
<img id ="detailImg" src="" />
<p id = "detailName"></p>
<p id ="detailHeight"></p>
<p><input type ="button" value ="close" onclick ="hideDetails()" /></p>
</div>
</body>
</html>
随鼠标移动五角星由空心变实心。
<head>
<title></title>
<script type ="text/javascript">
function indexOf(arr,element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function initEvent() {
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
for (var i = 0; i < tds.length; i++)
{
var td = tds[i];
td.style.cursor = "pointer";
td.onmouseover = function () {
var rating = document.getElementById("rating");
var tds = rating.getElementsByTagName("td");
var index = indexOf(tds, this);
for (var i = 0; i <= index; i++) {
tds[i].innerText = "★";
}
for (var i = index + 1; i <tds.length; i++) {
tds[i].innerText = '☆';
}
};
}
}
</script>
</head>
<body onload ="initEvent()">
<table id ="rating">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
☆★☆★☆★☆★
</body>
</html>
球队选择
<head>
<title></title>
<script type ="text/javascript">
function initEvent() {
var basketball = document.getElementById('basketball');
var lis = basketball.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function () {
var basketball = document.getElementById('basketball');
var lis = basketball.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
var li = lis[i];
if (li == this) {
li.style.background = "red";
}
else {
li.style.background = "green";
}
}
};
li.onclick = function () {
this.style.fontSize = 30;//注：此功能未实现。
}
}
}
</script>
</head>
<body onload ="initEvent()">
<ul id ="basketball">
<li>湖人</li>
<li>黄蜂</li>
<li>火箭</li>
<li>马刺</li>
<li>小依</li>
</ul>
<p>每一次学习的记忆痕迹太浅，根本没有刻入自己的大脑皮层。这样的学习，根本就是谋财害命！</p>
</body>
</html>
GetElementById
<head>
<title></title>
<script type ="text/javascript">
function btnClick() {
// alert(textbox.value);
//还可以样写，不管在不在Form中都可用
var txt = document.getElementById(textbox);
alert(textbox.value);
}
function btnClickboss() {
// alert(textboss.value);//错误
// alert(form1.textboss.value);//正确
var txt = document.getElementById(textboss);
alert(textboss.value);
}
</script>
</head>
<body>
<input type ="text" id ="textbox" />
<input type ="button"value="press" οnclick="btnClick()" />
<!--<form action="HTMLPage新闻代码1.htm"id ="form1">
<input type ="text" id ="textboss" />
<input type ="button" value ="whatever you write anything to out" onclick ="btnClickboss()" />
</form>-->
<input type ="text" id ="textboss" />
<input type ="button" value ="whatever you write anything to out" onclick ="btnClickboss()" />
</body>
</html>
GetElementByName
<head>
<title></title>
<script type ="text/javascript" >
var radios = document.getElementsByName("gender");
function btnClick() {
// //在JS中for(var radio in radios)不像C#中的foreach遍历每个元素，而是遍历的Key（属性）
// for (var radio in radios) {
// alert(radio.value);
// }
for (i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
function btnClickss() {
var inputs = document.getElementsByTagName("input'");//多了一个逗号。
for ( i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "hello";
}
}
</script>
</head>
<body>
<input type="radio"name ="gender"value ="boy" />boy
<input type ="radio"name="gender"value="girl" />girl
<input type ="radio"name = "gender"value="protect" />mimi
<input type ="button"value ="click"οnclick="btnClick()" />
<br />
<input type = "text" />
<input type = "text" />
<input type = "text" />
<input type = "text" />
<br />
<input type = "button" value ="bytagname"onclick ="btnClickss()" />
</body>
</html>
GetElementsByTagName
<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];
input.onclick = btnClick;
}
}
function btnClick() {
// alert("you have pressed it ");
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//window.event.srcElement,获得引发事件的控件。
if (input == window.event.srcElement) {
input.value = "cry";
}
else {
input.value = "smile";
}
}
}
</script>
</head>
<body onload ="initEvent()">
<input type ="button" value = "smile" />
<input type ="button" value = "smile" />
<input type ="button" value = "smile" />
<input type ="button" value = "smile" />
</body>
</html>
Reg延时（请仔细阅读协议，还有10秒）
<head>
<title>注册</title>
<script type ="text/javascript">
var leftSeconds = 10;
var intervalId;
function CountDown() {
var btnReg = document.getElementById("btnReg");
if (btnReg) {//如果网页速度非常慢的话，可能定时器运行时控件还不有加载
if (leftSeconds <= 0) {
btnReg.value = "accept";
btnReg.disabled = ""; //btnReg.disabled=false;
clearInterval(intervalId); //stop timer
}
else {
btnReg.value = "请仔细阅读协议（还有" + leftSeconds + "秒）";
leftSeconds--;
}
}
}
intervalId = setInterval("CountDown()", 1000);
</script>
</head>
<body>
<textarea rows ="30";cols="100">
</textarea>
<input id ="btnReg" type ="button" value ="同意" disabled ="disabled" />
</body>
</html>
Write
<head>
<title></title>
<script type ="text/javascript" >
document.write("<a href='HTMLPage定时器走码灯.htm'>定时器走码灯</a>");
</script>
</head>
<body>
<br />
焟炬成灰泪始干。
<script type = "text/javascript" >
document.write("<font color =red>红色</font>");
</script>
<input type ="button" value ="I want to say" onclick ="document.write('<font color =red>what else can I do,believe life have much possible</font>')" />
<input type ="button" value ="I want to say" onclick ="document.write('belive life have more possible')" />
<font color = 'blue'>千锤万打出深山，烈火焚烧浑不怕，要留清白在人间。</font>
<script type = "text/javascript" >
document.write("<font color =blue>hello is blue</font>");
</script>
</body>
</html>
点超链接变色
function linkOnClick() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link == this) {
link.style.background = "blue";
}
else {
link.style.background = "white";
}
}
window.event.returnValue = false;//超链接不生效
}
</script>
</head>
<body onload ="initEvent()">
<a href ="HTMLPage加法计算器.htm">加法</a>
<a href ="HTMLPage开灯关灯.htm">开灯</a>
<a href ="HTMLPage动态产生超链接.htm">生成超链接</a>
<a href ="HTMLPage新闻代码1.htm">林依晨新闻</a>
</body>
</html>
行变色
<head>
<title></title>
<script type ="text/javascript">
function initEvent() {
var tableMain = document.getElementById("tableMain");
var trs = tableMain.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
var tr = trs[i];
tr.onclick = TrOnClick;
tr.style.cursor = "pointer";
}
}
function TrOnClick() {
var tableMain = document.getElementById("tableMain");
var trs = tableMain.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
var tr = trs[i];
if(tr == this){
tr.style.background="red";
}
else{
tr.style.background="gray";
}
}
}
</script>
</head>
<body onload ="initEvent()">
<table id = "tableMain">
<tr><td>喜羊羊</td><td>100</td></tr>
<tr><td>慢羊羊</td><td>80</td></tr>
<tr><td>懒羊羊</td><td>50</td></tr>
<tr><td>红太狼</td><td>90</td></tr>
<tr><td>灰太狼</td><td>88</td></tr>
<tr><td>软绵羊</td><td>00</td></tr>
</table>
</body>
</html>
动态产生超链接
<head>
<title></title>
<script type ="text/javascript">
function createlink() {
var divmain = document.getElementById("divmain");
var link = document.createElement("a");
link.href = "HTMLPage动态创建元素.htm";
link.innerText = "动态创建元素网"; //link.innerHTML = "动态创建元素网";也可以。
divmain.appendChild(link);
}
</script>
</head>
<body>
<div id ="divmain"></div>
<input type ="button" value ="动态产生超链接" onclick ="createlink()" />
</body>
</html>
动态创建表格
<head>
<title></title>
<script type ="text/javascript">
function loadData() {
var data ={"新闻代码":"HTMLPage新闻代码1.htm","加法计算器":"HTMLPage加法计算器.htm","动态产生超链接":"HTMLPage动态产生超链接.htm"};
var tablelinks = document.getElementById("tablelinks");
for (var key in data) {
var value = data[key];
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerText = key;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = "<a href = '"+ value +"'>" + value + "</a>";
tr.appendChild(td2);
tablelinks.appendChild(tr); //将这行改为tablelinks.tBodies[0].appendChild(tr);解决IE6, IE7不兼容问题
}
}
</script>
</head>
<body>
<p>动态产生的元素，查看源代码是看不到的，通过DebugBar--Dom--文档---HTML 可以看到</p>
<table id ="tablelinks"></table>
<!--<tbody></tbody> 解决IE6,IE7不兼容Table.appendChild("tr")问题-->
<input type ="button" value ="加载数据" onclick ="loadData()" />
</body>
</html>
动态创建元素
<head>
<title></title>
<script type ="text/javascript">
function btnClick() {
var divMain = document.getElementById("divMain");//获得层
var input = document.createElement("input");//创建一个标签为input的元素（这时还没有添加到任何元素上，所以没有显示）
input.type ="button";
input.value = "我是动态产生的";
divMain.appendChild(input);//将动态产生的元素添加到divMain层
}
function createInput() {
var divMan = document.getElementById("divMan");
divMan.innerHTML = "<input type = 'button' value ='按钮'/>"; //将<div id ="divMan"></div>修改为<div id ="divMan"> <input type = 'button' value ='按钮'/> </div>
}
</script>
</head>
<body>
<div id ="divMain"></div>
<input type ="button" value ="点击" onclick ="btnClick()" />
<br />
<a href ="HTMLPage新闻代码1.htm" id ="link1">传<font color ="Blue">智</font>播客</a>
<input type ="button" value = "inner*" onclick ="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);" />
<input type ="button"value ="修改innertext"onclick ="document.getElementById('link1').innerText ='林依晨'"; />
<input type ="button"value ="修改格式t"onclick ="document.getElementById('link1').innerHTML ='<font color = Red>林依晨</font>'"; />
<input type ="button"value ="修改innerHTML"onclick ="document.getElementById('link1').innerHTML ='<font color = Blue >有啊有啊，好像又没有了</font>'"; />
<br />
<br />
<br />
<br />
<div id ="divMan"></div>
<input type = "button" value ="动态创建" onclick ="createInput()" />
</body>
</html>
隔行变色
<head>
<title></title>
<script type ="text/javascript">
function showIt() {
var tableMain = document.getElementById("tableMain");
var trs = tableMain.getElementsByTagName("tr"); //var trs = tableMain.getElementsByTagName("td");全部变色了
for (var i = 0; i < trs.length; i++) {
if (i % 2 == 0) {
var tr = trs[i];
tr.style.background = "yellow";
}
else {
var tr = trs[i];
tr.style.background = "Blue";
}
}
}
</script>
</head>
<body > <!--不用点按钮运行即变色<body onload ="showIt()">-->
<table id = "tableMain">
<tr><td>喜羊羊</td><td>100</td></tr>
<tr><td>慢羊羊</td><td>80</td></tr>
<tr><td>懒羊羊</td><td>50</td></tr>
<tr><td>红太狼</td><td>90</td></tr>
<tr><td>灰太狼</td><td>88</td></tr>
<tr><td>软绵羊</td><td>00</td></tr>
</table>
<input type ="button" value = "变色" onclick ="showIt()" />
</body>
</html>
加法计算器
<head>
<title></title>
<script type="text/javascript">
function calcClick() {
var value1 = document.getElementById("txt1").value; //不要错写成var value1 = document.getElementById(txt1).value;
var value2 = document.getElementById("txt2").value;
value1 = parseInt(value1, 10);//JS是弱类弄，parseInt将这符串解析成Int
value2 = parseInt(value2, 10);
document.getElementById("txtresult").value = value1 + value2;
}
</script>
</head>
<body>
<input type ="text" id = "txt1" />+<input type ="text" id ="txt2" />
<input type ="button" οnclick="calcClick()" value = "=" /><input type ="text" id ="txtresult" readonly ="readonly" />
</body>
</html>
焦点在的文本框位置样式设置
<head>
<title></title>
<script type = "text/javascript">
function initEven() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "text") {//只有文本框才控制
input.onfocus = inputOnFocus;
input.onblur = inputOnBlur;
}
}
}
function initEven2() {
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"; };
}
}
}
function inputOnFocus() {
this.style.background = "blue";
}
function inputOnBlur() {
this.style.background = "green";
}
</script>
</head>
<body onload ="initEven2()">
<input type = "text" /><input type = "text" /><input type = "text" /><input type = "text" /><input type = "text" /><input type = "text" /><input type = "text" />
<input type = "text" /><input type = "text" /><input type = "text" /><input type = "text" /><input type = "text" /><input type = "text" /><input type = "text" />
<input type = "text" value ="情女怨"/><input type = "text" /><input type = "text" />
<input type ="button" value ="love" />
</body>
</html>
开/关灯效果
<head>
<title></title>
<style type ="text/css">
.day
{
background-color :Blue;
}
.night
{
background-color :Black;
}
</style>
<script type = "text/javascript">
function switchLight() {
var btnSwitch = document.getElementById("btnSwitch");
if (document.body.className == "day") {
document.body.className = "night";
btnSwitch.value = "开灯";
}
else {
document.body.className = "day";
btnSwitch.value = "关灯";
}
}
</script>
</head>
<body class ="night">
<input type = "button" id ="btnSwitch" value ="开灯" onclick ="switchLight()" />
<input type ="button" value ="征战" onclick ="this.style.background = 'red'" />
<input type ="button" value ="错误写法" onclick ="this.style='background-color: red'" />
<input type ="text" value = "你是我的我有爱了世界完成了"onblur = "alert('第一个文本框失去了焦点')" />
<input type ="text" value ="找出差距，正视缺点"onfocus = "alert('第二个文本框得到了焦点')" /><br />
</body>
</html>
控制层Div（点击Button即展开详细内容）
<head>
<title></title>
<script type ="text/javascript">
function toggleDiv(cb) {
var div1 = document.getElementById("div1");
if (cb.checked) {
div1.style.display ="";
}
else {
div1.style.display = "none";
}
}
</script>
</head>
<body>
<input type ="checkbox" id ="cbshow" onclick ="toggleDiv(this)" /><label for ="cbshow">显示基本信息</label>
<div id ="div1" style="display:none">学习态度：专注、热忱 QQ:495807986 Tel:15072453852</div><br />
<br /><br /><br /><br />
<a href ="HTMLPage开灯关灯.htm" οnmοuseοut="document.getElementById('baiduDiv').style.display='none'"οnmοuseοver="document.getElementById('baiduDiv').style.display=''">开灯</a>
<div id = "baiduDiv" style="display:none;border-color:Blue;border-style:dotted;border-width:1px">
开灯：<font color ="red">林依晨</font>有啊有啊好像又没有了<a href ="HTMLPage开灯关灯.htm">开灯吧</a>
</div>
</body>
</html>
评分控件
<head>
<title></title>
<script type ="text/javascript">
function indexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return - 1;
}
function initEvent() {
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td"); //取得tableRating下的所有td,不处理其它table
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onclick = TdOnClick;
td.style.cursor = "pointer";//让鼠标放到td上显示手形状的光标。
}
}
function TdOnClick() {
// this.style.background = "red";//这条代码用不用都一样。
var tableRating = document.getElementById("tableRating");
var tds = tableRating.getElementsByTagName("td");
var index = indexOf(tds, this);
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";
}
}
</script>
</head>
<body onload ="initEvent();alert(indexOf([1,3,5,4],5))">
<table id = "tableRating">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
评论（无刷新）
<head>
<title></title>
<script type ="text/javascript">
function AddComment() {
var nickname = document.getElementById("nickname").value;
var comment = document.getElementById("comment").value;
// alert(nickname);
// alert(comment); 检查一下值是否取到
var tableComment = document.getElementById("tableComment");
var tr = document.createElement("tr");
var tdNickName = document.createElement("td");
tdNickName.innerText = nickname;
tr.appendChild(tdNickName);
var tdComment = document.createElement("td");
tdComment.innerText = comment;
tr.appendChild(tdComment);
tableComment.tBodies[0].appendChild(tr);
}
</script>
</head>
<body>
这也太聪明了吧.有啊有啊，好像又没有了。
<p>评论区</p>
<table id = "tableComment">
<tbody>
<tr><td>黄江苗：</td><td>我抢到沙发啦！</td></tr>
</tbody>
</table>
昵称：<input id = "nickname" type ="text" /><br />
<textarea rows = "10" cols = "10" id ="comment"></textarea><br />
<input type ="button" value = "评论" onclick ="AddComment()" /><br /><br />
<p>事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的Onclick事件会被触发，B的Onclick也会被触发。触发的顺序是“由内而外”。</p>
<table onclick ="alert('table Onclick')">
<tr onclick ="alert('tr Onclick')"><td onclick ="alert('td Onclick')"><p onclick ="alert('点一下P被触发)">这里是P</p></td></tr>
</table>
</body>
</html>
This的用法
<head>
<title></title>
<script type ="text/javascript">
function btnclick1() {
alert(this.value);//在事件响应函数调用的函数里就不能通过this来获得事件对象了
}
function btnclick2(btn) {
alert(btn.value);//在事件响应函数中将This传过来就可以
}
function btnclick3(btn) {
alert(event.srcElement.value); //This 和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象；事件冒泡。
}
function btnClick6() {
alert(this.value);
}
</script>
</head>
<body>
<p>this指当前发生事件的对象，这样用不行：<input type ="button" value ="click1" onclick ="btnclick1()" /> function btnclick1() {
alert(this.value);//在事件响应函数调用的函数里就不能通过this来获得事件对象了
}</p>
<input type ="button" value ="click" onclick ="alert(event.srcElement.value)" />
<input type ="button" value ="click" onclick ="alert(this.value)" />
<input type ="button" value ="click1" onclick ="btnclick1()" />
<input type ="button" value ="click2" onclick ="btnclick2(this)" />
<input type ="button" value ="click3" onclick ="btnclick3()" />
<input type ="button" id = "btn6" value ="click6" onclick ="btnclick6()"/><!--在这里onclick ="btnclick6()"要不要都可以-->
<input type ="button" id = "btn7" value ="click7" onclick ="btnclick6()" />
<script type ="text/javascript">
var btn6 = document.getElementById("btn6");
btn6.onclick = btnClick6;
//onclick ="btnclick6()"相当于，btn7.onclick = function(){btnClick6();}
//也就是onclick的响应函数是一个匿名函数，匿名函数的实现就是调用btnClick6().
//面试中this也是经常考的，只有在响应函数里才能拿到this，在被调用的函数是拿不到的。
</script>
</body>
</html>
我要新闻代码
<head>
<title></title>
<style type="text/css"> div{font-size:12px;font-family:arial}.baidu{font-size:14px;line-height:24px;font-family:arial} a,a:link{color:#0000cc;}
.baidu span{color:#6f6f6f;font-size:12px} a.more{color:#008000;}a.blk{color:#000;font-weight:bold;}</style>
</head>
<body>
林依晨的资料
<script language="JavaScript" type="text/JavaScript" src="http://news.baidu.com/ns?word=title%3A%C1%D6%D2%C0%B3%BF&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script>
依晨好靓
</body>
</html>
修改样式
<head>
<title></title>
<script type ="text/javascript">
function initEvent() {//遍历所有input控件，添加onblur响应函数。
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onblur = inputOnBlur;//设置inputOnBlur函数为input元素的onblur事件的响应函数。
}
}
function inputOnBlur() {//焦点失去的时候进行据的检查。
//inputOnBlur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件控件的对象。
if (this.value.length <= 0) {//检查文本框中文字的长度，如果小于等于0说明是空的。
this.style.background = "red";
}
else {
this.style.background = "green";
}
}
</script>
</head>
<body onload ="initEvent()">
<input type ="text" /><br />
<input type ="text" /><br />
<input type ="text" /><br />
<input type ="text" /><br />
<input type ="text" /><br />
<input type ="text" /><br />
</body>
</html>
<head>
<title></title>
<style type ="text/css">
.day
{
background-color :Green;
}
.night
{
background-color:Black;
}
</style>
</head>
<body>
<div id = "divTest" class = "day">
<font color ="gray" >搅拌搅拌巧克力，搅拌搅拌巧克力，搅拌好吃的巧克力</font>
林依晨：有啊有啊，好像又没有了，感觉怎么样？还不赖，什么？还不赖。
</div>
<input type ="button" value ="黑夜无效要用ClassName"onclick ="document.getElementById('divTest').class = 'night'" />
<input type ="button" value ="黑夜"onclick ="document.getElementById('divTest').className = 'night'" />
</body>
</html>
clipboardData(复制粘贴设置)
<head>
<title></title>
<script type ="text/javascript" >
function modifyClipboard() {
var txt = clipboardData.getData('Text');
txt = txt + "..本文章来自舒适城埼夺.文章来源：" + location.href;
clipboardData.setData('Text', txt);
}
</script>
</head>
<!--<body oncopy ="alert('禁止复制');return false;">-->
<body oncopy ="setTimeout('modifyClipboard()'),100">
<input type = "button"value="share this page to you" οnclick="clipboardData.setData('Text','I found funny film'+location.href);alert('already 将内容放入粘贴板，请粘贴。');" />
<input type ="button"value ="分享本页给好友" οnclick="clipboardData.setData('Text','我发现已经好玩的网页，很黄很翰力'+location.href);alert('已将地址放到粘贴板中，快粘贴吧');" />
这些东本不能复制
<input type ="text" value ="这是我的文章，你想要就自己打，想复制没门" />
<br />
请输入手机号码：<input type ="text" />
<br />
请再次手工输入：<input type ="text" onpaste ="alert('为安全起见手工输入别复制');return false "/>
<br />
本页面上的内容都不能复制，请输入手机号码文本框可粘贴，请再次手工输入文本框不得粘贴。
</body>
</html>
option optgroup radio
<head>
<title></title>
<script type ="text/javascript" >
function bodymousedown() {
alert('我说，我不怕辛苦。');
alert('心里有花能怒放');
}
</script>
</head>
<body οnmοusedοwn="bodymousedown()">
<form action = "">
<input type ="text" />
<input type ="checkbox" />huangrong
<input type ="button" value = "注册" />
<input type = "submit" value ="提交" />
<input type = "file" />
<!--<input type = "image" src = "lin/lin" />-->
<input type = "password" />
<input type = "radio" />
<input type = "text" size = "100" value = "蓉儿" maxlength ="5" readonly="readonly" />
<input type = "checkbox" checked ="checked"/>
<br />
<input type = "radio" name = "gender" />男
<br />
<input type = "radio" name = "gender" />女
<br />
<input type = "radio" name = "gender" />保密
<br />
<input type = "radio" name = "drink" />水密桃汁
<br />
<input type = "radio" name = "drink" />百事可乐
<br />
<input type = "radio" name = "drink" />珍珠奶茶
<select >
<option value = "1">北京</option>
<option value = "2"selected= "selected" >湖北</option>
<option value = "3">上海</option>
</select>
<select size="4"multiple ="multiple" >
<option >北京</option>
<option >湖北</option>
<option >上海</option>
</select>
<select name ="country" size ="10">
<optgroup label = "Africa">
<option value ="gam">Gambia</option>
<option value ="mad">madagascar</option>
<option value ="namm">Namibia</option>
</optgroup>
<optgroup label = "Europe">
<option value ="fra">france</option>
<option value ="rus">russia</option>
<option value ="uk">UK</option>
</optgroup>
<optgroup label = "NOrth America">
<option value ="can">canada</option>
<option value ="mex">mexico</option>
<option value ="usa"> USA</option>
</optgroup>
</select>
<textarea cols ="100"rows ="10"></textarea>
</form>
</body>
</html>
确实要离开此页吗
<head>
<title></title>
<script type = "text/javascript" >
// showModelesDialog('Dialog.htm');//被拦截
// btn.value='ok';//未定义
</script>
</head>
<body onload ="btn.value='ok';" οnbefοreunlοad="window.event.returnValue='确定要离开吗？离开文章将丢失';" >
<input type = "button" id="btn" value ="模拟对话框" onclick =" showModelesDialog('Dialog.htm')" />
<input type ="text" />
<textarea cols ="20" rows ="30"></textarea>
</body>
</html>
Updata，禁止访问页面
<head>
<title></title>
</head>
<body>
<input type ="button" value = "本网页面地址" onclick ="alert(location.href)" />
<input type ="button" value="走马灯网" onclick = "location.href ='HTMLPage走马灯.htm'" />
<input type ="button" value="update" onclick = "window.location.reload()" /> <!--刷新页面-->
<input type = "button" value = "点击" onclick ="if(window.event.ctrlKey){alert('按下了CTRL');}else{alert('普通点击')}" />
<a href ="HTMLPageDom1.htm"onclick ="alert('禁止访问');">不能访问朵朵还是访问了</a>
<a href ="HTMLPageDom1.htm"onclick ="alert('禁止访问');window.event.returnValue=false;">不能访问朵朵</a>
<form action ="HTMLPageDom1.htm" >
<input type ="submit" value ="submit" onclick ="alert('something wrong of the data');window.event.returnValue=false;" />
</form>
</body>
</html>
标题滚动效果（定时器的用应）
<head>
<title>武汉体育中心欢迎你</title>
<script type ="text/javascript" >
function scroll() {
var title = document.title;
var lastChar = title.charAt(title.length - 1);
var leftChar = title.substring(0, title.length - 1);
document.title = lastChar + leftChar;
}
// setInterval("scroll()", 600);//每调用一次setInterval都会产生一个新的定时器，并且旧的不会自动停止，所以看起来越来越快。
</script>
</head>
<body>
<input type ="button"value="start scroll" οnclick="timerID=setInterval('scroll()', 300)" />
<input type ="button"value ="stop scroll(error)" onclick ="clearInterval(setInterval('scroll()', 300))" />
<input type ="button"value ="stop scroll" onclick ="clearInterval(timerID)" />
</body>
</html>
关联事件（双击）
<head>
<title></title>
<script type="text/javascript">
function liting() {
alert('我是李婷');
}
function huangjiangmiao(){
alert('我是黄江苗小皇帝');
}
</script>
</head>
<body>
<input type ="button" οnclick="document.οndblclick=liting" value ="关联事件一：liting" />
<input type ="button" οnclick="document.οndblclick=huangjiangmiao" value ="关联事件二：黄江苗" />
</body>
</html>
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
