标签 java 下的文章

2024-08-15

在VS Code中配置JavaScript和HTML的自动格式化工具，可以使用Prettier插件。以下是配置步骤和示例代码：

安装Prettier插件：
打开VS Code，按下Ctrl+P（或Cmd+P在Mac上），输入ext install esbenp.prettier-vscode，然后点击安装。
安装Prettier本身作为开发依赖：
```
npm install --save-dev prettier
```

配置VS Code的settings.json文件：

打开VS Code设置（可以通过点击左下角的设置图标或通过Ctrl+,快捷键打开），然后在settings.json文件中添加以下配置：




{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.formatOnSave": true
  },
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.semi": true,
  "prettier.arrowParens": "avoid",
  "prettier.bracketSpacing": true,
  "prettier.endOfLine": "auto",
  "prettier.htmlWhitespaceSensitivity": "css",
  "prettier.jsxBracketSameLine": false,
  "prettier.jsxSingleQuote": false,
  "prettier.requirePragma": false,
  "prettier.proseWrap": "preserve",
  "prettier.quoteProps": "as-needed",
  "prettier.tslintIntegration": false,
  "prettier.vueIndentScriptAndStyle": false,
  "files.autoSave": "off",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

这样配置后，每次保存文件时，Prettier会自动格式化JavaScript和HTML文件。你可以根据项目需求调整Prettier的规则。

- 阅读更多 -

JavaWeb快速入门--HTML

System

2024-08-15

所有,html

在JavaWeb快速入门中，我们主要关注于HTML的基础知识，以便我们可以创建网页并在网页中添加基本的文本、图像、链接等内容。

以下是一个简单的HTML示例，它展示了如何创建一个包含文本、图像和链接的基本网页：




<!DOCTYPE html>
<html>
<head>
    <title>JavaWeb快速入门</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">点击这里访问我的主页</a>
    <img src="image.jpg" alt="示例图片">
</body>
</html>

在这个例子中，我们定义了一个HTML5文档，其中包括了一个标题(<h1>), 一个段落(<p>), 一个链接(<a>), 和一个图像(<img>). 这些都是构建网页的基本元素。

- 阅读更多 -

JavaScript 中 Location 对象介绍

System

2024-08-15

所有,css3

Location 对象包含有关当前URL的信息，并提供了用于更改此URL的方法。在JavaScript中，Location 对象是 window 对象的一部分，因此可以直接通过 window.location 访问。

以下是一些常用的 Location 对象属性和方法：

href：完整的URL字符串。
protocol：URL 的协议部分，通常是 'http:' 或 'https:'。
host：URL 的主机部分，包括端口（如果有）。
hostname：URL 的主机名部分，不包括端口。
port：URL 的端口部分。
pathname：URL 的路径部分。
search：URL 的查询字符串部分，以 '?' 开头。
hash：URL 的哈希部分，以 '#' 开头。
assign(url)：加载新的文档，可以是相对或绝对URL。
replace(url)：用新的文档替换当前文档，可以是相对或绝对URL。
reload()：重新加载当前页面，可选地设置为 true 来强制从服务器加载。

示例代码：




// 获取当前URL的协议
console.log(window.location.protocol); // 输出例如 'http:'
 
// 改变当前页面的URL
window.location.href = 'https://www.example.com';
 
// 重新加载页面
window.location.reload(true);

使用 Location 对象可以方便地获取和修改当前页面的URL信息，进而控制浏览器的导航行为。

- 阅读更多 -

【JavaWeb项目】简单搭建一个前端的博客系统

System

2024-08-15

所有,css3

以下是一个简单的博客系统前端部分的代码示例，使用HTML和CSS构建。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog System</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .header {
            text-align: center;
            padding: 20px;
        }
        .post {
            margin-bottom: 50px;
            padding: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .post-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .post-date {
            color: #888;
            font-size: 12px;
        }
        .post-content {
            margin-top: 20px;
        }
        .footer {
            text-align: center;
            padding: 20px;
            font-size: 12px;
            color: #888;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Simple Blog System</h1>
    </div>
    <div class="post">
        <h2 class="post-title">Sample Post Title</h2>
        <div class="post-date">Published on: January 1, 2023</div>
        <div class="post-content">
            <p>This is a sample post content. Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </div>
    </div>
    <div class="footer">
        <p>Copyright &copy; 2023 Simple Blog System</p>
    </div>
</body>
</html>

这个简单的博客系统前端示例展示了如何使用HTML和CSS创建一个基本的博客文章页面。它包括了页面的头部（Header）、文章的标题（Post Title）、日期（Post Date）和内容（Post Content），还有页面的底部（Footer）。这个示例提供了一个基本框架，可以根据实际需求进行样式调整和功能添加。

System

2024-08-15

所有,css3

在CSS中，border属性用于设置元素的边框样式，font-style属性用于设置字体样式为斜体。

以下是一个简单的例子，演示如何在HTML元素上应用这些CSS属性：




<!DOCTYPE html>
<html>
<head>
<style>
.with-border {
  border: 1px solid black; /* 设置1像素的黑色实线边框 */
}
 
.italic {
  font-style: italic; /* 设置文本为斜体 */
}
</style>
</head>
<body>
 
<div class="with-border italic">这是一个有边框且斜体的div元素。</div>
 
</body>
</html>

在这个例子中，.with-border 类设置了一个边框，而 .italic 类则将文本设置为斜体。这两个类可以结合应用到同一个HTML元素上，以便该元素既有边框又是斜体。

System

2024-08-15

所有,css3

在Web前端开发中，使用HTML5、CSS3和JavaScript可以创建出丰富多样的网页。以下是一个简单的示例，展示了如何使用这些技术创建一个简单的喵喵画页面：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shiba Inu Profile</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 25px;
        }
        .shiba-info {
            text-align: center;
            padding: 20px;
            background-color: #f2f2f2;
            border: solid 1px #ccc;
            margin-bottom: 15px;
        }
        .shiba-image {
            width: 200px;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <div class="shiba-info">
        <img class="shiba-image" src="shiba.jpg" alt="Shiba Inu">
        <h2>Shiba Inu Profile</h2>
        <p>The Shiba Inu is the smallest of the six original Shiba Inu dogs bred by Japanese farmers on the island of Hokkaido in the far northeast of the country.</p>
    </div>
 
    <script>
        // JavaScript code here to add dynamic functionality (if needed)
    </script>
</body>
</html>

在这个示例中，我们定义了一个简单的HTML结构，并通过内部样式表（<style>标签内）添加了一些基本的CSS样式。我们还包含了一张示例图片和一些关于喵喵的文本描述。这个页面可以进一步完善，比如添加交互性，使用JavaScript来处理用户事件或动态内容加载。但是，为了保持简洁，这里只提供了一个基础的静态示例。

System

2024-08-15

所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 600px;
            margin: 100px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .title {
            text-align: center;
            color: #333;
            padding: 20px;
        }
        .input-container {
            text-align: center;
            padding: 20px 0;
        }
        input[type="text"] {
            width: 80%;
            padding: 10px;
            margin: 0 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="button"] {
            padding: 10px 20px;
            background-color: #5883d3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="button"]:hover {
            background-color: #3d66a7;
        }
        #poem {
            text-align: center;
            padding: 20px;
            color: #333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">喵喵画网</div>
        <div class="input-container">
            <input type="text" id="text" placeholder="请输入内容" />
            <input type="button" value="生成喵喵" onclick="generatePoem()" />
        </div>
        <div id="poem"></div>
    </div>
    <script>
        function generatePoem() {
            var text = document.getElementById('text').value;
            var poem = text.split('').join('<br>') + '<br>哞哞哞';
            document.getElementById('poem').innerHTML = poem;
        }
    </script>
</body>
</html>

这段代码展示了如何使用JavaScript获取用户输入，并通过简单的字符串操作生成“喵喵”（即通过换行分隔每个字符来模拟），最后将生成的喵喵和用户输入的内容显示在网页上。这个示例简单易懂，适合作为学习前端开发的入门项目。

System

2024-08-15

所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        #container {
            width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        #title {
            text-align: center;
            color: #333;
        }
        #drawing-area {
            margin-top: 10px;
            text-align: center;
        }
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1 id="title">喵喵画网</h1>
        <div id="drawing-area">
            <canvas id="drawing-canvas" width="500" height="500"></canvas>
        </div>
    </div>
 
    <script>
        const canvas = document.getElementById('drawing-canvas');
        const context = canvas.getContext('2d');
 
        // 绘制图形的函数
        function drawShape(shape) {
            context.beginPath();
            context.arc(250, 250, 200, 0, Math.PI * 2); // 圆形
            context.strokeStyle = 'blue';
            context.stroke();
        }
 
        // 清除画布
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
 
        // 用户交互逻辑
        function handleInteraction(event) {
            clearCanvas();
            drawShape();
        }
 
        // 监听鼠标移动事件
        canvas.addEventListener('mousemove', handleInteraction);
    </script>
</body>
</html>

这段代码创建了一个简单的喵喵画网页，用户将在画布上绘制一个蓝色的圆形图案，当鼠标移动时触发重绘事件。这个示例主要用于演示如何使用JavaScript和HTML5的<canvas>元素进行基本的交互式绘图。

- 阅读更多 -

html+JavaScript+css 24点计算器

System

2024-08-15

所有,css

以下是一个简单的HTML、JavaScript和CSS结合的24点计算器示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>24 Points Calculator</title>
<style>
  body { font-family: Arial, sans-serif; }
  #calculator { text-align: center; padding: 20px; }
  input[type="text"] { width: 50px; }
  button { width: 50px; margin: 5px; }
</style>
</head>
<body>
 
<div id="calculator">
  <input type="text" id="display" disabled>
  <button onclick="clearDisplay()">C</button>
  <button onclick="inputDigit(7)">7</button>
  <button onclick="inputDigit(8)">8</button>
  <button onclick="inputDigit(9)">9</button>
  <button onclick="performOperation('+')">+</button>
  <button onclick="inputDigit(4)">4</button>
  <button onclick="inputDigit(5)">5</button>
  <button onclick="inputDigit(6)">6</button>
  <button onclick="performOperation('-')">-</button>
  <button onclick="inputDigit(1)">1</button>
  <button onclick="inputDigit(2)">2</button>
  <button onclick="inputDigit(3)">3</button>
  <button onclick="performOperation('*')">&times;</button>
  <button onclick="inputDigit(0)">0</button>
  <button onclick="performOperation('/')">&divide;</button>
  <button onclick="calculateResult()">=</button>
</div>
 
<script>
  // 初始显示屏幕
  var display = document.getElementById("display");
  var currentOperation = null;
  var firstOperand = null;
  var waitingForOperand = true;
 
  function clearDisplay() {
    display.value = "";
    waitingForOperand = true;
  }
 
  function inputDigit(digit) {
    var inputValue = display.value;
    if (waitingForOperand) {
      inputValue = "";
      waitingForOperand = false;
    }
    display.value = inputValue + digit;
  }
 
  function performOperation(operation) {
    if (currentOperation != null) {
      calculateResult();
    }
    currentOperation = operation;
    firstOperand = parseFloat(display.value);
    waitingForOperand = true;
  }
 
  function calculateResult() {
    var secondOperand = parseFloat(display.value);
    if (currentOperation != null) {
      switch (currentOperation) {
        case "+":
          display.value = firstOperand + secondOperand;
          break;
        case "-":
          display.value = firstOperand - secondOperand;
          break;
        case "*":
          display.value = firstOperand * secondOperand;
          break;
        case "/":

- 阅读更多 -

JQuery-JavaScript代码库-与CSS的联动篇—我耀学IT

System

2024-08-15

所有,css




// 假设我们有一个按钮和一个元素，当按钮被点击时，元素的颜色会改变
 
// HTML 结构
// <button id="change-color-button">改变颜色</button>
// <div id="color-box"></div>
 
// CSS 样式
// #color-box {
//   width: 100px;
//   height: 100px;
//   background-color: blue;
// }
 
// JavaScript 部分
$(document).ready(function() {
  // 当按钮被点击时，改变颜色
  $('#change-color-button').click(function() {
    $('#color-box').css('background-color', 'red');
  });
});
 
// 这段代码展示了如何使用jQuery库来改变一个元素的CSS样式。当用户点击按钮时，关联的函数会被触发，并将一个元素的背景色改变为红色。

这段代码展示了如何使用jQuery库来改变一个元素的CSS样式。当用户点击按钮时，关联的函数会被触发，并将一个元素的背景色改变为红色。这是一个非常基础的例子，但它清楚地展示了如何将JavaScript、jQuery和CSS结合起来，以创建动态的网页界面。

- 阅读更多 -