zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    mobileSelect学习
    使用qrcode生成二维码
    点点点右边有内容
    搜索框search
    input样式和修改
    art-template模板引擎高级使用
    Nodejs中的路径问题
    异步编程(回调函数,promise)
    在nodejs中操作数据库(MongoDB和MySQL为例)
    MongoDB数据库
  • 原文地址:https://www.cnblogs.com/zhouliang/p/5329227.html
Copyright © 2011-2022 走看看