7_JavaScript_Math对象_字符串对象_浏览器对象B

2016-12-14  本文已影响17人  Zd_silent

Math对象

  1. Math 对象用于执行数学任务。

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

  1. Math.PI 返回圆周率（约等于3.14159）。

document.write(Math.PI);

数值取整

  1. ceil(x) 对数进行上舍入。

document.write(Math.floor(3.6));

随机数

  1. random() 返回 0 ~ 1 之间的随机数。

document.write(Math.random());

三角函数

  1. cos(x) 返回数的余弦。

document.write(Math.cos(Math.PI/2));

其他方法

  1. max(x,y) 返回 x 和 y 中的最高值。

document.write(Math.max(5,10));

字符串对象

  1. 字符串是非常重要的数据类型，除了基本字符串外，JavaScript还提供了字符串的引用类型--字符串对象。
var str1 = "hello";
var str2 = new String()
document.write(typeof str1);
document.write(typeof str2);
document.write(str1.length);
document.write(str2.length);

字符串与数字的转换

  1. toString() 返回字符串。可以将数值转换成字符串。
var str2 = num.toString();
var str2 = num.toString(2);
var str2 = parseInt(num);

字符串对象的常用方法

  1. charAt() 返回在指定位置的字符。
var str1 = "hello";
var str2 = new String("javascript");
document.write(str2.charAt(1)+'<br>');
document.write(str2.charCodeAt(1)+'<br>');
document.write(str2.concat('a')+'<br>');

浏览器对象BOM

基本概念

  1. BOM是Browser Object Model的缩写，简称浏览器对象模型

window对象的方法和属性

window对象是浏览器窗口对文档提供的一个现实的容器，代表打开的浏览器窗口，是每一个加载文档的父对象

window的属性和方法调用方法:window.属性，window.方法 也可以直接调用省略 window.

  1. 对话框

    • alert() 显示带有一段消息和一个确认按钮的警告框。
    • confirm() 显示可提示用户输入的对话框。返回值为布尔值
    • prompt() 显示带有一段消息以及确认按钮和取消按钮的对话框。
      第一个参数是提示,第二个参数是默认值;
      返回值为输入的值，取消返回null

  2. 窗体控制

    • open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
      • URL:声明了要在新窗口中显示的文档的 URL。
      • name:声明了新窗口的名称或者窗口目标。
      • features:声明了新窗口要显示的标准浏览器的特征。
      • 窗口的属性：
        • 常用：
          • width:新建窗口宽度
          • heigth:新建窗口高度
          • top:左上角垂直坐标
          • left:左上角水平坐标
        • 其他不太常用的属性：
          • toolbar：指定窗口是否有标准工具栏。当该选项的值为1或yes时，表示有标准工具栏，当该选项的值为0或no时，表示没有标准工具栏；
          • resizable：指定窗口是否可改变大小，选项的值及含义与toolbar相同；
          • ocation：指定窗口是否有地址工具栏，选项的值及含义与toolbar相同；
          • directories：指定窗口是否有链接工具栏，选项的值及含义与toolbar相同；
          • status：指定窗口是否有状态栏，选项的值及含义与toolbar相同；
          • menubar：指定窗口是否有菜单，选项的值及含义与toolbar相同；
          • scrollbar：指定当前窗口文档大于窗口时是否有滚动条，选项的值及含义与 toolbar相同；
          • ........
    • close() 关闭浏览器窗口。

  3. 定时器

    • setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
    • setTimeout() 在指定的毫秒数后调用函数或计算表达式。
    • clearInterval() 取消由 setInterval() 设置的 timeout。
    • clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
    var timeId = setTimeout(test,10);
clearTimeout(timeId);

  4. 其他方法

    • print() 打印当前窗口的内容。
    • blur() 把键盘焦点从顶层窗口移开。
    • createPopup() 创建一个 pop-up 窗口。
    • focus() 把键盘焦点给予一个窗口。
    • moveBy() 可相对窗口的当前坐标把它移动指定的像素。
    • moveTo() 把窗口的左上角移动到一个指定的坐标。
    • resizeBy() 按照指定的像素调整窗口的大小。
    • resizeTo() 把窗口的大小调整到指定的宽度和高度。
    • scrollBy() 按照指定的像素值来滚动内容。
    • scrollTo() 把内容滚动到指定的坐标。

  5. Window 对象属性

    • 掌握部分
      • innerWidth 返回窗口的文档显示区的宽度。
      • innerHeight 返回窗口的文档显示区的高度。
    • 了解部分
      • name 设置或返回窗口的名称。
      • opener 返回对创建此窗口的窗口的引用。
      • closed 返回窗口是否已被关闭。
      • self 返回对当前窗口的引用。
      • top 返回最顶层的先辈窗口。
      • outerheight 返回窗口的外部高度。
      • outerwidth 返回窗口的外部宽度。
      • status 设置窗口状态栏的文本。
      • ......

History对象的常用方法

history对象有back和forward两个方法，它可以跳转到当前页的上一页和下一页，可以用length属性查看客户端浏览器的历史列表中访问的网页个数

  1. back() 加载 history 列表中的前一个 URL。

Location 对象

  1. Location 对象的属性
    • href 设置或返回完整的 URL。
    • host 设置或返回主机名和当前 URL 的端口号。
    • hash 设置或返回从井号 (#) 开始的 URL（锚）。
    • hostname 设置或返回当前 URL 的主机名。
    • pathname 设置或返回当前 URL 的路径部分。
    • port 设置或返回当前 URL 的端口号。
    • protocol 设置或返回当前 URL 的协议。
    • search 设置或返回从问号 (?) 开始的 URL（查询部分）。
  2. Location 对象的方法
    • assign() 加载新的文档。
    • reload() 重新加载当前文档。
      如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。 如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
    • replace() 用新的文档替换当前文档。
      replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

Screen 对象

  1. availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

Navigator 对象属性

  1. appCodeName 返回浏览器的代码名。
// 动态显示时间
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    function clock() {
        var today = new Date();
        var hours = today.getHours();
        var minutes = today.getMinutes();
        var seconds = today.getSeconds();
        var str = "现在时间："
        if (hours < 12) {
            str+='上午';
        }else {
            str+='下午';
        }
        str+=hours+'时'+minutes+'分'+seconds+'秒';
        // document.write(str+'<br>')
        var clock=document.getElementById('clock')
        clock.value=str

    }
    setInterval('clock()',1000);
    </script>
    <input type="text" id="clock" size="40">
    <input type="button" id="clock" size="40"  value="停止时间" onclick="clearInterval(timeId) ">
</body>
</html>

// 比赛
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var guojing=new Object();
            guojing.name="郭靖"
            guojing.HP=500;
            guojing.gj=90;
            guojing.sd=60;
            guojing.skill=new Array('亢龙有悔','飞龙在天','见龙在田','鸿渐于陆','潜龙勿用')

        var ouyang=new Object();
            ouyang.name='欧阳锋';
            ouyang.HP=800;
            ouyang.gj=100;
            ouyang.sd=40;
            ouyang.skill=new Array('灵蛇棍法','凤凰神力','颠倒阴阳','逆转静脉','天蟾神功')

        function whoGjwho(a,b) {
            return a.sd*Math.random()>b.sd*Math.random()?[a,b]:[b,a];
        }

        function game() {
            var skillIndex=Math.floor(Math.random()*5)
            var fight = whoGjwho(guojing,ouyang);
            var attacker = fight[0];
            var defender = fight[1];
            var damage=attacker.gj*Math.random()-defender.gj*Math.random();
                if(damage<=0){
                    damage=0
                }else{
                    damage=Math.ceil(damage);
                }
            defender.HP-=damage;

            document.write(attacker.name+"使用了一招"+attacker.skill[skillIndex]+'<br>')
            document.write(defender.name+"损失了"+damage+'点HP'+'<br>')

            if (defender.HP>0) {
                document.write(defender.name+"的HP:"+defender.HP+'<br>'+attacker.name+'的HP:'+attacker.HP+'<hr>')
            }else{
                document.write(defender.name+'战败了'+'<br>'+attacker.name+'取得了胜利！'+'<br>')
                alert(attacker.name+'取得了胜利！'+'Gmame Over!')
                clearInterval(zd)
            }
        }
        var zd=setInterval('game()',50)
    </script>

</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读