【Web】0基础学Web—prototype、原型应用、Date格式化、window、history、窗口打开与关闭、窗口移动、window事件

.眠北.

于 2025-01-02 19:07:30 发布

阅读量810

点赞数 35

文章标签：原型模式前端 javascript

本文链接：https://blog.youkuaiyun.com/2201_75539182/article/details/144790309

版权

0基础学Web—prototype、原型应用、Date格式化、window、history、窗口打开与关闭、窗口移动、window事件

prototype
原型应用
Date格式化
window
- js三大组成
history
窗口打开与关闭
窗口移动
window事件

prototype

prototype在表达一种继承机制
每一个构造函数都有一个属性prototype，他的值是一个对象，
对象上的属性被构造函数产生的所有实例共享

<script>
    let arr = [1, 2, 3]
    console.log(arr)  // [1, 2, 3]
    let str = new String('hello')
    console.log(str)  // String {'hello'}
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    let p = new Person('张三', 20)
    console.log(p)  // Person {name: '张三', age: 20}
    class Person2 { }
    class Student extends Person2 { }
    let s = new Student()
    console.log(s)  // Student {}

	Array2.prototype = {
    	length: 0,
    	indexOf: function () {
        	console.log('下标')
    	},
    	includes: function () {
        	console.log('是否包含')
    	}
	}
	Array2.prototype.name = '张三'  //添加了属性
	function Array2() { }
	console.log(Array2)
        
	let arr = new Array2()
	arr.indexOf()
	console.log(arr)
</script>

原型应用

    <script>
        function includes2(arr, ele) {
            for (const item of arr) {
                if (ele == item) {
                    return true
                }
            }
            return false
        }

        let arr = [10, 20, 30]
        console.log(arr)
        // includes2(arr,10)


        Array.prototype.includes2 = function (ele) {
            //this  指代当前对象，谁调用指谁
            for (const item of this) {
                if (ele == item) {
                    return true
                }
            }
            return false
        }

        let arr2 = ['a', 'b', 'c']
        console.log(arr.includes2(10))
        console.log(arr2.includes2('b'))
        let arr3 = new Array()
        console.log(arr3,'----')        
    </script>

Date格式化

    <script>

        Date.prototype.format = function (str) {
            //this  指代当前对象，谁调用指谁
            let year = this.getFullYear()
            let month = this.getMonth()
            let date = this.getDate()
            let hours = this.getHours()
            let minutes = this.getMinutes()
            let seconds = this.getSeconds()
            let str2 = str.replace('YYYY', year).replace('MM', month)
                .replace('DD', date).replace('hh', hours)
                .replace('mm', minutes).replace('ss', seconds)

            return str2
        }

        let date = new Date()
        console.log(date)
        let date2 = new Date('1011-12-13 14:15:16')
        console.log(date.format('YYYY-MM-DD hh:mm:ss'))
        console.log(date2.format('YYYY年MM月DD日 hh时mm分ss秒'))
    </script>

window

js三大组成

ECMAScript：js语法基础
BOM:
Broswer Object Model 浏览器对象模型
提供了与浏览器交互的接口对象，这个对象是window
DOM:
Document Object Model 文档对象模型
用来操作html文档结构、属性或内容
document对象是window的一个属性
window：
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

<body>
    <a href="./06-history.html">跳转到history</a>
    <button onclick="location.reload()">刷新</button>
    <button onclick="goBaidu()">跳转到百度</button>
    <script>
        //浏览器窗口的内部宽高（包裹滚动条）
        console.log(window.innerWidth, window.innerHeight)
        //屏幕的宽高
        console.log(window.screen.width, window.screen.height)
        //屏幕的可用宽高，去掉底部边栏
        console.log(screen.availWidth, screen.availHeight)

        console.log(location.host)  //127.0.0.1:5500
        console.log(location.hostname) //127.0.0.1
        console.log(location.port)   //5500
        console.log(location.pathname)  //  js/2-BOM/1.window%E5%B1%9E%E6%80%A7.html

        console.log(location.href)    //绝对路径   http://127.0.0.1:5500/js/2-BOM/1.window%E5%B1%9E%E6%80%A7.html

        console.log(location.search,'++++')   //?kw=python
        console.log(location.hash,'====')   //#1

        //跳转
        function goBaidu() {
            // location.href='http://www.baidu.com'
            // location.assign('http://www.baidu.com')
            location.replace('http://www.baidu.com')
        }


        //判断是那种类型的浏览器
        console.log(window.navigator.userAgent.includes('Chrom'))

    </script>
</body>

history

<body>
    <a href="http://www.baidu.com">百度</a>
    <button onclick="history.forward()">前进</button>
    <button onclick="history.back()">后退</button>
    <!-- 可正可负 -->
    <button onclick="history.go(2)">前进2个页面</button>

    <button onclick="window.close()">关闭窗口</button>
    <script>
        setInterval(() => {
            moveTo(200, 200)
        }, 1000)
    </script>
</body>

窗口打开与关闭

<body>
    <button onclick="openWindow()">打开一个新窗口</button>
    <script>
        function openWindow() {
            window.open('./06-history.html', '_blank', 'width=500 height=500 left=100 top=100')
        }

        // window.open()
        // window.close()
        // window.alert()
        // window.confirm()
        // window.prompt()
        // window.setInterval()
        // window.setTimeout()
    </script>
</body>

窗口移动

<body>
    <script>
        let win = window.open('./2.history.html', '_blank', 'width=200 height=200')
        let x = 0
        let y = 0
        let xspeed = 10
        if (win) {
            setInterval(function () {
                x += xspeed
                if (x + 200 >= window.screen.availWidth) {
                    x = window.screen.availWidth - 200
                    xspeed *= -1
                }

                win.moveTo(x, y)
            }, 10)
        }

    </script>
</body>

window事件

onload:等待页面全部加载完毕(包括链接、图像、css、dom节点)

<style>
    body {
        height: 1500px;
    }

    .active {
        width: 100px;
        height: 100px;
        position: fixed;
        bottom: 50px;
        right: 10px;
        background-color: #d18989;
        display: none;
    }
</style>


<body>
    <div class="wrapper">24334</div>
    <div class="active">广告</div>
    <script>
        console.log(1 + 1)
        console.log(document.querySelector('.wrapper'))

        //窗口大小改变触发
        window.onresize = function () {
            //    console.log(window.innerWidth,window.innerHeight)
        }

        //窗口滚动触发
        let _active = document.querySelector('.active')
        window.onscroll = function () {
            // console.log(document.documentElement.scrollTop,document.documentElement.scrollLeft)
            if (document.documentElement.scrollTop >= 800) {
                _active.style.display = 'block'
            } else {
                _active.style.display = 'none'
            }
        }
    </script>
</body>