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{ 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{ 200px;height: 200px;background:brown;}
#div2{ 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

原文地址:https://www.cnblogs.com/zhouliang/p/5329227.html