angular——内置服务获取本机的信息

冷不防 2022-06-07 07:14 163阅读 0赞

之前我们用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">
    <div ng-controller="myCtrl">
        <div>屏幕有效的宽度（单位：像素）:{
      { width }}</div>
        <div>屏幕有效的高度（单位：像素）:{
      { height }}</div>
        <div>页面title:{
      { title }}</div>
        <div>URL主机:{
      { host }}</div>
        <div>URL协议:{
      { protocol }}</div>
        <div>端口:{
      { port }}</div>
        <div>URL的hash部分:{
      { hash }}</div>
        <div>URL地址:{
      { href }}</div>
    
    </div>
    
    <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>