分类前端技术下的文章

2024-08-17

以下是一个简单的HTML和JavaScript代码示例，用于创建一个网页上的拼图游戏。这个示例使用了一个简单的9块图片的拼图游戏，并假设所有图片都已经预先排列好，并隐藏在HTML中。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Puzzle Game</title>
<style>
  .puzzle-container {
    width: 300px;
    height: 300px;
    position: relative;
    user-select: none;
  }
  .puzzle-piece {
    position: absolute;
    width: 100px;
    height: 100px;
    image-rendering: pixelated;
  }
</style>
</head>
<body>
 
<div class="puzzle-container" id="puzzleContainer">
  <img class="puzzle-piece" src="piece1.png" data-position="0">
  <img class="puzzle-piece" src="piece2.png" data-position="1">
  <img class="puzzle-piece" src="piece3.png" data-position="2">
  <img class="puzzle-piece" src="piece4.png" data-position="3">
  <img class="puzzle-piece" src="piece5.png" data-position="4">
  <img class="puzzle-piece" src="piece6.png" data-position="5">
  <img class="puzzle-piece" src="piece7.png" data-position="6">
  <img class="puzzle-piece" src="piece8.png" data-position="7">
  <img class="puzzle-piece" src="piece9.png" data-position="8">
</div>
 
<script>
  const puzzleContainer = document.getElementById('puzzleContainer');
  const pieces = document.querySelectorAll('.puzzle-piece');
  const numPieces = pieces.length;
  const blankIndex = numPieces - 1;
 
  // Shuffle the pieces
  const shuffle = (arr) => {
    let currentIndex = arr.length;
    while (0 !== currentIndex) {
      let randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
 
      [arr[currentIndex], arr[randomIndex]] = [
        arr[randomIndex], arr[currentIndex]];
    }
    return arr;
  };
 
  // Move a piece
  const movePiece = (piece, position) => {
    piece.style.left = `${position % 3 * 100}px`;
    piece.style.top = `${Math.floor(position / 3) * 100}px`;
  };
 
  // Setup the puzzle
  const setupPuzzle = () => {
    const shuffledPieces = shuffle([...pieces]);
    puzzleContainer.append(...shuffledPieces);
    shuffledPieces[blankIndex].style.visibility = 'hidden';
  };
 
  // Check if the puzzle is solved
  const checkSolved = () => {
    return [...pieces].every((piece, index) => piece.getAttribute('data-position') === index);
  };
 
  // Handle piece drag
  pieces.forEach((piece, index) => {
    piece.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', '');
    });
 
    piece.addEventListener('drag',

System

2024-08-17

所有,html

在使用一些前端框架（如Vue.js, React.js）时，可能会遇到需要渲染HTML字符串的情况。这时，框架通常会出于安全考虑默认禁止渲染HTML字符串，因为它们可能包含恶意代码。

然而，有些情况下我们确实需要渲染HTML字符串。例如，我们可能有一个从CMS或者其他系统获取的HTML内容，我们需要将其嵌入到我们的应用中。这时，我们可以使用v-html指令（Vue.js）或者dangerouslySetInnerHTML属性（React.js）来实现这一功能。

Vue.js中使用v-html指令：




<template>
  <div v-html="rawHtml"></div>
</template>
 
<script>
export default {
  data() {
    return {
      rawHtml: '<p>This is raw HTML content</p>'
    }
  }
}
</script>

React.js中使用dangerouslySetInnerHTML属性：




function MyComponent() {
  const rawHtml = {
    __html: '<p>This is raw HTML content</p>'
  };
 
  return <div dangerouslySetInnerHTML={rawHtml} />;
}

请注意，使用这些选项时需要非常小心，因为它们可能会导致跨站脚本攻击（XSS）。确保你的HTML内容是安全的，不含有恶意脚本。

- 阅读更多 -

推荐一款强大的Vue HTML编辑器：vue-html-editor

System

2024-08-17

所有,html

在Vue.js中，我们可以使用很多富文本编辑器，但是vue-html-editor是其中一款非常强大且用户友好的编辑器。

vue-html-editor是一个Vue.js组件，它允许用户在网页上编辑HTML内容。它基于Quill富文本编辑器，并提供了一种简单的方法来集成到Vue.js应用程序中。

以下是如何在Vue项目中安装和使用vue-html-editor的示例：

首先，你需要使用npm或yarn来安装vue-html-editor。




npm install vue-html-editor --save

或者




yarn add vue-html-editor

在你的Vue组件中导入并注册这个编辑器。




<template>
  <div>
    <vue-html-editor v-model="content"></vue-html-editor>
  </div>
</template>
 
<script>
import VueHtmlEditor from 'vue-html-editor'
 
export default {
  components: { VueHtmlEditor },
  data() {
    return {
      content: ''
    }
  }
}
</script>

在这个例子中，我们创建了一个名为content的数据属性，并将其作为v-model绑定到vue-html-editor组件。这样，我们就可以通过修改content来获取或设置编辑器的内容。

vue-html-editor提供了许多配置选项，包括工具栏自定义、事件处理程序附加等。你可以在其官方文档中查看更多详细信息。

- 阅读更多 -

JavaWeb？一篇足够！HTML和CSS笔记整理

System

2024-08-17

所有,html

在JavaWeb开发中，HTML和CSS是用于创建网页的基本技术。以下是一些常用的HTML和CSS代码示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="http://www.example.com">这是一个链接</a>
</body>
</html>

CSS部分（保存为styles.css文件，并且在HTML的<head>部分通过<link>标签链接）：




body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    margin: 20px;
}
 
h1 {
    color: #333333;
    font-size: 24px;
}
 
p {
    color: #555555;
    font-size: 16px;
    line-height: 1.5;
}
 
a {
    color: #007bff;
    text-decoration: none;
}
 
a:hover {
    text-decoration: underline;
}

这个示例展示了如何创建一个简单的HTML页面并使用外部CSS文件来提供样式。在实际开发中，HTML用于定义网页的结构，CSS用于控制网页的外观。

- 阅读更多 -

前端：HTML百度页面制作（快速简单）

System

2024-08-17

所有,html

要使用HTML快速简单地制作一个模拟的百度首页，你可以参考以下代码：




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模拟百度首页</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .header {
            height: 88px;
            background-color: #f0f0f0;
            border-bottom: 1px solid #d8d8d8;
        }
        .content {
            margin: 20px 20px 0;
            min-height: calc(100% - 88px - 100px);
        }
        .footer {
            height: 100px;
            background-color: #f0f0f0;
            border-top: 1px solid #d8d8d8;
        }
    </style>
</head>
<body>
    <div class="header">
        <!-- 这里放置头部内容 -->
    </div>
    <div class="content">
        <!-- 这里放置主体内容 -->
    </div>
    <div class="footer">
        <!-- 这里放置底部内容 -->
    </div>
</body>
</html>

这个简易的HTML页面包含了一个模拟的头部（header）、内容区域（content）和底部（footer）。你可以根据需要添加更多的HTML元素和CSS样式来完善页面的布局和设计。

- 阅读更多 -

如何用HTML写一个新闻页面(列表标签)

System

2024-08-17

所有,html

下面是一个简单的HTML新闻页面示例，使用了无序列表<ul>来展示新闻列表：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .news-list {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #eee;
            border-radius: 5px;
        }
        .news-list h2 {
            text-align: center;
            color: #333;
        }
        .news-list li {
            margin-bottom: 10px;
        }
        .news-list li a {
            text-decoration: none;
            color: #000;
        }
        .news-list li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
 
<div class="news-list">
    <h2>最新新闻</h2>
    <ul>
        <li><a href="news-story.html">标题1: 新型疫情影响全球供应链</a></li>
        <li><a href="news-story.html">标题2: 人工智能在医疗保健中的应用</a></li>
        <li><a href="news-story.html">标题3: 空间探测技术的最新进展</a></li>
        <li><a href="news-story.html">标题4: 气候变化对农业生产的影响</a></li>
        <li><a href="news-story.html">标题5: 新能源汽车市场的快速发展</a></li>
    </ul>
</div>
 
</body>
</html>

这个HTML页面包含了一个新闻列表，每条新闻都是一个链接，链接到一个假设的新闻故事页面news-story.html。列表有一个简单的样式，使用了CSS来增强用户体验。

- 阅读更多 -

HTML中img图片进行等比例缩放的实例代码

System

2024-08-17

所有,html

在HTML中，要使图片等比缩放，可以通过设置图片的宽度或高度之一，并让浏览器自动计算另一个维度以保持图片的原始比例。这可以通过CSS来实现。

以下是一个简单的例子，演示如何使用CSS来等比缩放图片：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>等比缩放图片示例</title>
<style>
  .responsive-img {
    max-width: 100%; /* 最大宽度为父容器宽度 */
    height: auto;    /* 高度自动缩放以保持比例 */
  }
</style>
</head>
<body>
 
<img src="path-to-your-image.jpg" alt="描述文字" class="responsive-img">
 
</body>
</html>

在这个例子中，.responsive-img 类定义了图片的最大宽度为100%（即父容器的宽度），并且高度自动调整以保持图片原有的比例。这样，无论图片原始尺寸如何，它都会在不超出其父容器的情况下最大程度地填充空间。

- 阅读更多 -

通过 tomcat 让手机访问到电脑写的 html 网页

System

2024-08-17

所有,html

要通过Tomcat让手机访问电脑上写的HTML页面，你需要执行以下步骤：

将HTML页面放置在Tomcat的webapps目录下的某个应用中。
确保Tomcat服务器正在运行。
确定你的电脑IP地址，并记下来。
确保你的电脑防火墙允许8080端口（或者你自定义的端口）的流量。
在手机的浏览器中输入电脑的IP地址加上Tomcat的默认端口号（或者你自定义的端口号），比如 http://192.168.1.100:8080/你的应用名/。

以下是简单的示例：

创建一个HTML文件，比如 index.html，并将其放置在Tomcat的webapps目录下的新建应用中，如 webapps/myapp/。




<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

确保Tomcat运行中，通常可以通过访问 http://localhost:8080 来验证。
查看电脑的IP地址，在Windows上可以在命令行中使用 ipconfig，在Linux上使用 ifconfig 或 ip addr。
在手机的浏览器中输入电脑的IP地址和Tomcat的端口号，比如 http://192.168.1.100:8080/myapp/。

确保你的手机和电脑连接在同一个局域网内，这样手机才能通过电脑的IP地址访问到电脑上的页面。如果你的Tomcat设置了非默认端口，请在IP地址后加上相应的端口号。

- 阅读更多 -

【JS】ECMA标准的脚本语言规范

System

2024-08-17

所有,javascript

ECMAScript是由ECMA国际组织发布的一种脚本语言规范标准。它不是一种可以直接运行的程序，而是一种用于定义JavaScript和其他语言行为的语法和语义的规范。

以下是一个简单的ECMAScript 6 (ES6)示例，展示了一些新特性，如箭头函数和模板字符串：




// 使用箭头函数简写函数
const sum = (a, b) => a + b;
 
// 使用模板字符串简化字符串拼接
const name = "World";
const greeting = `Hello, ${name}!`;
 
console.log(sum(5, 3)); // 输出: 8
console.log(greeting); // 输出: Hello, World!

这段代码演示了ES6中的两个新特性：箭头函数和模板字符串。它们使代码更加简洁和易读。

- 阅读更多 -

HTML实现进度条/加载框模版

System

2024-08-17

所有,html

以下是一个简单的HTML进度条和加载框的实现模版：

进度条模版：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar Template</title>
<style>
  .progress-bar-container {
    width: 100%;
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
  }
 
  .progress-bar {
    height: 30px;
    width: 0%;
    background-color: #76B900;
    border-radius: 10px;
    transition: width 1s ease-in-out;
  }
 
  .progress-text {
    padding: 5px 10px;
    font-size: 16px;
    text-align: center;
  }
</style>
</head>
<body>
 
<div class="progress-bar-container">
  <div class="progress-bar" style="width: 50%;">
    <div class="progress-text">50%</div>
  </div>
</div>
 
</body>
</html>

加载框模版：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Overlay Template</title>
<style>
  .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
  }
 
  .loading-overlay.active {
    visibility: visible;
    opacity: 1;
  }
 
  .loading-content {
    color: white;
    font-size: 24px;
    text-align: center;
  }
</style>
</head>
<body>
 
<div class="loading-overlay">
  <div class="loading-content">Loading...</div>
</div>
 
<script>
  // 显示加载框
  function showLoading() {
    document.querySelector('.loading-overlay').classList.add('active');
  }
 
  // 隐藏加载框
  function hideLoading() {
    document.querySelector('.loading-overlay').classList.remove('active');
  }
 
  // 示例：模拟加载操作
  window.onload = function() {
    showLoading();
    setTimeout(hideLoading, 3000); // 3秒后隐藏加载框
  }
</script>
 
</body>
</html>

这两个模版提供了简单的HTML和CSS来实现进度条和加载框，并附带了基本的JavaScript函数来控制加载框的显示和隐藏。这些模版可以根据实际需求进行扩展和定制。

- 阅读更多 -