zoukankan      html  css  js  c++  java
  • js学习

    一、javascript是什么?

      javascript属于以中网络脚本语言,可用于html、web,更适用于服务器、手机、电脑等设备。

    二、Javascript的基础用法?

      js脚本可放置在html中的<body>和<head>中,在html中插入javasript脚本用<script>标签。

      通常为了操作html中的标签,我们应该先找到该标签在文档中的位置:

      1、利用id寻找html中的元素

        

      2、通过标签名寻找html中的元素

        

    js中的事件

      1、onclick事件

        鼠标单击事件,当用户单机鼠标时,产生onClick事件,同时onClick指定的事件处理程序或处理程序或代码被调用执行。

    <!DOCTYPE html>
    <html>
        <head>
            <title>onClick事件</title>
            <meta charset="utf-8">
        </head>
        <body>
            <input type="button" name="onclick" value="按钮" onClick=alert("弹框") />
        </body>
    </html>

      2、onchange事件

        它时一个与表单相关的事件,当利用text或text元素输入的字符值改变时发生该事件,同时在select表格中的一个选项状态改变也会引发该事件。

    <!DOCTYPE html>
    <html>
        <head>
            <title>onchange事件</title>
            <meta charset="utf-8">
        </head>
        <body>
            <form id="form1" name="form1" method="post" action="">
                <textarea name="textarea" cols="50" rows="5" 
                onchange=alert("输入留言内容")></textarea>
            </form>
    
        </body>
    </html>

      3、onSelect事件

        onSelect事件是文本框中的内容被选中时所发生的事件。

    <!DOCTYPE html>
    <html>
        <head>
            <title>onSelect事件</title>
            <meta charset="utf-8">
        </head>
        <body>
           <input type="text" name="text" value="选择" onselect=alert("选择输入的内容") />
        </body>
    </html>

      4、onLoad 事件

        当家在网页文档时,会产生该事件。onLoad事件的作用是在首次载入一个页面文件时检测cookie值,并用一个变量赋值,使其可以被源代码使用

    <!DOCTYPE html>
    <html>
        <head>
             <meta charset="utf-8">
            <title>onLoad事件</title>
    
            <script type="text/javascript">
                function MM_popupMsg(msg) {
                    alert(msg);
                }
            </script>
        </head>
        <body onload="MM_popupMsg('欢迎光临!!!')">
           
        </body>
    </html>

       5、onUnload事件

        当退出页面时引发事件onUnload事件,并可更新connkie的状态

      6、onBlur事件

        失去焦点事件正好与获得焦点事件对应,当text对象、textarea对象或select对象不在有焦点而而退出后台时,引发该事件

      7、onMouseOver事件

        onMouseOver是当鼠标指针移动到某对象范围的上方时触发的事件。

      8、onMouseOut事件

        onMouseOut是当鼠标指针离开某对象范围是触发的事件。

      9、onDblClick事件

        onDbClick事件是鼠标双击时触发的事件。

    js中常用方法

      1、修改html中标签属性的内容

    <!DOCTYPE html>
    <html>
         <p id="p1">hello world</p>
         <script type="text/javascript">
             document.getElementById("p1").innerHtML="new hello world";
         </script>
    </html>    
    
        

      2、显示当前时间

        在很多时候网页上都要显示当前时间,下面是显示当前时间的方法:

        getHours() 获取当前小时数

        getMinutes() 获取当前分钟数

        getSeconds() 获取当前秒数

       <script type="text/javascript">
             function showtime() {
                 var hours = now_time.getHours();//获取当前小时数
                 var minutes = now_time.getMinutes();//获取当前分钟数
                 var seconds =  now_time。getSeconds();//获取当前秒数
                 var timeer = "" + ((hours > 12) ? hours-12 : hours);//getHours()获取的时间是24小时制的
                 timeer += ((minutes < 10) ? ":0" : ":") + minutes;
                 timeer += ((seconds < 10) ? ":0" : ":") + seconds;
                 document.clock.show.value = timeer;
                 setTimeout("showtime()",1000);//设置一秒钟自动调用一次showtime()函数
             }
         </script>

      3、获取当前日期

        getYear() 获取当前年份

        getMonth() 获取当前月份

          注:在显示月份的时候,要将所得的月份加1,因为月份的值是从0到11

        getDate() 获取当前日数

        getDay() 获取当前星期数

          注:利用getDay()方法获得的值中,0代表星期天,所得的值中没有7

      4、自动切换图片

           <script type="text/javascript">
             var img = new Array(3);
             var nums = 0;
             if (document.images) {
                 img[i] = new Image();//创建对象实例
                 img[i].src = "images/00" + i + ".jpg";
             }
    
             function fort() {//图片切换函数
                 nums ++;
                 document.images[0].src = img[nums].src;
                 if (nums == 3) {
                     nums = 0;
                 }
             }
             function slide() {
                 setInterval("fort()", 1000);
             }
         </script>    

      

        

        

  • 相关阅读:
    List,Set,Map初级学习
    String,StringBuffer,StringBuilder 的使用
    activity跳转
    JSON与List之间的转换
    子线程更新UI
    数据库查询关键字显示所有结果
    Java数据类型转换1
    git 操作
    MySql导出表结构
    springBoot双数据源配置
  • 原文地址:https://www.cnblogs.com/leilei0327/p/8858771.html
Copyright © 2011-2022 走看看