• script常用类型和事件


    常用的类型:
    1.数学:
    Math.ceil():天花板数
    Math.floor():地板数
    Math.round():四舍五入取整数
    Math.random():生成0-1之间的随机数

    2.日期时间:
    var s = new Date();
    var s = new Date(1999,7,23);
    函数:
    getFullYear():
    getMonth():
    getDate():获取日
    getHours()
    getMinutes()
    getSeconds()
    getDay():获取星期
    setFullYear(year,month,day)
    setHours(hour,minute,second,ms)
    toLocaleDateString():转化为本地的日期时间格式字符串

    3.字符串
    length:字符串的长度
    toLowerCase()
    toUpperCase()

    //压缩字符串中的两端空格。
    function Trim(m){
    while((m.length>0)&&(m.charAt(0)==' '))
    m = m.substring(1, m.length);
    while((m.length>0)&&(m.charAt(m.length-1)==' '))
    m = m.substring(0, m.length-1);
    return m;
    }

    indexOf("子串"):第一次出现的位置
    lastIndexOf("子串"):最后一次出现的位置
    以上两个方法,如果父串中不包含子串,则返回-1

    substr("起始位置","截取长度")
    substring("起始位置","结束位置")

    事件:(事件源,事件数据,事件处理程序)
    一、最常用的鼠标事件
    onclick:当鼠标单击的时候,要执行的代码。
    ondblclick:当鼠标双击的时候,要执行的代码。
    onmouseover:当鼠标移动到元素上时,要执行的代码。

    onmouseout:当鼠标从元素上离开时,要执行的代码。
    <示例>光棒效果。
    onmousedown:
    onmouseup:
    <示例>使用这两个事件,用span做出一个模拟的按钮。

    <script>
    function  dodown(dd)
    {
        dd.style.borderColor="black";
        dd.style.backgroundColor="green";
        dd.style.margin="10px 0px 0px 10px"
        }
        function  doup(dd)
    {
        dd.style.borderColor="red";
        dd.style.backgroundColor="#9c9";
        dd.style.margin="0px 0px 0px 0px"
        }
    </script>
    </head>
    
    <body>
    <span style="display:inline-block;padding:5px;background:#9C9;border:3px solid red" onmousedown="dodown(this)" onmouseup="doup(this)"> click me</span>
    </body>

     点击后的效果:

    案例 光棒效果

    <body>
    <table width="300" border="1">
      <tr style="background-color:#F00" onmouseover="show(this)" onmouseout="done(this)">
        <td >&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr  onmouseover="show(this)" onmouseout="done(this)">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr style="background-color:#F00"  onmouseover="show(this)" onmouseout="done(this)">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr  onmouseover="show(this)" onmouseout="done(this)">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr style="background-color:#F00"  onmouseover="show(this)" onmouseout="done(this)">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    
    </body>
    </html>
    <script language="javascript">
    var s="white"
    function show(dd)
    {    s=dd.style.backgroundColor;
        dd.style.backgroundColor="blue"
        }
        function done(dd)
    {
        dd.style.backgroundColor=s
        }
    </script>

    案例:刮刮乐

    <style type="text/css">
    .wai
    {
        border:2px ridge #F00;
        width:128px;height:128px;margin:10px;
        float:left;
        position:relative;
        left:70px
        
        }
        .nei
        {
            background-color:#F00;
            width:128px;height:128px}
            #btn
            {float:left;
            width:100%;
            text-align:center;
            }
            #main
            {   
                width:900px;
                margin:auto;
                }
    
                
        
    </style>
    <script language="javascript">
    var num=0;
    function show(dd)
    {
        dd.style.display="none";
        
        var s=dd.parentNode.getAttribute("haha");/******上一层的查询*****/
        if(s=="1")
        {alert("恭喜中奖");
        window.location.reload();/*******中奖自动重置******/
        }
    
    num+=1;/** 10次都没有自动重置***/
    if(num==10&&s!=1)
    {alert("再来10块钱!");
        window.location.reload();
    }
    }
    
        
    </script>
    </head>
    
    <body>
    <div id="main">
    
    
    <div class="wai" ><div class="nei" onclick="show(this)"></div></div>
    <div class="wai"><div class="nei" onclick="show(this)"></div></div>
    <div class="wai"><div class="nei" onclick="show(this)"></div></div>
    <div class="wai"><div class="nei" onclick="show(this)"></div></div>
    <div class="wai"><div class="nei" onclick="show(this)"></div></div>
    <div class="wai"><div class="nei" onclick="show(this)"></div></div>
    <div class="wai"><div class="nei" onclick="show(this)"></div></div>
    <div class="wai"><div class="nei" onclick="show(this)"></div></div>
    <div class="wai"><div class="nei" onclick="show(this)"></div></div>
    <div class="wai"><div class="nei" onclick="show(this)"></div></div>
    
    
    <div id="btn" align="center"><input id="hh"  type="button" onclick="huanyuan()"value="重置"></div>
    </div>
    </body>
    </html>
    <script>
    var divs=document.getElementsByTagName("div");
    
    
    for(var i=0;i<divs.length;i++)
    {     if(divs[i].className=="wai")
        {
            
            
         var n=(Math.round(Math.random()*100000000)%10)+1;
        
         var path="images/"+n+".png";
         divs[i].style.backgroundImage="url("+path+")"/****随机图片的加载方法*****/
         if(n==1)
         {
             divs[i].setAttribute("haha","1");
             }
            
        }
        
    }
        
        function huanyuan()
        {window.location.reload()}    
            
        
        
    </script>

    手机抽奖

    <style>
    .no1
    {
        margin:20px;
        
        border:5px dashed #FF0000;
        width:100%
        
        }
        #main
        {width:400px;
            margin:auto;
            text-align:center;
            font-family:华文行楷;
            font-size:50px
            }
        #begin
        {margin:20px;
            background:#03F;
            border:2px solid red;
            padding:5px
            }
            </style>
    </head>
    
    <body>
    <div id="main">
    <div id="show" class="no1">XXXXXXXXXXX</div>
    <span id="begin" onclick="dobegin()">开始</span>
    </div>
    </body>
    </html>
    <script>
    var a=new Array();
    a[0]=17685602035;
    a[1]=13853350543;
    a[2]=15344564298;
    a[3]=18344564676;
    a[4]=13344564043;
    a[5]=15644564545;
    a[6]=15534456440;
    a[7]=15734452222;
    a[8]=12344564111;
    a[9]=12344564333;
    var timeid;
    function doshow()
    {
    var n=Math.round (Math.random()*10000000)%10;
    var s=a[n];
    var dd=document.getElementById("show");
    dd.innerHTML = s;
    timeid=window.setTimeout("doshow()","50");/*延时**/
    }
    function dobegin()
    {  var gg=document.getElementById("begin")
    if(gg.innerHTML=="开始")
    {    doshow();
        gg.innerHTML="停止";
        }
        else
        {gg.innerHTML="开始";
        window.clearTimeout(timeid)/**定义的变量来代替doshow()**/
        document.getElementById("show").innerHTML="17685602035"/*作弊*/
            }
    
    }
    </script>

  • 相关阅读:
    WebStorm 2018版本破解方法
    C# WMI通过网络连接名称获取IP掩码网关
    c# 调用RDP和SSH实现远程登陆
    LabVIEW中开放隐藏属性的inikey
    LabVIEW类方法浏览器-Class Method Browser
    hive split 注意事项
    机器学习三大框架对比
    Windows环境下搭建Nginx和多版本PHP共存
    javascript : location 对象
    ora-00031:session marked for kill处理oracle中杀不掉的锁
  • 原文地址:https://www.cnblogs.com/w297613932/p/4254600.html
Copyright © 2020-2023  润新知