第一个JS特效:鼠标提示框
鼠标移入到input时,让div1显示。鼠标移出input时,div1隐藏。
<style>
#div1{
width: 200px;
height: 100px;
background-color: #cccccc;
border: 1px solid #999;
display: none;
}
</style>
<body>
<input type="checkbox" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'"/>
<div id="div1">
为了您的安全。。。。
</div>
兼容性问题:最好使用getElementById();
<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'"
onmouseout="document.getElementById('div1').style.display='none'"/>
<div id="div1">
为了您的安全。。。。
</div>
函数:
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div id="div1" onmouseover="document.getElementById('div1').style.width='300px';
document.getElementById('div1').style.height='300px';
document.getElementById('div1').style.background='green';"
onmouseout="document.getElementById('div1').style.width='100px';
document.getElementById('div1').style.height='100px';
document.getElementById('div1').style.background='red';"></div>
</body>
使用函数:
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script>
function toGreen(){
document.getElementById('div1').style.width='300px';
document.getElementById('div1').style.height='300px';
document.getElementById('div1').style.background='green';
}
function toRed(){
document.getElementById('div1').style.width='100px';
document.getElementById('div1').style.height='100px';
document.getElementById('div1').style.background='red';
}
</script>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
重用:变量(给东西取了一个别名)
<script>
function toGreen(){
var odiv=document.getElementById('div1');
odiv.style.width='300px';
odiv.style.height='300px';
odiv.style.background='green';
}
function toRed(){
var odiv=document.getElementById('div1');
odiv.style.width='100px';
odiv.style.height='100px';
odiv.style.background='red';
}
</script>
第二个JS特效:换肤。
<head>
<meta charset="UTF-8">
<title></title>
<link id="l1" rel="stylesheet" href="css/css1.css"/>
</head>
<body>
<input type="button" value="皮肤1" onclick="skin1()"/>
<input type="button" value="皮肤2" onclick="skin2()"/>
</body>
<script>
function skin1(){
var ol=document.getElementById('l1');
ol.href='css/css1.css';
}
function skin2(){
var ol=document.getElementById('l1');
ol.href='css/css2.css';
}
</script>
注意:
- 任何标签都可以加id.
第三个JS特效:当点击的时候,如果div是显示的,隐藏掉。如果div是隐藏的,显示出来。
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 200px;
background: #cccccc;
display: none;
}
</style>
<script>
function showHide(){
var oDiv=document.getElementById('div1');
if(oDiv.style.display=='block'){
oDiv.style.display='none';
}else{
oDiv.style.display='block';
}
}
</script>
</head>
<body>
<input type="button" value="显示隐藏" onclick="showHide()"/>
<div id="div1"></div>
</body>
为a链接加JS。
<a href="javascript:alert('a')">链接</a>
html怎么写js就怎么写。唯独class不是,要写成className。
函数传参:
- 改变背景颜色
- 改变Div的任意样式
1.操纵属性的第二种方式。2.将属性名作为参数传递。
- style与className
函数传参:占一个位置,你往里传什么它就是什么。
什么时候使用传参---函数里定不下来的东西。
<style>
#div1{
width: 100px;
height: 100px;
border: 1px black solid;
}
</style>
<script>
function setColor(color){
var oDiv=document.getElementById('div1');
oDiv.style.background=color;
}
</script>
</head>
<body>
<input type="button" value="变绿" onclick="setColor('green');"/>
<input type="button" value="变黄" onclick="setColor('yellow');"/>
<input type="button" value="变黑" onclick="setColor('black');"/>
<div id="div1"></div>
</body>
js中用.的地方都可以用[]代替。[]能做的事.不一定。
[]:要修改的属性不固定的时候用。将属性名作为参数传递。
<script>
function setText(name){
var Otxt=document.getElementById('txt1');
//第一种操作属性的方法
/* Otxt.value='sdwfewfwfwegwegwefw';*/
//第二种操作属性的方法.比第一个方法好在具体的属性名字是可变的。
Otxt[name]='abcdefghijk';
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="button" value="改变文字" onclick="setText('value')"/>
</body>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
function change(name,value){
var oDiv=document.getElementById('div1');
oDiv.style[name]=value;
}
</script>
<body>
<input type="button" value="变宽" onclick="change('width','400px')"/>
<input type="button" value="变高" onclick="change('height','400px')"/>
<input type="button" value="变绿" onclick="change('background','green')"/>
<div id="div1"></div>
style与className:
样式优先级:*<标签<class<ID<行间
元素.style.属性=XXX 是修改行间样式。之后再修改className不会有效果。
对于同一个div,要么从头到尾操作的都是class,要么从头到尾都操作style。
行间事件:
把事件写在行间。比如onclick=" ".写行间事件危险,不建议写。
提取行间事件:
<input type="button" value="按钮" id="btn1"/>
<script>
var oBtn=document.getElementById('btn1');
function abc(){
alert('a');
}
oBtn.onclick=abc;
</script>
匿名函数:最大的好处就是不用取名字。
<input type="button" value="按钮" id="btn1"/>
<script>
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
alert('a');
};
1.
function 名字()
{
...
}
oBtn.onclick=名字;
2.
oBtn.onclick=function(){
...
}
<head>
<meta charset="UTF-8">
<title></title>
<script>
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
alert('a');
};
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1"/>
</body>
把script代码放进head中,会出现错误。因为不知名的按钮加事件。底下的东西压根就没加载进来。
window.onload在页面加载完再执行。
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
alert('a');
};
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1"/>
</body>
以上代码就正确了。btn1早就加载进来了。
别加行间样式,别加行间js事件。
获取一组元素(数组):getElementsByTagName.了解数组。
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
margin: 10px;
float: left;
}
</style>
<script>
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
var i=0; //1.初始化
while(i<aDiv.length){ //2.条件
aDiv[i].style.background='red'; //3.语句
i++; //4.自增
/*aDiv[0].style.background='red';
aDiv[1].style.background='red';
aDiv[2].style.background='red';
aDiv[3].style.background='red';
aDiv[4].style.background='red';*/
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
全选不选和反选:
<script>
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv=document.getElementById('div1');
var aCh=oDiv.getElementsByTagName('input');
oBtn1.onclick=function(){
for(var i=0;i<aCh.length;i++){
aCh[i].checked=true;
}
}
oBtn2.onclick=function(){
for(var i=0;i<aCh.length;i++){
aCh[i].checked=false;
}
}
oBtn3.onclick=function(){
for(var i=0;i<aCh.length;i++){
if(aCh[i].checked==true){
aCh[i].checked=false;
}else{
aCh[i].checked=true;
}
}
}
}
</script>
<body>
<input type="button" id="btn1" value="全选"/><br />
<input type="button" id="btn2" value="不选"/><br />
<input type="button" id="btn3" value="反选"/><br />
<div id="div1">
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
</body>
选项卡:
按钮实现:this的使用,先清空所有按钮,再选中当前按钮。
内容的实现:先隐藏所有的Div,再显示“当前”Div js添加index。
this:[object HTMLInputElement]
<style>
#div1 .active{
background: yellow;
}
#div1 div{
width: 200px;
height: 200px;
background: #cccccc;
border: 1px solid #999999;
display: none;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var aBn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
for(var i=0;i<aBn.length;i++){
aBn[i].index=i;
//先让其他按钮都变成className为空
aBn[i].onclick=function(){
for(var i=0;i<aBn.length;i++){
aBn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block'
}
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" value="教育" class="active"/>
<input type="button" value="培训"/>
<input type="button" value="招生"/>
<input type="button" value="出国"/>
<div style="display: block;">1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
</div>
</body>
innerHTML:
<style>
#div1{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<script>
window.onload=function(){
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(){
oDiv.innerHTML=oTxt.value;
}
}
</script>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="设置文字"/>
<div id="div1">
</div>
alert('abc'+12+5+'def');弹出的结果是abc125def.
alert('abc'+(12+5)+'def');弹出的结果是abc17def.
制作简易日历:类似选项卡,只是下面只有一个div.
小知识:input使用.val,而其他标签则使用.innerHTML.
script>
window.onload=function(){
var arr=[
'快过年了,大家可以商量着去哪玩吧~',
'二月啦',
'三月啦'
];
var oDiv=document.getElementById('tab');
var aLi=oDiv.getElementById('li');
var oTxt=oDiv.getElementsByTagName('div')[0];
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
aLi[i].className='';
}
this.className='active';
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>'
}
}
}
</script>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
<h2>1月活动</h2>
<p>快过年了,大家可以商量着去哪玩吧~</p>
</div>
</div>
</body>