1：点击文本框 文字隐藏
<body>
<input type="text" placeholder="请输入用户名"/>
<input type="text" onfocus="if(this.value=='请输入用户名')this.value=''" onblur="if(this.value=='')this.value='请输入用户名'" value="请输入用户名"/>
</body>
2：点击全选跟反选功能
<body>
<p>
<label><input type="checkbox" onclick="checkAll(this)" id="checkall">全选</label>
<label><input type="checkbox" onclick="objectAll(this)" id="checkall">反选</label>
</label>
</p>
<p><label><input type="checkbox" name="coursename" value="1">小明</label>
<label><input type="checkbox" name="coursename" value="2">小牛</label>
<label><input type="checkbox" name="coursename" value="3">小杨</label>
<label><input type="checkbox" name="coursename" value="4">白羊</label>
<label><input type="checkbox" name="coursename" value="5">姓名</label>
<label><input type="checkbox" name="coursename" value="6">人民</label>
</p>
<script type="text/javascript">
/*全选*/
function checkAll(obj){
var courseName = document.getElementsByName("coursename");
if(obj.checked){//判断当前全选选中
for(var i=0;i<courseName.length;i++){
courseName[i].checked = true;
}
}else{
for(var i=0;i<courseName.length;i++){ courseName[i].checked = false;
}
}
};
/*反选*/
function objectAll(obj){
var courseName = document.getElementsByName("coursename");
if(obj.checked){
for(var i=0;i<courseName.length;i++){
if(courseName[i].checked){
courseName[i].checked = false;
}else{
courseName[i].checked = true;
}
}
}else{
for(var i=0;i<courseName.length;i++){
if(courseName[i].checked){
courseName[i].checked = false;
}else{
courseName[i].checked = true;
}
}
}
}
</script>
</body>
3：省市区级联
<body onload="tm_init_pronince()">
<select id="province" onchange="tm_city_change(this)"></select>
<select id="city" onchange="tm_areas_change(this)"></select>
<select id="area"></select>
<script type="text/javascript">
function tm_init_pronince(){
var selectDom = document.getElementById("province");
var arr = [{"id":1001,"name":"广东省"},{"id":1002,"name":"湖北省"}];
/*var html = "<option value=''>--请选择--</option>";
for(var i=0;i<arr.length;i++){
html += "<option value='"+arr[i].id+"'>"+arr[i].name+"</option>";
}
selectDom.innerHTML = html; */
var optionEmpty = document.createElement("option");
optionEmpty.value = "";
optionEmpty.text = "请选择";
selectDom.appendChild(optionEmpty);
for(var i=0;i<arr.length;i++){
var option = document.createElement("option");
option.value = arr[i].id;
option.text = arr[i].name;
selectDom.appendChild(option);
}
};
//城市数据
var cityDatas = {
"1001":"100101#中山,100102#广州,100103#河源",
"1002":"100201#武汉,100202#太远,10023#十堰"
};
var areasDatas = {
"100101" :"10010101#紫金,10010102#龙川",
"100102" :"10010201#连平,10010202#和平",
"100201" :"10020101#源城,10020102#东源,10020103#北京"
};
//1:了解数据层级接口
//2:javascript元素创建，定义和追加
function tm_city_change(obj){
var value = obj.value;
var datas = cityDatas[value];
var cityDom = document.getElementById("city");
cityDom.innerHTML = "";
var optionEmpty = document.createElement("option");
optionEmpty.value = "";
optionEmpty.text = "请选择";
cityDom.appendChild(optionEmpty);
if(datas){
var citys = datas.split(",");
for(var i=0;i<citys.length;i++){
var option = document.createElement("option");
var v = citys[i].split("#");
option.value = v[0];
option.text = v[1];
cityDom.appendChild(option);
}
}
};
function tm_areas_change(obj){
var value = obj.value;
var datas = areasDatas[value];
var areaDom = document.getElementById("area");
areaDom.innerHTML = "";
var optionEmpty = document.createElement("option");
optionEmpty.value = "";
optionEmpty.text = "请选择";
areaDom.appendChild(optionEmpty);
if(datas){
var areas =areasDatas[value].split(",");
for(var i=0;i<areas.length;i++){
var option = document.createElement("option");
var v = areas[i].split("#");
option.value = v[0];
option.text = v[1];
areaDom.appendChild(option);
}
}
};
</script>
</body>
4：鼠标移到文本框表色 凸显可观效果
<style>
.tm_hover:hover{border:2px solid red;}
</style>
<body onload="init(border:2px solid #141414)">
<form>
<input class="tm_hover" type="text">
<input class="tm_hover" type="password">
<select class="tm_hover"></select>
<textarea class="tm_hover"></textarea>
</form>
<script type="text/javascript">
function init(color){
var form = document.forms[0];
var elements = form.elements;//获取所有的表单元素
for(var i=0;i<elements.length;i++){
var e = elements[i];
e.onfocus = function(){
this.style.border = color;
}
e.onblur = function(){
this.style.border = "";
}
}
}
</script>
</body>
5：页面前进后退
<body>
<input type="button" onclick="goForward()" value="前进"/>
<input type="button" onclick="goBack()" value="后退"/>
<!--<button>前进</button>
<button>前进xxxx</button>-->
<script type="text/javascript">
/*前进*/
function goForward(){
window.history.forward();
}
/*后退*/
function goBack(){
window.history.back();
}
</script>
</body>
6：页面关闭
<body>
<input type="button" onclick="closeWin()" value="关闭浏览器"/>
<script type="text/javascript">
/*关闭浏览器*/
function closeWin(){
window.close();
}
</script>
</body>
7：页面加载
<style>
#loading{z-index:1;left:0px;top:0px;display:none;width:100%;position:absolute;height:100%;background:gray;}
</style>
<body>
<div id="loading">
<br><br>页面加载中，请等待......
</div>
<input type="button" onclick="tm_submit()" value="提交表单"/>
<script type="text/javascript">
function tm_submit(){
var loadingDom = document.getElementById("loading");
loadingDom.style.display = "block";//取消loading的隐藏
window.location.reload();//重新加载当前页面.
}
</script>
</body>
8：页面跳转
<body>
<a href="back.html">跳转到back.html页面</a>
<input type="button" value="跳转到back.html页面" onclick="tm_back()">
<br>
<hr>
<a href="back.html" target="_blank">跳转打开新页面到back.html页面</a>
<input type="button" value="跳转到back.html页面" onclick="tm_open()">
<script type="text/javascript">
/*window.location.href = "页面"*/
function tm_back(){
window.location.href = "back.html";
};
function tm_open(){
window.open("back.html");
}
</script>
</body>
9：页面登录时间可用网站限时抢购
<body>
<div id="timer"></div>
<script type="text/javascript">
var h = 0,m = 0 ,s = 0;
init();
function init(){
window.setInterval(function(){
s++;
if(s==60){
s = 0;
m++;
}
if(m==60){
m = 0;
h++;
}
document.getElementById("timer").innerHTML = "您已经登陆了:<br>"+h+"小时"+m+"分钟"+s+"秒";
},1000);
}
</script>
</body>
10：div拖动（窗口拖动）
<style>
#box{border:1px solid #ccc;position:absolute;width:480px;height:240px;}
#box h4{margin:0px;padding:3px;background:#141414;color:#fff;height:32px;line-height:32px;font-size:12px;cursor:move}
</style>
<body onload="init()">
<div id="box" style="left:200px;top:100px;width:480px;height:240px;">
<h4 id="title">这是标题</h4>
</div>
<script type="text/javascript">
//onmousedown,onmouseover onmouseup onmousemove onmousepress
function $(id){
return document.getElementById(id);
};
function init(){
//鼠标按下去
var titleDom = $("title");
/*第一种*/
titleDom.onmousedown = mousedown;//鼠标按下去的时候
document.onmousemove = mousemove; //鼠标移动的事件
document.onmouseup = mouseup;//鼠标松开的事件
var boxDom = $("box");
var width = parseInt(boxDom.style.width);
var height = parseInt(boxDom.style.height);
var bodyWidth = getWidth();
var bodyHeight = getHeight();
var newTop = (bodyHeight - height)/2;
var newLeft = bodyWidth /2 - width / 2;
boxDom.style.top = newTop+"px";
boxDom.style.left = newLeft+"px";
/*第二种*/
/*
titleDom.onmousedown = function(){
mousedown();
};
document.onmousemove = function(){
mousemove();
}; //鼠标移动的事件
document.onmouseup = function(){
mouseup();
};//鼠标松开的事件
*/
}
var l = 0,t=0,x=0,y=0;
var isOver = false;
function mousedown(event){
var e = event || window.event;//为了兼容ie和火狐
//var e = (event) ? event : ((window.event) ? window.event : null);
var boxDom = $("box");
x = e.clientX;//鼠标所在的x坐标
y = e.clientY;//鼠标所在的y坐标
l = parseInt(boxDom.style.left);//距离浏览器左边的位置left
t = parseInt(boxDom.style.top);//距离浏览器顶部的位置top
isOver = true;
};
function mousemove(event){
if(isOver){
var e = event || window.event;//为了兼容ie和火狐
//var e = (event) ? event : ((window.event) ? window.event : null);
var newLeft = l + e.clientX - x;//新的左边距
var newTop = t + e.clientY - y;//新的顶部边距
var boxDom = $("box");
boxDom.style.left = newLeft+"px";
boxDom.style.top = newTop+"px";
}
}
function mouseup(event){
if(isOver){
isOver = false;
}
}
function getHeight() {
return window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body.clientHeight;
};
function getWidth() {
return window.innerWidth || document.documentElement && document.documentElement.clientWidth || document.body.clientWidth;
}
</script>
</body>
11：弹出层居中
<style>
#box{border:1px solid #ccc;position:absolute;}
#box h4{margin:0px;padding:3px;background:#141414;color:#fff;height:32px;line-height:32px;font-size:12px;cursor:move}
</style>
<body onload="init()">
<div id="box" style="left:200px;top:100px;width:480px;height:240px;">
<h4 id="title">这是标题</h4>
</div>
<script type="text/javascript">
//onmousedown,onmouseover onmouseup onmousemove onmousepress
function $(id){
return document.getElementById(id);
};
function init(){
var boxDom = $("box");
var width = parseInt(boxDom.style.width);
var height = parseInt(boxDom.style.height);
var bodyWidth = getWidth();
var bodyHeight = getHeight();
var newTop = (bodyHeight - height)/2;
var newLeft = bodyWidth /2 - width / 2;
boxDom.style.top = newTop+"px";
boxDom.style.left = newLeft+"px";
}
function getHeight() {
return window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body.clientHeight;
};
function getWidth() {
return window.innerWidth || document.documentElement && document.documentElement.clientWidth || document.body.clientWidth;
}
</script>
</body>
12：图片延时加载
<body onload="init();">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img lazy_src="1.jpg" src="2.jpg" width="150" height="100" id="img"/>
<script type="text/javascript">
function init() {
setTimeout("checkHeight()",100);
}
function checkHeight(){
var pic = document.getElementById("img");
//获取滚动条距离顶部的位置
var stop = document.documentElement.scrollTop;
//获取浏览器的可见高度
var cheight = document.documentElement.clientHeight;
var top = pic.offsetTop;//获取图片距离最左上角的top值
if(stop+cheight < top){
//如果滚动条还未到可见区域,定时任务继续工作
setTimeout("checkHeight()",100);
}else{
pic.src = pic.getAttribute("lazy_src");
//pic.src = pic.attributes["lazy_src"].value;
}
}
</script>
</body>
13：CSS3通过Javascript事件的方式实现旋转
<style>
#img,#divbox{border-radius:50%;padding:0px;margin:0px;border:0px;display:block;overflow:hidden;}
.box{
-webkit-transform:rotate(99deg);
-moz-transform:rotate(99deg);
transform:rotate(99deg);
}
</style>
<body>
<div class="box" style="width:200px;height:200px;background:red;">xxxxxxxxxxxxxx</div>
<div class="box" style="width:200px;height:200px;background:green;">xxxxxxxxxxx</div>
<div id="divbox" style="margin:80px auto;background:red;width:300px;overflow:hidden;"><img src="1.jpg" id="img" width="300" height="300"></div>
<input type="button" value="顺时针旋转" onclick="goRate(1)"/>
<input type="button" value="逆时针旋转" onclick="goRate(0)"/>
<script type="text/javascript">
var deg = 0;
var timer = null;
function goRate(flag){
var imgDom = document.getElementById("img");
clearInterval(timer);
timer = setInterval(function(){
if(flag==1){
deg++;
}else{
deg--;
}
imgDom.style.webkitTransform = "rotate("+deg+"deg)";//谷歌
imgDom.style.mozTransform = "rotate("+deg+"deg)";//火狐
imgDom.style.transform = "rotate("+deg+"deg)";//其他浏览
},10);
}
</script>
</body>
14：图片的放大扭曲
<body style="text-align:center;padding:50px;">
<img src="1.jpg" id="img" width="400" height="400" style="border-radius:400px;">
<input type="button" value="放大" onclick="goRate(1)"/>
<input type="button" value="缩小" onclick="goRate(0)"/>
<script type="text/javascript">
var x = 10;
var y = 10;
var timer = null;
function goRate(flag){
var imgDom = document.getElementById("img");
clearInterval(timer);
timer = setInterval(function(){
if(flag>0){
x++;
}else{
y++;
}
//imgDom.style.transform = "scale("+x+","+y+")";//放大缩小
imgDom.style.transform = "skew("+x+"deg,"+y+"deg)"//图片的扭曲
},10);
}
</script>
</body>
15：arguments动态参数
<body>
<input type="button" onclick="test('小明')" value="传入一个参数">
<input type="button" onclick="test('小龙','小芳')" value="传入二个参数">
<input type="button" onclick="test('小心','小山羊','小兔')" value="传入三个参数">
<script type="text/javascript">
function test(){
var length = arguments.length;
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
</script>
</body>
浙公网安备 33010602011771号