<!DOCTYPE html>
<html>
<head>
<title>设置一个元素是否可见</title>
<meta charset="utf-8">
</head>
<style type="text/css">
.tips{width:370px;background:#CCC;display:none;}
</style>
<script type="text/javascript">
//定义一个函数
function show_or_hide()
{
//通过id来获取一个元素
var objl =document.getElementById("get_p");
// 这种是行内样式的写法,形如：<p style="display:none;"></p>
if(objl.style.display == 'block')
objl.style.display = 'none';
else
objl.style.display = 'block';
}
</script>
<body>
<!-- 添加点击事件 -->
<input type="button" value="隐藏/显示" onclick="show_or_hide()" title="可以点击我一下">
<p id="get_p" class="tips" >
从前有座山，山上有座庙，庙里有个帅哥写代码
</p>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>鼠标移入移出事件</title>
<meta charset="utf-8">
</head>
<style type="text/css">
#get_input{background:yellow;}
</style>
<script type="text/javascript">
function over_bg_color()
{
var obj = document.getElementById('get_input');
// 这种是行内样式的写法,形如：<p style="background:red;"></p>
obj.style.background='red';
}
function out_bg_color()
{
var obj = document.getElementById('get_input');
obj.style.background='yellow';
}
</script>
<body>
<!-- 添加鼠标移入移出事件 -->
<input id="get_input" type="button" value="隐藏/显示"onmouseover="over_bg_color()" onmouseout="out_bg_color()" >
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>二级菜单</title>
<meta charset="utf-8">
<style type="text/css">
#nav{height:50px;background:red;margin:50px auto 0px;}
a
{
float:left;width:250px;line-height:50px;
text-align:center;color:#FFF;text-decoration:none;
}
#detailed
{
width:250px;height:200px;background:red;
position:relative;border-top:2px solid yellow;
display:none;left:0px;
}
</style>
<script type="text/javascript">
function show_detailed(index)
{
var obj = document.getElementById('detailed');
// 设置元素可见
obj.style.display='block';
var move_left = 250*index-250;
move_left = move_left+"px";//将结果转换成字符串
obj.style.left =move_left;
}
function hide_detailed()
{
var obj = document.getElementById('detailed');
obj.style.display='none';
}
</script>
</head>
<body>
<div id="nav">
<!-- 这种直接在行内为元素添加事件不美观，可以写在JS里面 -->
<a href="#" onmouseover="show_detailed(1)"onmouseout="hide_detailed()"> 首页</a>
<a href="#" onmouseover="show_detailed(2)"onmouseout="hide_detailed()">家电</a>
<a href="#" onmouseover="show_detailed(3)"onmouseout="hide_detailed()">手机</a>
<a href="#" onmouseover="show_detailed(4)"onmouseout="hide_detailed()">付款方式</a>
<a href="#" onmouseover="show_detailed(5)"onmouseout="hide_detailed()">客服</a>
</div>
<div id="detailed">
<a href="#">一</a>
<a href="#">二</a>
<a href="#">三</a>
<a href="#">四</a>
</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>改变物体外观</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:200px;}
#change_box{width:300px;height:300px;background:#CCC;}
</style>
<script type="text/javascript">
function change_color(want_color)
{
var obj = document.getElementById('change_box');
obj.style.background = want_color;
}
function change_size(width_size,height_size)
{
var obj = document.getElementById('change_box');
obj.style.width = width_size+'px';
obj.style.height = height_size+'px';
}
</script>
</head>
<body>
<input type="button" value="变黄" onclick="change_color('yellow')">
<input type="button" value="变绿" onclick="change_color('green')">
<input type="button" value="变红" onclick="change_color('red')">
<input type="button" value="变大" onclick="change_size(500,600)">
<input type="button" value="变小" onclick="change_size(100,200)">
<div id="change_box"></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>JS为元素添加事件</title>
<meta >
<meta charset="utf-8">
</head>
<body>
<input id="btn1" type="button" value="按钮" onclick="abc()" />
<script type="text/javascript">
// 下面这个获取元素的代码要写在该目标 元素的下面
// 因为程序是从上到下执行的，不然的话会报错
var obtn = document.getElementById('btn1');
function abc()
{
alert('这是一个弹窗');//可以是单引号，也可以是双引号
}
//obtn.οnclick=abc;//这种是直接在JS里面为元素添加事件的写法
//这里函数不能加括号
</script>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>全选反选按钮</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:150px;background:#CCC;}
</style>
</head>
<body>
<input type="button" id="btn_all" value="全选"></input>
<input type="button" id="btn_reversed" value="反选"></input>
<input type="button" id="btn_no" value="都不选"></input>
<div id="ware">
<input type="checkbox" ></input><input type="checkbox" ></input>
<input type="checkbox" ></input><input type="checkbox" ></input>
<input type="checkbox" ></input><input type="checkbox" ></input>
</div>
</body>
<script type="text/javascript">
function choose_all()
{
var obj = document.getElementById('ware');
//从一个目标元素中再获取元素
//下面是通过html元素名字来获取，结果是数组
var ch_b = obj.getElementsByTagName('input');
for(var i=0; i <= ch_b.length; i++)
//下面的语句类似于：<input type="checkbox" checked="true"></input>
ch_b[i].checked = true;
}
function choose_no()
{
var obj = document.getElementById('ware');
var ch_b = obj.getElementsByTagName('input');
for(var i=0; i <= ch_b.length; i++)
ch_b[i].checked = false;
}
function choose_reversed()
{
var obj = document.getElementById('ware');
var ch_b = obj.getElementsByTagName('input');
for(var i=0; i <= ch_b.length; i++)
ch_b[i].checked = ( ch_b[i].checked == true )? false:true;
}
//我并没有直接document.getElementById('');这样获取元素
//按理说要先获取元素，再来操作，不然是不行的，
//我也不知道为什么我的这段代码却可以
btn_all.onclick = choose_all;
btn_no.onclick = choose_no;
btn_reversed.onclick = choose_reversed;
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>选项卡</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:150px;}
#xuan_xiang_ka{width:208px;height:350px;}
.title{height:50px;}
.title input{height:50px;width:50px;float:left;border:1px solid #CCC;margin-left:2px;}
.active{background:#5CB85C;}
#content_box{background:yellow;}
#content_box div{display:none;}/*设置子元素不可见*/
</style>
</head>
<body>
<div id="xuan_xiang_ka">
<div class="title">
<input class="active" type="button" value="新闻1"></input>
<input type="button" value="新闻2"></input>
<input type="button" value="新闻3"></input>
<input type="button" value="新闻4"></input>
</div>
<div id="content_box" >
<div style="display:block;">
从前有座山1
</div>
<div>
从前有座山2
</div>
<div>
从前有座山3
</div>
<div>
从前有座山4
</div>
</div>
</div>
</body>
<script type="text/javascript">
var an_niu = document.getElementsByTagName('input');
var temp =document.getElementById('content_box');
var wen_zhang =temp.getElementsByTagName('div');
for(var i=0; i < an_niu.length; i++)
{
an_niu[i].index = i;//为每个按钮添加序号
an_niu[i].onclick = function ()
{
for(var j=0; j < an_niu.length; j++)
{
an_niu[j].className = '';//清除类
wen_zhang[j].style.display = 'none';
}
this.className = 'active';//当前按钮添加活动类
wen_zhang[this.index].style.display ='block';//当前选项卡可见
//思路：在点击一个选项卡之前，把其他的选项卡都影藏，并清除类
//之后再为当前的选项卡添加属性
}
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>innerHTML练习</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:50px;}
div{border:1px solid red;width:260px;height:200px;padding:20px;}
</style>
</head>
<body>
<input id="text1" type="text"></input>
<input id="btn1" type="button" value="设置文字"></input>
<div id="div1">
从前有座山
</div>
</body>
<script type="text/javascript">
var btn1 = document.getElementById('btn1');
var text1 = document.getElementById('text1');
var div1 = document.getElementById('div1');
btn1.onclick = function ()
{
// 让div里面的文字是text里面的文字
div1.innerHTML = text1.value;
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>月历选项卡</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
.ware{background:yellow;padding:15px 0px 15px 15px;width:285px;margin:100px auto;overflow:hidden;}
.month{overflow:hidden;}
span{float:left;width:80px;line-height:80px;text-align:center;font-size:16px;color:#FFF;font-weight:bold; margin-right:15px;margin-bottom:15px; background:#999;}
.tips{background:red;clear:both;width:240px;padding:15px;font-weight:bold;color:#FFF;}
.active{background:#FFF;color:black;}
</style>
</head>
<body>
<div class="ware">
<div class="month">
<span class="active">1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
<span>7</span><span>8</span><span>9</span>
<span>10</span><span>11</span><span>12</span>
</div>
<div id="setText" class="tips">
</div>
</div>
</body>
<script type="text/javascript">
var obj_month = document.getElementsByTagName('span');
var objTips = document.getElementById('setText');
var arr =[
'这个月有元旦',
'我们一起过年吧',
'这个月有38妇女节',
'4月分有什么节日呢？',
'哈哈劳动节快到了',
'可惜儿童节不属于我们',
'貌似有建党节吧',
'这个月有建军节吧么么哒',
'教师节到了，给老师一份祝福吧',
'一起看阅兵式吧',
'光棍节到了，有木有很伤心～',
'圣诞节不是中国的～'
];
// 默认显示第一个月
objTips.innerHTML = '<p>1月活动'+'</p>'+arr[0];
for(var i=0; i < obj_month.length; i++)
{
obj_month[i].index = i;
obj_month[i].onmousemove = function ()
{
for(var j=0; j < obj_month.length; j++)
obj_month[j].className = '';
this.className = 'active';
objTips.innerHTML = '<p>'+(this.index+1)+'月活动'+'</p>'+arr[this.index];
}
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>数组遍历</title>
<meta charset="utf-8">
</head>
<body>
</body>
<script type="text/javascript">
var colorS =['yellow','blue','green','pink','black'];
for( var x in colorS)//x 是下标
{
alert(colorS[x]);
//alert(x);
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>属性用变量代替</title>
<meta charset="utf-8">
<style type="text/css">
body{padding:400px; padding-top:200px;}
#box{width:300px;height:300px;background:yellow;}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="点击我一下下～" id="btn"></input>
</body>
<script type="text/javascript">
var value = 'background';
var oBtn = document.getElementById('btn');
var oBox = document.getElementById('box');
oBtn.onclick = function ()
{
oBox.style[value] = 'red';
//等同于 oBox.style.background = 'red';
}
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>根据参数个数实现相应功能</title>
<meta charset="utf-8">
</head>
<body>
<div id="J_box" style="width:300px;height:240px;background:#CCC;margin:100px;"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementById('J_box');
function css ()
{
if(arguments.length == 2)
alert(arguments[0].style[arguments[1]]);
if(arguments.length == 3)
arguments[0].style[arguments[1]] = arguments[2];
}
css(oBox,'width','800px');
</script>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>获取非行间样式</title>
<meta charset="utf-8">
<style type="text/css">
#J_box{width:300px;height:240px;background:#CCC;margin:100px;}
</style>
</head>
<body>
<div id="J_box"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementById('J_box');
if(oBox.currentStyle)
alert(oBox.currentStyle.width);//IE
else
alert(getComputedStyle(oBox,false).width);//FF
//采用变量的写法 alert(getComputedStyle(oBox , false)['width']);
</script>
</html>
<script type="text/javascript">
// 函数封装
// function getStyle(obj,name)
// {
// if( obj.currentStyle)
// return obj.currentStyle[name];//obj.currentStyle.width;
// else
// return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width;
// }
</script>
提问和评论都可以，用心的回复会被更多人看到
评论
发布评论
相关文章
-
下载的MV去掉原声
下载的MV去掉原声
下载的MV去掉原声 -
JS基础笔记
js基础js中的原始数据类型有六种：number , string , boolean , null, undefined（未定义）, object. var num; console.lo
JS JavaScript 正则表达式 数组 数据 -
原声JS瀑布流加延迟载入
瀑布流 众森美女动漫大集合- 延迟载入+瀑布流(缩小扩大窗体有惊喜哦-IE8下面。360浏览器临时无效，请用chrome看效果。) ...
html i++ 瀑布流 chrome 动漫
