Tech Blog

2024-08-13

以下是一个使用原生JavaScript实现的简单轮播图效果的示例代码：

HTML部分：




<div id="carousel">
  <div class="slide" style="background: red;"></div>
  <div class="slide" style="background: green;"></div>
  <div class="slide" style="background: blue;"></div>
</div>
<button onclick="prevSlide()">Prev</button>
<button onclick="nextSlide()">Next</button>

CSS部分：




#carousel {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

JavaScript部分：




const carousel = document.getElementById('carousel');
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
 
const moveToSlide = (direction) => {
  const slideWidth = carousel.offsetWidth;
  slides[currentSlide].style.transform = `translateX(${direction * slideWidth}px)`;
};
 
const nextSlide = () => {
  moveToSlide(-1);
  currentSlide = (currentSlide + 1) % slides.length;
  moveToSlide(0);
};
 
const prevSlide = () => {
  moveToSlide(-1);
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  moveToSlide(0);
};

这段代码实现了一个简单的轮播图效果。用户可以通过点击按钮来切换到上一张或下一张图片。轮播效果通过更改每张幻灯片的transform属性来实现平滑过渡。currentSlide变量用于跟踪当前显示的幻灯片索引。

- 阅读更多 -

Vue学习之样式汇总

System

2024-08-13

所有,css3

在Vue中，可以通过以下方式为组件添加样式：

使用<style>标签在单文件组件（.vue文件）中指定样式：




<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>
 
<script>
export default {
  // 组件逻辑
}
</script>
 
<style scoped>
.my-component {
  /* 组件特定样式 */
  color: blue;
}
</style>

使用<style>标签但不使用scoped特性，将样式应用于全局：




<style>
.global-style {
  /* 全局样式 */
  background-color: yellow;
}
</style>

在JavaScript中使用CSS-in-JS库（如styled-components）来创建组件级的样式：




import styled from 'styled-components';
 
const StyledComponent = styled.div`
  padding: 10px;
  margin: 15px;
  background-color: red;
`;
 
export default {
  render() {
    return <StyledComponent>这是一个样式化的组件</StyledComponent>;
  }
}

使用CSS模块，通过CSS类名的哈希化来避免样式冲突：




/* 组件A的样式 */
.ComponentA__item {
  color: green;
}
 
/* 组件B的样式 */
.ComponentB__item {
  color: purple;
}

在JavaScript中直接操作DOM来动态添加样式：




export default {
  mounted() {
    this.$el.style.color = 'pink';
  }
}

以上方法可以根据项目需求和偏好选择使用。在大型应用中，通常推荐使用CSS Modules或者CSS-in-JS库来避免样式冲突。

- 阅读更多 -

css绘制3D炫动ikun

System

2024-08-13

所有,css3

要使用CSS绘制一个3D炫动的iKun，你需要使用CSS3的transform属性来创建3D效果，并使用@keyframes动画来实现动态效果。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Cube</title>
<style>
  .ikun {
    width: 100px;
    height: 100px;
    margin: 50px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
 
  .ikun div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    opacity: 0.5;
  }
 
  .ikun div:nth-child(1) {
    transform: translateZ(50px);
  }
 
  .ikun div:nth-child(2) {
    background: green;
    transform: rotateX(90deg) translateZ(50px);
  }
 
  .ikun div:nth-child(3) {
    background: blue;
    transform: rotateY(90deg) translateZ(50px);
  }
 
  .ikun div:nth-child(4) {
    background: yellow;
    transform: rotateX(90deg) rotateY(90deg) translateZ(50px);
  }
 
  .ikun div:nth-child(5) {
    background: cyan;
    transform: rotateY(180deg) translateZ(50px);
  }
 
  .ikun div:nth-child(6) {
    background: magenta;
    transform: rotateX(90deg) rotateY(-90deg) translateZ(50px);
  }
 
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="ikun">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</body>
</html>

这段代码创建了一个立方体，每个面都有不同的颜色，并且通过CSS动画不断旋转。你可以根据需要调整.ikun的大小和.ikun div的颜色和尺寸来创建一个符合你需求的iKun。

- 阅读更多 -

HTML vue 识别文本中的进行换行

System

2024-08-13

所有,css3

您的问题似乎不完整，但我猜您可能想要知道如何在Vue中识别并处理HTML文本。Vue提供了一些方法来处理和转换文本。

方法一：使用Vue的文本插值

在Vue中，最简单的文本插值方式就是使用双大括号{{}}。




<template>
  <div>
    {{ message }}
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

方法二：使用v-html指令

如果你想插入HTML，你可以使用v-html指令。但是要注意，这样做可能会导致跨站脚本攻击(XSS)，因此要确保你插入的内容是安全的。




<template>
  <div v-html="rawHtml"></div>
</template>
 
<script>
export default {
  data() {
    return {
      rawHtml: '<span style="color: red;">This should be red.</span>'
    }
  }
}
</script>

方法三：使用计算属性

如果你需要对数据进行复杂的转换，你可以使用计算属性。




<template>
  <div>{{ reversedMessage }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
}
</script>

方法四：使用方法和函数

你也可以在模板中使用方法和函数来处理文本。




<template>
  <div>{{ formatMessage(message) }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    formatMessage(msg) {
      return msg.toUpperCase();
    }
  }
}
</script>

以上就是在Vue中处理文本的一些常见方法。

- 阅读更多 -

CSS定位布局详解

System

2024-08-13

所有,css3

CSS定位布局主要是通过position属性来实现的，它有四个值：static、relative、absolute和fixed。

static：默认值，没有定位，元素出现在正常的流中。
relative：相对于其正常位置进行定位。
absolute：相对于最近的非static定位的父元素进行定位。
fixed：相对于浏览器窗口进行定位。

实例代码：




<!DOCTYPE html>
<html>
<head>
<style>
  .static {
    position: static; /* 默认位置 */
    left: 50px; /* 左侧偏移50px */
    top: 20px; /* 顶部偏移20px */
  }
  
  .relative {
    position: relative; /* 相对于正常位置定位 */
    left: 40px; /* 左侧偏移40px */
    top: 10px; /* 顶部偏移10px */
  }
  
  .absolute {
    position: absolute; /* 相对于最近的非static定位父元素定位 */
    left: 30px; /* 左侧偏移30px */
    top: 5px; /* 顶部偏移5px */
  }
  
  .fixed {
    position: fixed; /* 相对于浏览器窗口定位 */
    right: 20px; /* 右侧偏移20px */
    bottom: 15px; /* 底部偏移15px */
  }
  
  .parent {
    position: relative; /* 设置为relative以便于absolute定位 */
    width: 300px; /* 设置宽度 */
    height: 200px; /* 设置高度 */
    background-color: #f0f0f0; /* 背景颜色 */
    border: 2px solid #000; /* 边框 */
  }
</style>
</head>
<body>
 
<div class="parent">
  <div class="static">Static</div>
  <div class="relative">Relative</div>
  <div class="absolute">Absolute</div>
  <div class="fixed">Fixed</div>
</div>
 
</body>
</html>

在这个例子中，.parent是一个相对定位的容器，其四个子元素分别使用不同的定位方式。.static是默认定位，.relative、.absolute和.fixed都是相对定位，.absolute的偏移是相对于.parent的。.fixed是相对于浏览器窗口的固定定位。

- 阅读更多 -

在 CSS 中设置 cellpadding 和 cellspacing？

System

2024-08-13

所有,css3

在 CSS 中，没有直接的属性可以设置 cellpadding 和 cellspacing，这两个属性是属于 HTML 表格的，是在 HTML 标签内部使用的。在 CSS 中，我们可以使用 padding 和 border 属性来设置单元格的内边距和边框，从而达到类似 cellpadding 和 cellspacing 的效果。

解决方案一：

HTML:




<table class="table-class">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

CSS:




.table-class {
  border-collapse: collapse; /* 移除单元格间的距离 */
}
 
.table-class td {
  padding: 10px; /* 设置单元格内边距 */
  border: 1px solid black; /* 设置单元格边框 */
}

解决方案二：

HTML:




<table class="table-class">
  <tr>
    <td class="td-class">Cell 1</td>
    <td class="td-class">Cell 2</td>
  </tr>
</table>

CSS:




.table-class {
  border-collapse: collapse; /* 移除单元格间的距离 */
}
 
.td-class {
  padding: 10px; /* 设置单元格内边距 */
  border: 1px solid black; /* 设置单元格边框 */
}

在上述代码中，border-collapse: collapse; 是用来移除表格单元格之间的默认间距（即 cellspacing），padding 和 border 是用来设置单元格的内边距和边框（即 cellpadding）。

注意：在实际开发中，我们通常会使用第一种方法，因为这样可以减少 CSS 的代码量，并且使得每个单元格都有相同的样式。

- 阅读更多 -

用点jquery实现的登录页面

System

2024-08-13

所有,css3

要使用jQuery实现一个简单的登录页面，你可以创建一个HTML表单，并使用jQuery来处理表单提交和显示错误信息。以下是一个简单的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<form id="loginForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <button type="submit">Login</button>
</form>
 
<div id="errorMessage" style="display: none; color: red;"></div>
 
<script>
$(document).ready(function() {
    $('#loginForm').submit(function(e) {
        e.preventDefault();
        var username = $('#username').val();
        var password = $('#password').val();
 
        // 这里只是示例，实际应用应该发送到服务器进行验证
        if (username === 'admin' && password === 'admin') {
            // 登录成功
            window.location.href = 'dashboard.html'; // 假设有一个dashboard.html页面
        } else {
            // 登录失败
            $('#errorMessage').text('Invalid username or password.').show();
        }
    });
});
</script>
 
</body>
</html>

在这个例子中，我们创建了一个简单的登录表单，并使用jQuery来处理提交事件。当用户名和密码正确时，页面会跳转到一个假设的dashboard页面。如果用户名或密码不正确，会显示一个错误信息。

请注意，实际应用中，登录验证应该发送到服务器进行，而且密码应该在服务器端加密处理，避免安全问题。

- 阅读更多 -

css 画图之质感盒子

System

2024-08-13

所有,css3

要使用CSS画出一个质感盒子，可以使用CSS的box-shadow属性来创建层次感和阴影，以及使用border-radius来增加圆角，使盒子看起来更加有质感。以下是一个简单的例子：

HTML:




<div class="box"></div>

CSS:




.box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 20px;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.1), 
    0 1px 2px rgba(0, 0, 0, 0.2);
  margin: 20px;
}

这段代码将创建一个带有白色背景、边框和圆角的盒子，并且使用两个box-shadow来增加层次感。margin属性用于设置盒子之间的距离，以便更好地展示层次感。

- 阅读更多 -

table中的tbody高度超出部分，显示滚动条并固定表头

System

2024-08-13

所有,css3

要实现当tbody的高度超出时显示滚动条并固定表头，可以使用CSS来控制表格的样式，并通过JavaScript来动态调整。以下是实现这个功能的示例代码：

HTML:




<table id="myTable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody id="myTbody">
    <!-- 表格数据 -->
  </tbody>
</table>

CSS:




#myTable {
  display: block;
  overflow-y: auto;
  height: 200px; /* 根据需要设置表格的高度 */
}
 
#myTbody {
  display: block;
  height: auto; /* 根据内容动态调整 */
  overflow-y: auto;
  overflow-x: hidden;
}
 
/* 固定表头样式 */
thead tr {
  position: sticky;
  top: 0;
  background-color: #f9f9f9;
  z-index: 10;
}

JavaScript (动态调整tbody的高度):




window.onload = function() {
  var table = document.getElementById('myTable');
  var tbody = document.getElementById('myTbody');
 
  // 计算表格的总高度减去表头高度
  var tableHeight = table.offsetHeight;
  var theadHeight = table.getElementsByTagName('thead')[0].offsetHeight;
  var newTbodyHeight = tableHeight - theadHeight;
 
  // 设置tbody的高度
  tbody.style.height = newTbodyHeight + 'px';
};

这段代码会在页面加载完成后计算table的总高度并减去thead的高度，然后将结果设置为tbody的高度，使得tbody超出部分可以滚动。同时，表头被设置为position: sticky以固定在顶部。

- 阅读更多 -

css：transform的3D变换属性

System

2024-08-13

所有,css3

CSS的transform属性是一个很强大的工具，它可以让你对元素进行2D或3D的变换。3D变换包括旋转、缩放、移动以及倾斜等。

以下是一些使用CSS transform的3D变换的例子：

旋转（rotate）

你可以使用rotateY或rotateX来创建Y轴或X轴的旋转，这可以创建出翻转或旋转的效果。




div {
  transform: rotateY(180deg); /* 绕Y轴旋转180度 */
}

缩放（scale）

使用scale3D，你可以指定在3D空间中的X、Y、Z轴的缩放值。




div {
  transform: scale3D(2, 2, 2); /* 在3个轴向上都放大2倍 */
}

移动（translate）

使用translate3D，你可以指定在3D空间中的X、Y、Z轴的移动值。




div {
  transform: translate3D(50px, 100px, 150px); /* 在3个轴向上移动 */
}

倾斜（skew）

使用skewY或skewX可以创建Y轴或X轴的倾斜效果。




div {
  transform: skewY(30deg); /* 绕Y轴倾斜30度 */
}

矩阵变换（matrix）

使用matrix3d可以创建一个更复杂的3D变换，这需要一个4x4矩阵。




div {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0);
}

以上就是一些基本的3D变换的例子，你可以根据自己的需求来使用这些变换。

- 阅读更多 -