雀雀JavaScript基础Note3_javascript本次选择的颜色是-CSDN博客

本文链接：https://blog.csdn.net/weixin_41873431/article/details/80033975

JavaScript基础Note3

2018年4月21日星期六

document对象的应用

document.referrer 如果当前文档不是通过超级链接访问的，则为 null。如果是从超链接访问的则获得一个来源的URL；

location.href = “”（指定时间跳转的网址），5000（指定的时间毫秒数）

示例：

<!DOCTYPE html>
  <html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>奖品显示页面</title>
    <style type="text/css">
        body{margin: 0;}
    </style>
  </head>
  <body>
  <script>
    var oldUrl = document.referrer;
    if (oldUrl == ""){
        document.write("不是从超链接点入进来的,5秒后跳转到login界面!")
        document.write("<br/>"+oldUrl)
        setTimeout("javascript:location.href = 'login.html'",5000);
    }else {
        document.write("你是从"+oldUrl+"进入的!成功!");
    }
  
  </script>
  </body>
  </html>

document的几种用法

getElementsByName //取得name相同的元素

getElementsByTagName //取得类别相同的元素

getElementById //取得Id相同的元素

跟上.innerHTML 去改变内容

示例：

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>document对象</title>
  </head>
  <body>
  <div class="r">
    <div id="book">原来文本</div>
    <input name="changeBook" type="button" value="改变名称" οnclick="changeBook()"> <br/>
  
    <input name="text" value="text1" type="text">
    <input name="text" value="text2" type="text">
    <input name="text" value="text3" type="text">
    <input name="text" value="text4" type="text">
    <input type="button" value="取得name相同的内容" οnclick="getByName()">
    <input type="button" value="取得input的内容" οnclick="getByTageName()">
    <input type="button" value="清空页面" οnclick="clearHtml()">
    <p id="replace"></p>
    
  </div>
  
  <script>
    function changeBook() {
        document.getElementById("book").innerHTML="改变后文本";
    }
  
    function getByName() {
        var ainput = document.getElementsByName("text");
        var str = "";
        for (var i = 0  ;i < ainput.length;i++){
        str += ainput[i].value + "&nbsp";
        }
        document.getElementById("replace").innerHTML=str;
    }
  
    function getByTageName() {
        var ainput = document.getElementsByTagName("input");
        var str = "";
        for (var i = 0  ;i < ainput.length;i++){
            str += ainput[i].value + "&nbsp";
        }
        document.getElementById("replace").innerHTML=str;
    }
  
    function clearHtml() {
        document.write("");
        document.write(document.URL);
  
    }
  </script>
  </body>
  </html>

Date对象

创建date对象用对象名.get取得细节时间月份需要+1

示例：

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Date对象</title>
  </head>
  <body>
  <div id="myclock"></div>
  <input type="button" value="点击显示当前时间" οnclick="nowTime()">
  <script>
    var date = new Date();
    document.write(date);
    date.getDate(); //取日
    date.getDate() //周几需要+1 才能代表中国的日期
    date.getHours() // 取小时也需要
    date.getMinutes() //取分钟也需要
    date.getMonth() //取月份需要+1处理
    date.getSeconds() //取秒数
    date.getFullYear()  //  取年份
    date.getTime(); //取时间戳 1970年1月1日到今天的毫秒数
//    date = new Date("september 1,2013,14:58:12")
  
    function nowTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
  
        document.write("当前时间"+ h+":"+m+":"+s);
        document.getElementById("myclock");
    }
    nowTime();
    
  </script>
  </body>
  </html>

Math对象

Math.ceik() 向上舍入

Math.floor() 向下舍入

Math.round() 四舍五入

Math.random() 随机数 Math.floor(Math.random() * 98) +2//代表2-99之间的随机数字

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Math对象</title>
    <style type="text/css">
        #color{font-family: "微软雅黑";
            font-size: 16px;
            color: #22ff31;
            font-weight: bold;
        }
    </style>
  </head>
  <body>
  本次选择的颜色是:<span id="color"></span>
  <input type="button" value="选择颜色" οnclick="selColor()">
  <script>
  
    function selColor() {
        var color = Array("红de","黄de","蓝de","绿de","橙de","青de","紫de");
        var num = Math.ceil(Math.random()*7)-1;    //0-6的随机数
        document.getElementById("color").innerHTML = color[num];
    }
  </script>
  </body>
  </html>

定时函数

setTimeout("alert('3seconds')",3000); //3000 后执行某任务

set("timer()",1000); //1000毫秒刷新timer()函数

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>定时函数</title>
  </head>
  <body>
  <div id="myclock"></div>
  <input type="button" value="3秒后弹出" οnclick="timer()">
  <script>
  
    function timer() {
        var t = setTimeout("alert('3秒后弹出的提示框!')",3000)  
    }
  
    function disptime(){
         var today = new Date();      //获得当前时间
        var h = today.getHours();      //获得小时、分钟、秒
         var m = today.getMinutes();    //获得分钟
         var s = today.getSeconds();    //获得秒
  
     //设置div的内容为当前时间
        document.getElementById("myclock").innerHTML="当前时间是:"+h +":"+m+": "+s;
 }
        //使用setInterval()每间隔指定毫秒后调用disptime()
        setInterval("disptime()",1000);     //定时刷新某个函数
  </script>
  </body>
  </html>