分类前端技术下的文章

2024-08-17

要使用CSS3的transform属性来制作一个太阳花，你需要进行两个步骤：旋转和位移。以下是一个简单的例子：

HTML:




<div class="sunflower">
  <div class="petals"></div>
</div>

CSS:




.sunflower {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(45deg);
}
 
.petals {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  border-radius: 100px 100px 0 0;
  transform-origin: 50% -50%;
}
 
.petals:before, .petals:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: inherit;
  border-radius: 100px 100px 0 0;
}
 
.petals:before {
  transform: rotate(-45deg);
}
 
.petals:after {
  transform: rotate(45deg);
}

这段代码创建了一个基本的太阳花，它有两个花瓣，通过旋转.petals类来实现，并通过:before和:after伪元素来创建两个额外的花瓣。这些花瓣是由.petals的父元素.sunflower旋转得到的。

- 阅读更多 -

HTML5 CSS3 诱人的实例：canvas 模拟实现电子彩票刮刮乐

System

2024-08-17

所有,css3

以下是一个简化的示例，展示了如何使用HTML5 <canvas> 元素和 JavaScript 来模拟电子彩票的刮刮乐效果：




<!DOCTYPE html>
<html>
<head>
<style>
  canvas {
    border:1px solid #000;
  }
</style>
</head>
<body>
 
<canvas id="canvas" width="300" height="300"></canvas>
 
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var isDrawing = false;
  var lastX = 0;
  var lastY = 0;
  var hue = 0;
 
  function draw(e) {
    if (!isDrawing) return;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.strokeStyle = 'hsl(' + hue + ', 100%, 50%)';
    ctx.lineWidth = 10;
    ctx.stroke();
    ctx.closePath();
 
    lastX = e.offsetX;
    lastY = e.offsetY;
 
    hue++;
  }
 
  canvas.addEventListener('mousedown', function(e) {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
  });
 
  canvas.addEventListener('mousemove', draw);
 
  canvas.addEventListener('mouseup', function() {
    isDrawing = false;
  });
 
  canvas.addEventListener('mouseleave', function() {
    isDrawing = false;
  });
</script>
 
</body>
</html>

这段代码实现了简单的绘画功能，并且在用户拖动鼠标时开始绘画，在鼠标松开时结束。通过监听鼠标的移动事件来实时绘制线条，并且为每条线条分配一个随机的色调以模拟多彩的彩票效果。当用户离开绘画区域时，也结束绘画。这个示例提供了基本的引导，可以根据需要添加更多高级功能，如重置、确认、记录奖励等。

- 阅读更多 -

flex布局下，盒子被挤压时如何解决

System

2024-08-17

所有,css3

在Flex布局中，如果盒子（元素）被挤压，可以通过调整盒子内部的元素顺序、使用flex属性或者设置元素的flex-shrink属性来解决。

flex-shrink属性定义了项目的缩放比例，默认值为1，表示如果空间不足，该项目将缩小。如果想要保护某个盒子不被挤压，可以将其flex-shrink属性设置为0：




.protected-box {
  flex-shrink: 0;
}

确保将这个类添加到不想被挤压的盒子上。

如果盒子内部的元素可以调整顺序，那么可以将重要内容放在布局前面或者后面，使其不易被挤压。

还可以使用flex-grow属性来保证某个盒子获取更多的空间。

示例代码：




<div style="display: flex;">
  <div style="flex: 1; background-color: lightblue;">Box 1</div>
  <div style="flex-shrink: 0; flex-grow: 1; background-color: lightcoral;">Important Box 2</div>
  <div style="flex: 1; background-color: lightgreen;">Box 3</div>
</div>

在这个例子中，Important Box 2设置了flex-shrink: 0;和flex-grow: 1;，保证了它不会被挤压，并且会获得额外的空间。其他盒子则会根据可用空间按比例伸缩。

- 阅读更多 -

CSS进阶标签属性及案例

System

2024-08-17

所有,css

在CSS中，可以使用伪类和伪元素来增强选择器的功能，以下是一些常用的伪类和伪元素属性以及相关案例：

:first-child 选择器，选择父元素的第一个子元素：




p:first-child {
  color: red;
}

:last-child 选择器，选择父元素的最后一个子元素：




p:last-child {
  color: red;
}

:nth-child(n) 选择器，选择父元素的第n个子元素：




p:nth-child(2) {
  color: red;
}

:not(selector) 选择器，选择不匹配selector的元素：




p:not(:first-child) {
  color: red;
}

:empty 选择器，选择没有子元素（包括文本节点）的元素：




p:empty {
  display: none;
}

:target 伪类，选择当前活动的锚点元素：




p:target {
  color: red;
}

::before 和 ::after 伪元素，在元素内容前后添加内容：




p::before {
  content: "前缀";
}
 
p::after {
  content: "后缀";
}

:enabled 和 :disabled 伪类，选择可用或不可用的表单元素：




input:enabled {
  border-color: blue;
}
 
input:disabled {
  border-color: grey;
}

:checked 伪类，选择被选中的表单元素：




input:checked {
  background-color: yellow;
}

:hover 伪类，选择鼠标悬停的元素：




p:hover {
  color: blue;
}

这些是CSS中常用的一些进阶选择器和伪类，可以根据需要进行组合使用以实现更复杂的样式效果。

- 阅读更多 -

CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

System

2024-08-17

所有,css

CSS像素、物理像素、设备像素、设备像素比(DPR)、PPI(Pixel Per Inch)和Viewport是与网页设计和开发中的屏幕显示有关的概念。

CSS像素：CSS中的逻辑像素，用于定义尺寸。例如，width: 100px; 表示元素宽度为100个CSS像素。
物理像素：显示屏幕上的最小光线点，是屏幕显示的最小单位。
设备像素：手机或其他移动设备上的一个像素，通常与物理像素相同。但是，对于高PPI的设备，可能有多个物理像素对应一个设备像素。
设备像素比(DPR)：设备像素和CSS像素的比例。可以通过window.devicePixelRatio获取。
PPI(Pixel Per Inch)：每英寸像素数，用于衡量屏幕的清晰度。
Viewport：用户网页的可视区域。可以通过<meta name="viewport" content="width=device-width, initial-scale=1.0">设置使网页的宽度默认与设备宽度一致，不进行缩放。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;  /* CSS像素 */
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

以上代码中，div的宽度为100CSS像素，不管在什么设备上查看，div的视觉尺寸大致相同。通过设置viewport，可以确保在不同设备上网页的显示尺寸适配设备屏幕。

- 阅读更多 -

一个案例明白(css变量，路由守卫,路由鉴权,pinia,自定义指令)

System

2024-08-17

所有,css

由于提出的问题涉及到多个不同的技术领域，并且每个领域都需要一定的知识储备和实践经验才能完整解答，我将为每个问题提供简要的解答和示例代码。

CSS 变量 (Custom Properties):
CSS 变量允许我们定义可以在整个文档中重复使用的值。




:root {
  --main-bg-color: #f0f0f0;
}
 
.main {
  background-color: var(--main-bg-color);
}

路由守卫 (Route Guard):
在前端框架中（如 Vue.js），路由守卫用于控制路由的访问权限。




const router = new VueRouter({
  routes: [
    {
      path: '/protected',
      component: ProtectedComponent,
      beforeEnter: (to, from, next) => {
        if (!authenticated) { // 检查用户是否认证
          next('/login'); // 如果没有，重定向到登录页面
        } else {
          next(); // 如果已认证，继续
        }
      }
    }
  ]
});

路由鉴权 (Navigation Guards):
与路由守卫类似，鉴权通常在组件内部进行处理。




const MyComponent = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    if (authenticated) { // 检查用户是否认证
      next();
    } else {
      next('/login'); // 如果没有，重定向到登录页面
    }
  }
};

Pinia:
Pinia 是 Vue.js 的状态管理库，它使用 Vue 的响应式系统。




// 定义 store
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore('main', {
  state: () => ({ counter: 0 }),
  actions: {
    increment() {
      this.counter++
    }
  }
})
 
// 使用 store
import { useMainStore } from './stores/useMainStore'
 
const store = useMainStore()
store.increment()

自定义指令 (Custom Directives):
自定义指令可以用来包装DOM的特定行为。




// 注册一个全局自定义指令 `v-focus`，该指令用于元素创建后立即聚焦
Vue.directive('focus', {
  // 当绑定元素插入到DOM中
  inserted: function (el) {
    el.focus(); // 聚焦元素
  }
});
 
// 使用
<input v-focus>

以上代码示例简单展示了每个技术的概念和基本用法，但实际应用中每个技术都需要根据具体场景进行深入学习和应用。

- 阅读更多 -

css 让图片自适应变化

System

2024-08-17

所有,css

要让图片自适应变化，可以使用CSS的max-width和height属性，并将width设置为100%，这样图片就会根据父元素的宽度进行自适应变化。同时，为了防止图片变形，可以设置display: block。

下面是实现图片自适应变化的CSS代码示例：




img {
  max-width: 100%;
  height: auto;
  display: block;
}

将上述CSS添加到你的样式表中，并确保所有的图片元素都应用了这个样式。当图片的父元素宽度变化时，图片也会相应地缩放以适应新的宽度。

- 阅读更多 -

XMLHttpRequest对象 AjAX的使用

System

2024-08-17

所有,ajax

XMLHttpRequest对象是AJAX技术的核心组成部分，它可以在不重新加载页面的情况下从服务器请求数据。以下是如何使用XMLHttpRequest对象发送AJAX请求的示例代码：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置HTTP请求
// 第一个参数是HTTP请求方法，比如GET、POST
// 第二个参数是请求的URL
xhr.open('GET', 'https://api.example.com/data');
 
// 设置请求完成的处理函数
xhr.onreadystatechange = function() {
    // 请求完成并且响应状态码为200
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理服务器返回的数据
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
 
// 发送请求
xhr.send();

这段代码展示了如何使用XMLHttpRequest对象发送一个简单的GET请求，并在请求成功返回后处理数据。如果你想要发送POST请求或者处理其他类型的HTTP请求，你可能需要设置HTTP头部（例如，设置Content-Type），并且可能需要传递请求体数据。

- 阅读更多 -

【Ajax】笔记-设置CORS响应头实现跨域

System

2024-08-17

所有,ajax

在服务器上设置CORS（Cross-Origin Resource Sharing）响应头允许跨域请求，以下是一个示例代码，展示如何在Node.js的Express框架中设置CORS响应头：




const express = require('express');
const app = express();
 
// 设置CORS响应头
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许任何源访问
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允许的HTTP方法
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // 允许的HTTP请求头
  next();
});
 
// 示例路由
app.get('/api/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled data.' });
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在这个例子中，我们使用Express的中间件来设置CORS头部。Access-Control-Allow-Origin设置为*表示允许任何源进行跨域请求，你也可以将其设置为特定的域名以增强安全性。其他的方法和请求头也需要根据实际需求进行配置。这样，你的Express应用就可以处理来自不同源的Ajax请求了。

- 阅读更多 -

html JavaScript 调用chatgpt api

System

2024-08-17

所有,ajax

要在HTML和JavaScript中调用OpenAI的ChatGPT API，你需要一个有效的API密钥。以下是一个简单的示例，展示了如何使用JavaScript发送请求到ChatGPT API。

首先，你需要在OpenAI的网站上创建一个新的API密钥。

然后，你可以创建一个HTML文件，并在其中使用JavaScript代码来发送请求：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChatGPT Example</title>
    <script>
        function sendMessageToGPT() {
            const apiKey = 'YOUR_OPENAI_API_KEY'; // 替换为你的API密钥
            const messages = [
                { role: 'user', content: document.getElementById('userInput').value }
            ];
 
            fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${apiKey}`
                },
                body: JSON.stringify({
                    messages,
                    model: "gpt-3.5-turbo",
                    temperature: 0.7
                })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('botResponse').value = data.choices[0].message.content;
            })
            .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <textarea id="userInput" placeholder="Enter your message here..."></textarea>
    <button onclick="sendMessageToGPT()">Send to GPT</button>
    <textarea id="botResponse" placeholder="GPT will respond here..." readonly></textarea>
</body>
</html>

在上面的代码中，替换YOUR_OPENAI_API_KEY为你的API密钥。用户在textarea输入消息，点击按钮后，消息通过sendMessageToGPT函数发送到ChatGPT API，并将返回的响应显示在另一个textarea中。

注意：由于API使用频率和text-input的长度，OpenAI可能对请求频率有限制。在实际应用中，你可能需要实现更复杂的逻辑，比如缓存和限流，以确保遵守使用条款并保持应用的稳定性。

- 阅读更多 -