iframe示例
<body>
<a href="sub/baiyexing.html" target="contentFrame">白夜行 </a>
<a href="sub/goneWithWind.html" target="contentFrame">飘 </a>
<a href="sub/ordinaryWorld.html" target="contentFrame">平凡的世界</a>
<iframe src="sub/baiyexing.html" width="100%" height="500" name="contentFrame"></iframe>
</body>
确定按钮的image类型
<input type="image" src="img/alibaba/btn_reg.gif" name="submit">
setInterval()——图片轮播脚本
<script type="text/javascript">
var currentImg = 1;
var imgChange = setInterval("showImg()",1500);
function showImg(){
var imgEle = document.getElementsByTagName("img")[0];
var maxLength = 4;
if (currentImg < maxLength){
currentImg++;
}else{
currentImg = 1;
}
var path = "img/img" + currentImg + ".PNG";
//document.write(path);
imgEle.setAttribute("src",path);
var spanEles = document.getElementsByTagName("span");
for (var i = 0; i< spanEles.length; i++){
//alert(spanEles[i].innerHTML + " ")
if (i == currentImg-1){
spanEles[i].className = "class1";
}else{
spanEles[i].className = null;
}
}
}
</script>
-----------------------------------------------------------------------
二维数组——省市级联脚本
<script type="text/javascript">
var provList = new Array(3);
provList["广东省"] = ["请选择城市","广州市","深圳市","韶关市","东莞市"];
provList["湖南省"] = ["请选择城市","长沙市","岳阳市","郴州市","衡阳市"];
provList["陕西省"] = ["请选择城市","西安市","宝鸡市","渭南市","铜川市"];
var proEle = document.getElementById("province");
var cityEle = document.getElementById("city");
for (var i in provList){
proEle.add(new Option(i,i),null);
if (i == "广东省"){
for (var j in provList[i]){
cityEle.add(new Option(provList[i][j],provList[i][j]),null);
}
}
}
function changeCity(){
var options = proEle.options;
var selectedtext = options[proEle.selectedIndex].text;
for (var i in provList){
if (i == selectedtext){
cityEle.options.length = 0;
for (var j in provList[i]){
cityEle.add(new Option(provList[i][j],provList[i][j]),null);
}
}
}
}
</script>
setTimeout()——行走的时钟
<script type="text/javascript">
var myTime = setTimeout("walk()",1000);
var divEle = document.getElementsByTagName("div")[0];
var str = "";
function walk(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var currentDate = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if (second < 10){
second = "0" + second;
}
str = year + "-" + month + "-"+ currentDate + " " + hour +":" + minute + ":" + second;
divEle.innerHTML = str;
myTime = setTimeout("walk()",1000);
}
function stopTime(){
clearTimeout(myTime);
}
</script>
计算总价：手动触发change()
$(".minu_btn,.plus_btn").click(function(){
var qtt;
if($(this).attr("class") == "minu_btn"){
//得到数量
qtt = $(this).next().val();
if (parseInt(qtt) > 0){
$(this).next().val(parseInt(qtt) - 1);
//手动触发input的change
$(this).next().change();
}
}else{
qtt = $(this).prev().val();
$(this).prev().val(parseInt(qtt) + 1);
//手动触发change
$(this).prev().change();
}
})
$("#book1qtt, #book2qtt").on("change",function(){
var li = $(this).parents().filter("li");
//单价
var perPrice = parseFloat(li.prev().children().text());
//数量
var qtt = parseInt($(this).val());
//alert(qtt);
//每项商品的总价,保留两位小数
var total = (perPrice * qtt).toFixed(2);
//改变该项商品的总价
li.next().children().html(total);
//改变总计
var b1Total = parseFloat($("#b1Total").text());
var b2Total = parseFloat($("#b2Total").text());
$("#sum").html(b1Total + b2Total);
})
})
movingAdv——滚动广告
<script type="text/javascript">
var advEle = document.getElementById("adv_div");
var initTop;
var initLeft;
window.init;
window.onscroll = movingAdv;
function init(){
initTop = parseInt(document.defaultView.getComputedStyle(advEle,null).top);
initLeft = parseInt(document.defaultView.getComputedStyle(advEle,null).left);
}
function movingAdv(){
var moveTop = document.documentElement.scrollTop;
var moveLeft = document.documentElement.scrollLeft;
advEle.style.top = initTop + moveTop + "px";
advEle.style.left = initLeft + moveLeft + "px";
}
function closeMe(){
advEle.style.display = "none";
}
</script>
正则练习
<!--1. 写出出生日期的正则表达式 如:1992-10-20
2.写出手机号的正则表达式 086-135xxxxxxxx
3.写出15位或18位的身份证号，最后一位可能是x的正则
4..写出邮箱的正则表达式
5.写出年龄的正则：0-130岁之间
6.写出合法月份的正则
7.写出邮编的正则
8.密码不得小于6位且不能全为数字的密码-->
<script type="text/javascript">
function checkText(obj,opt){
var inputText = obj.value;
var regExp;
switch (opt){
case "1":
regExp = /^[\u4e00-\u9fa5]{2,6}$/;
break;
case "2":
//长度大于等于6，不能纯数字
regExp = /^$/;
break;
case "3":
regExp = /^19\d{2}-(1[12]|0{0,1}[1-9])-(0{0,1}[1-9]|[12]\d|3[01])$/;
break;
case "4":
regExp = /^(\d|[1-9]\d|1[012]\d|130)$/;
break;
case "5":
regExp = /^086-135\d{8}$/;
break;
case "6":
regExp = /\w{4,9}@\w{2,5}\.\w{2,5}/;
break;
case "7":
regExp = /^\d{6}$/;
break;
case "8":
regExp = /^(1[12]|0{0,1}[1-9])$/;
break;
case "9":
regExp = /^\d{14,17}[\dX]{1}$/;
break;
}
var tips = obj.nextElementSibling;
var flag = regExp.test(inputText);
tips.innerHTML = flag;
}
</script>
全选或全不选
function selectAll(ele){
$("input[name='cbox']").each(function(){
if($(ele).prop("checked")){
$(this).prop("checked",true);
}else{
$(this).prop("checked", false);
}
})
}
$("input[name='cbox']").click(function(){
if ($("input[name='cbox']:checked").length == $("input[name='cbox']").length){
$("input[name='selectAll']").prop("checked", true);
}else{
$("input[name='selectAll']").prop("checked", false);
}
})
js构造函数——这是用来干嘛的？？
<script type="text/javascript">
function Person(nation,skinColor){
this.nation = nation;
this.skinColor = skinColor;
this.getColor = function(){
return this.skinColor;
}
this.getNation = function (){
return this.nation;
}
}
function Womam(nation,skinColor){
this.gender = "female";
Person.call(this,nation,skinColor);
this.getGender = function(){
return this.gender;
}
}
var wo = new Womam("han","yellow");
//alert(wo.getGender() + " " + wo.getColor() + " " + wo.getNation());
//创建Person和Student函数
function People(name,chinese,math){
this.name = name;
this.chinese = chinese;
this.math = math;
this.getInfo = function(){
return this.name + " " + this.chinese + " " +this.math;
}
}
function Student (name,chinese,math,age){
this.age = age;
People.call(this,name,chinese,math);
this.getAge = function(){
return this.age;
}
}
People.prototype.read = function(){
return this.name + "is reading";
}
Student.prototype = new People();
var stu = new Student("张三",99,89,20);
alert(stu.getInfo() + " " + stu.getAge());
alert(stu.read());
</script>
-------------------------------------------------------
<script type="text/javascript">
var person = new Object();
person.name = "罗小明";
person.age = "20";
person.job = "收银";
person.address = "广州";
person.intro = function (){
document.write(this.name + "<br />" + this.age + "<br />" + this.job + "<br />" + this.address);
}
//person.intro();
var student ={
name : "罗小明",
age : "20",
job : "clerk",
showInfo : function (){
document.write(this.name + "<br />" + this.age + "<br />" + this.job );
},
eat : function(){
document.write(this.name + " 在吃饭<br />");
}
}
// student.eat();
// student.showInfo();
//通过构造函数创建对象
function Emp(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.showInfo = function (){
document.write(this.name + " " + this.age + " " + this.job);
}
}
var e = new Emp("scott","20","manager");
e.showInfo();
Emp.prototype.gender = "male";
Emp.prototype.salary = 5500.00;
Emp.prototype.getSal = function (){
return this.salary;
}
e.age = "19";
alert(e.gender + " " + e.getSal());
</script>
模拟发帖练习
<script type="text/javascript">
$(function(){
$("#showbox").click(function(){
$("#main").css("display","block");
})
//保存头像
var headers = new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
$("#fabu").click(function(){
$("#main").hide();
//获得头像
var index = parseInt(Math.random()*4);
var head = "<img src = 'img/" + headers[index] + "'/>";
//获得标题
var title = "<span class = 'titleSpan'>" + $("#inputTil").val() + "</span>" ;
//获得板块
var type = $("select").find("option:selected").text();
//获得时间
var time = new Date();
var chiT = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
var month = time.get
//将时间和板块信息拼接到span中
var info = "<span>板块：" + type + " 发布时间：" + chiT + "</span>";
//拼接到div中
var fabu = "<div class = 'fabuDiv'>" + head + title + "<br/>" + info + "</div>"
var fabuDiv = $(fabu);
fabuDiv.insertAfter($("#head"));
//清空输入框
$("#inputTil").val("");
$("textarea").val("");
$("select").val("default");
})
});
</script>
广告弹窗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>advertisement</title>
<script type="text/javascript">
window.open("login.html","","width=200px, height=300px");
</script>
</head>
<body>
<input id="closeMe" type="button" value="关闭当前窗口" onclick="javascript:window.close();" />
</body>
</html>
表单验证封装成函数
function isNull(item, msg){
if (item.validity.valueMissing){
item.setCustomValidity(msg);
}else{
item.setCustomValidity("");
}
}
795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
