📌  相关文章
📜  btn 不断按下窗口调整大小 - CSS (1)

📅  最后修改于: 2023-12-03 14:59:35.090000             🧑  作者: Mango

CSS主题：btn 不断按下窗口调整大小

简介

本主题将介绍如何使用CSS样式和JavaScript代码实现一个在按下按钮后，窗口大小会不断调整的效果，以提供给程序员参考和学习。

实现思路
  1. 使用HTML创建一个包含一个按钮的页面元素。
  2. 使用CSS样式来设置按钮的样式和位置。
  3. 使用JavaScript代码来监听按钮的点击事件，并在点击事件发生时改变窗口大小。
HTML结构
<!DOCTYPE html>
<html>
<head>
    <title>Resize Window on Button Click</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <button id="resize-btn">点击调整窗口大小</button>

    <script src="script.js"></script>
</body>
</html>
CSS样式 (style.css)
body {
    text-align: center;
    margin-top: 100px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
JavaScript代码 (script.js)
document.getElementById('resize-btn').addEventListener('click', function() {
    resizeWindow();
});

function resizeWindow() {
    var width = Math.floor(Math.random() * (window.innerWidth - 200)) + 200;
    var height = Math.floor(Math.random() * (window.innerHeight - 200)) + 200;
  
    window.resizeTo(width, height);
}
代码解析
  • HTML部分包含一个按钮元素，并引用了style.css样式文件和script.js脚本文件。
  • CSS样式设置了按钮的样式，使其具有一定的大小和背景颜色。
  • JavaScript代码监听按钮的点击事件，并在点击事件发生时调用resizeWindow()函数。
  • resizeWindow()函数使用Math.random()方法生成一个随机的窗口大小，并使用window.resizeTo()方法将窗口大小设置为随机值。
使用方法
  1. 将以上的HTML代码保存为index.html文件。
  2. 将以上的CSS样式保存为style.css文件，并与index.html文件处于相同的目录下。
  3. 将以上的JavaScript代码保存为script.js文件，并与index.html文件处于相同的目录下。
  4. 使用支持HTML和CSS的浏览器打开index.html文件。
  5. 点击按钮，窗口的大小将会不断变化。