分类前端技术下的文章

2024-08-24

以下是一个简单的使用HTML、CSS和jQuery实现的图片翻页特效示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Flipbook</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
 
<div class="flipbook">
  <div class="page" style="background-image: url('image1.jpg');"></div>
  <div class="page" style="background-image: url('image2.jpg');"></div>
  <div class="page" style="background-image: url('image3.jpg');"></div>
  <!-- Add more pages here if needed -->
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




.flipbook {
  width: 300px;
  height: 400px;
  position: relative;
  perspective: 1000px;
}
 
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  transition: transform 1.0s;
  background-size: cover;
  background-position: center;
}
 
.page.flip {
  transform: rotateY(-180deg);
}

jQuery (script.js):




$(document).ready(function() {
  var currentPage = 1;
  var numPages = $('.page').length;
 
  $('.page').click(function() {
    if (currentPage === 1) {
      $('.page').eq(numPages - 1).addClass('flip');
      currentPage = numPages;
    } else if (currentPage === numPages) {
      $('.page').eq(0).addClass('flip');
      currentPage = 1;
    } else {
      $('.page').eq(currentPage - 2).addClass('flip');
    }
  });
});

这个简单的例子使用了类 .flipbook 包裹所有的 .page 元素，每个 .page 元素都是一个页面，通过点击页面进行翻转。当翻转发生时，通过添加 .flip 类来改变页面的 transform 属性，从而创建翻页效果。这个例子没有包含所有的错误处理和完善功能，例如边界条件检查和动画完成的事件监听等，但足以展示基本的翻页特效实现。

- 阅读更多 -

jQuery：一站式指南

System

2024-08-24

所有,jquery

jQuery是一种快速、简洁的JavaScript库，设计的目标是“写得少，做得多”。以下是一些常见的jQuery使用场景和示例代码：

选择元素：




$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

修改HTML内容：




$("p").html("Hello, jQuery!");

修改CSS样式：




$("p").css("color", "blue");

事件监听：




$("button").click(function(){
  alert("Clicked!");
});

动画效果：




$("div").animate({left: '+50px'}, 500);

AJAX请求：




$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

链式调用：




$("div").find("h3").andSelf().addClass("blue");

遍历：




$("li").each(function(){
  alert($(this).text());
});

事件委托：




$("ul").on("click", "li", function(){
  alert($(this).text());
});

插件开发：




$.fn.extend({
  pluginName: function() {
    return this.each(function() {
      // 插件代码
    });
  }
});
 
$("#myElement").pluginName();

这些示例展示了jQuery的基本用法，涵盖了常见的场景，如DOM操作、事件处理、动画、Ajax和插件开发。jQuery提供了一个强大且灵活的工具集，用于简化JavaScript开发。

- 阅读更多 -

js获取键盘按键事件、判断键盘按键事件、调用键盘按键事件

System

2024-08-24

所有,jquery

在JavaScript中，可以通过监听keydown、keypress或keyup事件来获取键盘按键事件。以下是如何检测用户按下的键、调用函数以响应特定按键，并在用户按下特定键时阻止默认行为的示例代码。




// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
    const key = event.key; // 获取按下的键名
    console.log('按下了键:', key);
 
    // 判断是否按下了特定的键，例如 'Enter'
    if (key === 'Enter') {
        console.log('按下了回车键');
        // 调用函数
        handleEnterKey();
    }
 
    // 阻止默认行为，例如阻止按下F12时打开开发者工具
    if (key === 'F12') {
        event.preventDefault();
        console.log('阻止了F12的默认行为');
    }
});
 
// 定义处理回车键的函数
function handleEnterKey() {
    console.log('执行回车键相关的操作');
}

在这个例子中，我们为document添加了一个keydown事件监听器，它会在用户按下键盘上的任何键时被触发。通过event.key属性，我们可以获取到用户按下的键名。然后，我们可以根据需要判断按下的键是否为特定键，如果是，则执行相应的操作。最后，我们可以使用event.preventDefault()方法来阻止默认的行为。

- 阅读更多 -

TypeScript基础数据类型以及变量声明

System

2024-08-24

所有,typescript




// TypeScript 基础数据类型
let isDone: boolean = false; // 布尔值
let count: number = 10; // 数值
let name: string = "Alice"; // 字符串
let list: number[] = [1, 2, 3]; // 数组
let x: undefined = undefined; // undefined
let y: null = null; // null
 
// 使用接口定义对象类型
interface Person {
  name: string;
  age: number;
}
let person: Person = { name: "Bob", age: 25 }; // 对象
 
// 使用元组定义固定长度的数组
let tuple: [number, string] = [7, "hello"]; // 元组
 
// 使用枚举定义数值类型的集合
enum Color {
  Red = 1,
  Green,
  Blue
}
let color: Color = Color.Green; // 枚举
 
// 任意类型 any 可以用来存储任意类型的值
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 可以赋予任何类型的值
 
// 变量声明关键字
let declaresVariable = "using let"; // 使用 let 声明的变量
var usesVar = "using var"; // 使用 var 声明的变量
const constantVariable = "constant value"; // 使用 const 声明的常量

这段代码展示了在TypeScript中如何声明和使用不同的数据类型，包括基本类型、数组、对象、元组、枚举以及任意类型。同时，它也展示了如何使用let, var, 和 const这三个关键字来声明变量。这有助于理解TypeScript中变量的声明和使用。

- 阅读更多 -

typeScript中的类型断言

System

2024-08-24

所有,typescript

在TypeScript中，类型断言是一种告诉编译器你比它更了解该数据类型的方式。你可以使用 as 关键字或者 <> （尖括号）来进行类型断言。

解决方案1：使用as关键字进行类型断言




let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

解决方案2：使用<>尖括号进行类型断言




let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

解决方案3：在TypeScript中，你还可以使用"类型断言函数"来进行类型断言。这种方法可以让你在一个函数调用中进行类型断言。




function getLength(s: string | number): number {
    if ((<string>s).length) {
        return (<string>s).length;
    } else {
        return s.toString().length;
    }
}
 
let sample = "Hello World";
let len = getLength(sample);

在这个例子中，我们有一个函数getLength，它接受一个字符串或数字作为参数。我们使用了类型断言函数 <string>s 来告诉编译器在我们的if语句中，s应该被当作一个字符串。这样我们就可以调用.length属性。

注意：类型断言不会改变运行时的类型，它只是告诉编译器如何看待某些变量的类型。在运行时，如果你尝试访问不属于实际类型的属性或方法，你可能会遇到运行时错误。

- 阅读更多 -

Ts：类型断言，泛型

System

2024-08-24

所有,typescript

在TypeScript中，类型断言和泛型都用于在编译时指定变量的类型。

类型断言: 当你确定一个变量的类型时，你可以使用类型断言来告诉TypeScript编译器。




let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

或者使用另一种语法：




let strLength: number = (<string>someValue).length;

泛型: 当你有一个函数或者类需要处理多种类型时，你可以使用泛型来实现。




function identity<T>(arg: T): T {
    return arg;
}
 
let output = identity<string>("myString");  // output 类型为 string
let output2 = identity("myString");  // 类型推断

泛型函数identity可以处理任何类型，因为它使用了泛型类型T。当调用identity函数时，可以显式地指定T的类型，也可以让编译器自动推断类型。

- 阅读更多 -

vue3+vue-cli4+TypeScript使用腾讯云滑块验证

System

2024-08-24

所有,typescript

在Vue 3 + Vue CLI 4 + TypeScript项目中使用腾讯云滑块验证，首先需要在项目中安装腾讯云提供的前端SDK：




npm install tencentcloud-sdk-node-unsigned

然后，在Vue组件中创建滑块验证的实例并处理验证逻辑：




<template>
  <div>
    <button @click="verify">验证</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import * as TencentCloud from 'tencentcloud-sdk-node-unsigned';
 
export default defineComponent({
  name: 'TencentCaptcha',
  methods: {
    verify() {
      const captcha = new TencentCloud.Captcha({
        SecretId: '你的腾讯云SecretId',
        SecretKey: '你的腾讯云SecretKey',
      });
 
      // 这里的this.widgetId是滑块组件的ID，由腾讯云提供的网页中的slot生成
      captcha.CaptchaOperations({
        Operation: 'ResumeSession',
        SessionId: '', // 这里填写之前获取的SessionId
        CaptchaType: 'Block', // 滑块验证类型
        Ticket: '', // 这里填写用户提交的Token
        Randstr: '', // 这里填写用户提交的Randstr
        UserIp: '用户IP', // 用户的IP地址，由服务端获取
        CaptchaAppId: 你的腾讯云AppId, // 腾讯云AppId
        TimeStamp: '', // 服务端获取的时间戳
        NonceStr: '', // 服务端生成的随机字符串
      }).then((data: any) => {
        // 验证成功的处理逻辑
        console.log(data);
      }).catch((error: any) => {
        // 验证失败的处理逻辑
        console.error(error);
      });
    },
  },
});
</script>

请注意，在实际应用中，SecretId和SecretKey需要你在腾讯云控制台创建，并且不应直接硬编码在前端代码中，以免泄露安全信息。应该在服务端使用腾讯云的SDK，并通过API调用的方式发送验证请求。此外，用户的IP、Token和Randstr也应该由前端收集后发送到服务端，再由服务端发送给腾讯云进行验证。

System

2024-08-24

所有,typescript

在Vue 3和Ant Design Vue中引入Ant Design Vue组件库的步骤如下：

安装ant-design-vue：




npm install ant-design-vue@next --save

在项目入口文件main.ts中引入Ant Design Vue库并注册：




import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
 
const app = createApp(App)
 
app.use(Antd)
 
app.mount('#app')

在组件中使用Ant Design Vue组件，例如使用a-button组件：




<template>
  <a-button type="primary">按钮</a-button>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'MyComponent',
  // 其他选项...
});
</script>

以上代码展示了如何在Vue 3和TypeScript项目中安装和使用Ant Design Vue组件库。

- 阅读更多 -

vite+vue3+ts 项目搭建

System

2024-08-24

所有,typescript

要使用Vite搭建基于Vue 3和TypeScript的项目，你需要执行以下步骤：

确保你已经安装了Node.js（建议使用最新的LTS版本）。
安装Vite CLI工具：
```
npm init vite@latest
```
在命令行中通过Vite CLI创建新项目，选择Vue + TypeScript模板：
```
npm init vite@latest my-vue3-app -- --template vue-ts
```
进入项目文件夹：
```
cd my-vue3-app
```
安装依赖：
```
npm install
```
启动开发服务器：
```
npm run dev
```

以上步骤将会创建一个新的Vue 3项目，并且支持TypeScript。

这是一个简单的Vue 3组件示例，使用TypeScript编写：




<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'AppComponent',
  data() {
    return {
      message: 'Hello, Vite + Vue 3 + TypeScript!',
    };
  },
});
</script>

这个组件定义了一个简单的数据属性message，并在模板中显示它。这个示例展示了如何在Vue 3和TypeScript项目中编写组件。

- 阅读更多 -

uniapp+vue3，签字功能

System

2024-08-24

所有,typescript

在uniapp+vue3环境中实现签字功能，可以使用HTML5的canvas元素。以下是一个基本的签字组件示例：




<template>
  <view class="signature-pad">
    <canvas canvas-id="signature-canvas" @touchstart="startSign" @touchmove="continueSign" @touchend="endSign"></canvas>
  </view>
</template>
 
<script setup>
import { ref } from 'vue';
 
const isSigning = ref(false);
const lastPoint = ref(null);
const canvas = ref(null);
const ctx = ref(null);
 
const startSign = (event) => {
  isSigning.value = true;
  const touch = event.touches[0];
  const canvasRect = canvas.value.getBoundingClientRect();
  const point = {
    x: touch.clientX - canvasRect.left,
    y: touch.clientY - canvasRect.top
  };
  ctx.value.beginPath();
  ctx.value.moveTo(point.x, point.y);
  lastPoint.value = point;
};
 
const continueSign = (event) => {
  if (isSigning.value && lastPoint.value) {
    const touch = event.touches[0];
    const canvasRect = canvas.value.getBoundingClientRect();
    const point = {
      x: touch.clientX - canvasRect.left,
      y: touch.clientY - canvasRect.top
    };
    ctx.value.lineTo(point.x, point.y);
    ctx.value.stroke();
    lastPoint.value = point;
  }
};
 
const endSign = () => {
  isSigning.value = false;
  ctx.value.closePath();
};
 
onMounted(() => {
  canvas.value = uni.createSelectorQuery().select('#signature-canvas');
  canvas.value.width = 300;
  canvas.value.height = 150;
  ctx.value = canvas.value.getContext('2d');
  ctx.value.strokeStyle = 'black';
  ctx.value.lineWidth = 3;
  ctx.value.lineCap = 'round';
});
</script>
 
<style scoped>
.signature-pad {
  position: relative;
  width: 300px;
  height: 150px;
  background-color: #fff;
}
 
canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}
</style>

在这个组件中，我们创建了一个canvas元素，并在onMounted生命周期钩子中初始化它。我们监听触摸事件来处理签名的起点、移动和终点。当用户开始签名时，我们记录下起点坐标，并开始在canvas上绘制路径。在用户移动手指时，我们继续在canvas上绘制线条。当用户签名结束时，我们关闭路径。

这个简单的签名组件可以满足基本的签名需求，但你可能需要添加额外的功能，比如清除签名、保存签名为图片等。

- 阅读更多 -