JS学习第一课
<script>
function 事件名字(){var 代称=document.getElementById("标签id“)
代称.style.css
代称.style.css
......
}
</script>
鼠标点击 鼠标放上去 鼠标离开等效果执行事件名字
alert:弹出提示框 alert("内容");
if(条件){结果}
else{结果}
confirm var 代称=confirm(“问题”)
if(代称==true)
{结果}
else{结果} 会给出两个选项是和否
this:正在执行的这个元素
Obtn[i].onclick=function(){
this.className='active' 把正在点击的 这个按钮变成active对应的属性
var n1=parseInt(oTex1.value)
var n2=parseInt(oTex2.value)
if(isNaN(n1)){
alert('您输入的第一个数字有误')
}
else if(isNaN(n2)){
alert('您输入的第二个数字有误')
}
else{
alert(n1+n2) parseInt将字符串转换成数字 isNAN 判断是否不是一个数字
<script type="text/javascript">
function show(a,b){return a+b}
var a=show(6,8)
alert(a)
</script> return:返回值 在哪里调用就在那里返回 可以用来做计算
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
function show(){
var result=0;
for(i=0;i<arguments.length;i++){
result+=arguments[i]
}
return result;
}
var a=show(1,5,8,5,7)
alert(a) arguments:数组 不论show里面有几个参数 利用一个for循环 将里面 的值全部相加
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
function css(obj,name,value){
if(arguments.length==2){return obj.style[name]}
else{obj.style[name]=value}
}
window.onload=function(){
var Odiv=document.getElementById('div1')
alert(css(Odiv,'width'))
css(Odiv,'background','green')
}
</script> css(Odiv,'width')里面只有两个的是获取 css(Odiv,‘width’,‘200px’)里面有三个的是设置样式 这里利用一个if else
在一个函数里实现获取和设置样式这两个功能
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
#div1{width: 200px;height: 100px;background: red;}
</style>
<script type="text/javascript">
window.onload=function(){var Odiv=document.getElementById('div1')
if(Odiv.currentStyle){alert(Odiv.currentStyle.width)}
else{alert(getComputedStyle(Odiv,File).width)}
}
</script>
</head>
<body>
<div id="div1"></div> 获取非行间样式 由于兼容性问题 在JS里常用一个if判断解决这个尴尬的问题
function getstyle(obj,name){
if(obj.currentStyle){return obj.currentStyle[name]}
else{return getComputedStyle(obj,frameElement)[name]}
}
window.onload=function(){var Odiv=document.getElementById('div1')
alert(getstyle(Odiv,'width'))
} 做一个函数专门解决这个问题 就不用每次写if else 直接调用这个函数 注意 像border background这样的复合样式不能取出来 而像width backgroundcolor这样 的单一样式就可以取出来
arr.sort(function(n1, n2){
return n1-n2;} 将数组中的数字按照从小到大排列
数字钟用图片做,从0到9这十张图片。用for循环让图片自动变化。用new date 获取当前时间,再将时分秒获取出来组成一个六位的字符串,让其对应。这里要建立一个函数,使个位数的变成0加上这个数。charAt兼容所有。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>延迟框制作</title>
<style type="text/css">
div{float: left;margin: 10px;}
#div1{width: 200px;height: 200px;background:brown;}
#div2{width: 400px;height: 400px;background: greenyellow;display: none;}
</style>
<script type="text/javascript">
window.onload=function(){
var Odiv1=document.getElementById('div1')
var Odiv2=document.getElementById('div2')
var timer=null;
Odiv1.onmouseover=Odiv2.onmouseover=function(){
clearTimeout(timer);
Odiv2.style.display='block'
}
Odiv1.onmouseout=Odiv2.onmouseout=function(){
timer=setTimeout(function(){
Odiv2.style.display='none'
},500)
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html> 延迟提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function GetByClass(aparent,aclass){
var aEle=aparent.getElementsByTagName('*')
var aResult=[]
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==aclass){
aResult.push(aEle[i])
}
}
return aResult;
}
window.onload=function(){
var oUl=document.getElementById('ul1')
var oBox=GetByClass(oUl,'box')
for(i=0;i<oBox.length;i++){
oBox[i].style.background='red'
}
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li class="box"></li>
</ul>
</body>
</html> 建立一个专门的函数来获取class 这里是用classname获取元素
JS课程链接:http://www.howzhi.com/course/4170/?ref=cbc