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

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

一个新手
Lepaskan: 2017-10-14 09:10:38
asal
1688 orang telah melayarinya

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

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

1.获取屏幕高度

2.获取屏幕宽度

3.获取页面title

4.获取URL协议

5.获取URL主机

6.获取端口号

7.获取URLhash部分

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>
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan