cari

Rumah  >  Artikel  >  hujung hadapan web  >  angular中获取内置服务获取本机的信息的方法

angular中获取内置服务获取本机的信息的方法

一个新手
一个新手asal
2017-10-14 09:10:381640semak imbas

之前我们用angular设置了一个定时器，今天我们就根据定时器进行一些练习。

使用内置服务获取以下信息：

1.获取屏幕高度

2.获取屏幕宽度

3.获取页面title

4.获取URL协议

5.获取URL主机

6.获取端口号

7.获取URL的hash部分

8.获取访问地址，即URL地址

其他要求：

1.高度和宽度打开页面2秒后显示出来

2.title，协议，主机在打开页面3秒后显示出来

3.端口号，url地址在打开页面5秒后，弹出提示框询问是否显示，若点击是，则展示出来，否则不展示

源码：

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>day12日考</title></head><body ng-app="myApp"><p ng-controller="myCtrl">
    <p>屏幕有效的宽度（单位：像素）:{{ width }}</p>
    <p>屏幕有效的高度（单位：像素）:{{ height }}</p>
    <p>页面title:{{ title }}</p>
    <p>URL主机:{{ host }}</p>
    <p>URL协议:{{ protocol }}</p>
    <p>端口:{{ port }}</p>
    <p>URL的hash部分:{{ hash }}</p>
    <p>URL地址:{{ href }}</p></p><script>
    var nowtime = function () {        return new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString();
    };    var app = angular.module("myApp", []);    app.controller("myCtrl", function ($scope, $interval, $timeout) {
        $interval(function () {
            $scope.width = screen.availWidth;
            $scope.height = screen.availHeight;
        }, 2000);

        $timeout(function () {
            $scope.title = document.title;
            $scope.host = location.host;
            $scope.protocol = location.protocol;
        }, 3000);

        $timeout(function () {            var msg = "是否显示？";            if (confirm(msg)==true){
                $scope.port = window.location.port;
                $scope.hash = location.hash;
                $scope.href = window.location.href;
            }else{                alert("你选择了不展示");
            }
        }, 5000);
    });</script></body></html>

Atas ialah kandungan terperinci angular中获取内置服务获取本机的信息的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：ReactJS中表单的单选多选与反选的实现方法Artikel seterusnya：Promise,Generator（生成器）,async（异步）函数的用法

Artikel berkaitan

Lihat lagi