分类前端技术下的文章

2024-08-19

在HTML5中，创建滑动区域选择元素（滑块）可以使用以下代码示例：




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滑动区域选择</title>
<style>
  .slider-container {
    width: 100%;
    background-color: #f7f7f7;
    margin: 10px 0;
    position: relative;
  }
  .slider-range {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background-color: #007bff;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
  }
  .slider-range:hover {
    opacity: 1;
  }
  .slider-thumb {
    width: 20px;
    height: 20px;
    background-color: #007bff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
  }
  .slider-value {
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
  }
</style>
</head>
<body>
 
<div class="slider-container">
  <input type="range" min="1" max="100" value="50" class="slider-range" id="myRange">
  <button class="slider-thumb" id="thumb"></button>
</div>
<div class="slider-value" id="sliderValue">50</div>
 
<script>
  const slider = document.getElementById('myRange');
  const thumb = document.getElementById('thumb');
  const sliderValue = document.getElementById('sliderValue');
 
  slider.addEventListener('input', () => {
    const val = slider.value;
    thumb.style.left = `${(val - 1) * 100 / (slider.max - slider.min)}%`;
    sliderValue.innerText = val;
  });
 
  thumb.addEventListener('mousedown', function(e) {
    const startX = e.clientX - thumb.offsetLeft;
 
    function handler(e) {
      const x = e.clientX - startX;
      if (x < 0) {
        thumb.style.left = '0%';
      } else if (x > 100) {
        thumb.style.left = '100%';
      } else {
        thumb.style.left = `${x}px`;
      }
      slider.value = Math.round((x / 100) * (slider.max - slider.min) + slider.min);
      sliderValue.innerText = slider.value;
    }
 
    function clearHandler() {
      document.removeEventListener('mousemove', handler);
      document.removeEventListener('mouseup', clearHandler);
    }
 
    document.addEventListener('mousemove', handler);
    document.addEventListener('mouseup', clearHandler);
  });
</script>
 
</body>
</html>

这段代码实现了一个简单的滑动区域选择器，用户可以通过拖动滑块来改变区域选择的值。同时，滑块和区域选择器都有合适的样式，并且可以通过JavaScript代码进行交互。

- 阅读更多 -

基于HTML5与DIV+CSS的联合传媒网站静态网页设计研究

System

2024-08-19

所有,html5




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>联合传媒网站静态页面</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
        }
        .header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }
        .content {
            margin: 20px;
            padding: 20px;
            background-color: #fff;
        }
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>联合传媒网站</h1>
    </div>
    <div class="content">
        <h2>最新新闻</h2>
        <p>这里是新闻内容...</p>
    </div>
    <div class="footer">
        <p>版权所有 联合传媒网站 2023</p>
    </div>
</body>
</html>

这个简单的HTML页面展示了如何使用HTML5和CSS创建一个基本的网站布局。页面包括头部（Header）、内容区（Content）和底部（Footer）。使用CSS为页面元素添加了背景色和文字颜色，并对布局进行了简单的样式设计。这个示例展示了静态网页设计的基本元素和技术，对学习Web页面设计有很好的入门教学价值。

- 阅读更多 -

uniapp H5界面快速发布到Linux服务器

System

2024-08-19

所有,html5

要在uniapp中发布H5界面到Linux服务器，你可以遵循以下步骤：

在uniapp项目中，运行或构建你的H5项目：
```
npm run build:h5
```
构建完成后，将生成的dist/build/h5目录中的内容上传到Linux服务器。
在Linux服务器上，安装一个静态文件服务器，如nginx。
配置nginx服务器，编辑nginx.conf或相应的配置文件，设置服务器的根目录指向你上传的H5项目文件夹。
启动nginx服务器：
```
sudo systemctl start nginx
```
确保nginx正确运行，你可以通过访问服务器IP或域名查看你的H5应用。

以下是一个非常简单的nginx配置示例，它将服务器的根目录设置为/var/www/html（你需要将其替换为你的实际文件路径）：




server {
    listen       80;
    server_name  localhost;
 
    location / {
        root   /var/www/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
 
    # 其他配置...
}

确保在配置中正确设置了root指令指向你的H5应用目录，并且try_files指令能够正确处理前端路由。

这样，你就可以通过Linux服务器来快速发布你的uniapp H5应用了。

- 阅读更多 -

js、jquery 动态添加/删除元素内容

System

2024-08-19

所有,jquery

在JavaScript和jQuery中，可以使用以下方法来动态添加或删除元素的内容：

JavaScript方法:

添加元素内容：




document.getElementById("elementId").innerHTML = "新内容";

删除元素内容：




document.getElementById("elementId").innerHTML = "";

jQuery方法:

添加元素内容：




$("#elementId").html("新内容");

删除元素内容：




$("#elementId").empty();

这里的elementId是你想要添加或删除内容的DOM元素的ID。innerHTML和.html()方法允许你设置或获取元素的HTML内容。.empty()方法则用于移除元素的所有子节点。

- 阅读更多 -

jQuery的赋值方式详解

System

2024-08-19

所有,jquery

在jQuery中，赋值通常是指使用.val()方法设置表单元素（如input, select, textarea）的值，或者使用.html()，.text()，.attr()等方法设置DOM元素的内容。

使用.val(value)为input元素赋值：




$('#input-id').val('这里是新值');

使用.html(content)为元素内容设置HTML内容：




$('#div-id').html('<strong>这里是新的HTML内容</strong>');

使用.text(text)为元素内容设置纯文本内容：




$('#div-id').text('这里是新的文本内容');

使用.attr(attributeName, value)为元素的属性赋值：




$('#img-id').attr('src', '新的图片路径.jpg');

以上是基本的赋值方法，jQuery还提供了.prop()方法来设置元素的属性值，适用于布尔类型的属性（如checked, selected, disabled）。

使用.prop(propertyName, value)为元素的属性（比如checked）赋值：




$('#checkbox-id').prop('checked', true);

请注意，.val()一般用于表单元素，而.html(), .text(), .attr()可用于任何DOM元素。

- 阅读更多 -

RXJS：串联请求的使用

System

2024-08-19

所有,typescript

在RxJS中，可以使用concat操作符来串联请求，确保一个请求完成后再开始下一个请求。以下是一个使用concat的例子：




import { concat } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, catchError } from 'rxjs/operators';
 
// 假设我们有两个API端点
const endpoint1 = 'https://api.example.com/data1';
const endpoint2 = 'https://api.example.com/data2';
 
// 发送第一个请求，并在成功时继续发送第二个请求
const request1 = ajax.get(endpoint1).pipe(
  map(response => response.response),
  catchError(error => {
    console.error('Request 1 failed:', error);
    // 处理错误，例如返回一个空值或rethrow错误
    return [];
  })
);
 
const request2 = ajax.get(endpoint2).pipe(
  map(response => response.response),
  catchError(error => {
    console.error('Request 2 failed:', error);
    // 处理错误，例如返回一个空值或rethrow错误
    return [];
  })
);
 
// 使用concat串联请求
concat(request1, request2).subscribe(
  data => console.log('Received data:', data),
  error => console.error('Overall error:', error)
);

在这个例子中，我们首先定义了两个请求request1和request2。然后，我们使用concat操作符将它们串联起来，这样request1完成后才会立即开始request2。最后，我们订阅了串联后的Observable，以便处理接收到的数据或任何可能发生的错误。

System

2024-08-19

所有,typescript

报错信息 "tsc : 无法加载文件 D:Program Files" 指的是 TypeScript 编译器 (tsc) 无法加载指定路径下的文件。这通常是因为路径错误或文件不存在。

解决方法：

确认路径是否正确：检查路径 "D:Program Files" 是否有误，应当是 "D:\Program Files" 或其他正确的路径。
确认文件存在：确保在指定路径下存在要加载的文件。
权限问题：确保你有足够的权限访问指定的文件或目录。
使用正确的命令：如果你是在命令行中运行 tsc，确保命令格式正确，例如：
```
tsc --project ./path/to/your/tsconfig.json
```
或者直接指定要编译的文件：
```
tsc yourfile.ts
```
如果问题依旧，尝试重启命令行工具或电脑，然后再次执行命令。

如果报错信息有误或缺少详情，请提供更完整的错误输出以便进一步分析。

System

2024-08-19

所有,typescript

错误解释：

在TypeScript中，当你使用axios请求本地资源时，如果遇到undefined ts(2532)错误，这通常意味着TypeScript编译器认为你的响应对象可能是undefined，这与你的期望不符，即你期望的响应对象应该是有值的。

解决方法：

确保请求的资源确实存在，并且服务已经启动。
检查axios请求的返回类型是否正确。如果你知道响应不会是undefined，可以使用TypeScript的类型断言来告诉编译器你的确定。例如：




// 假设axios请求是这样的
axios.get<ResourceType>('/api/resource').then(response => {
    const data: ResourceType = response.data; // 使用类型断言
    // ... 其他处理逻辑
});

如果你使用的是async/await语法，确保你正确地处理了可能的undefined情况，或者使用try/catch来捕获潜在的错误。例如：




async function fetchResource(): Promise<ResourceType> {
    try {
        const response = await axios.get<ResourceType>('/api/resource');
        return response.data; // 使用类型断言
    } catch (error) {
        // 处理错误
    }
}

如果你确认服务器返回的确实是有值的，可以考虑在TypeScript配置中关闭noImplicitAny选项，这样编译器就不会对未指定类型的变量报错。不过这通常不推荐，因为这会降低类型安全性。
如果你使用的是TypeScript的strict模式，你可能需要检查tsconfig.json文件中的strict属性是否被设置为了true。如果是，你可以尝试将其设置为false来看看是否解决了问题，但这并不推荐作为长期解决方案。

总结，解决这个问题的关键是确保TypeScript编译器理解到响应对象不会是undefined，并且在代码中正确处理可能的异常。

- 阅读更多 -

＜TypeScript＞中的变量声明和基础数据类型归纳

System

2024-08-19

所有,typescript

在TypeScript中，我们可以使用let和const关键字来声明变量。let用于声明可变变量，const用于声明不可变变量（即常量）。

数字类型（Number）




let decimal: number = 6;
let hex: number = 0xff00ff;
let binary: number = 0b1010;
let octal: number = 0o744;

字符串类型（String）




let color: string = "blue";
color = 'red';

布尔类型（Boolean）




let isRight: boolean = true;
isRight = false;

数组类型（Array）




let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

元组类型（Tuple）

元组类型允许你声明一个数组，其中的每个元素都可以是不同的类型。




let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error

枚举类型（Enum）

枚举类型用于定义数值集合。




enum Color {
    Red = 1,
    Green = 2,
    Blue = 4
}
 
let colorName: Color = Color.Green;

任意类型（Any）

任意类型用于表示可以赋予任何值。




let notSure: any = 10;
notSure = "I am not sure";
notSure = false;

空类型（Void）

空类型用于表示没有任何类型，一般用于函数返回值。




function warnUser(): void {
    console.log("This is a warning message");
}

未定义类型和空值（Undefined and Null）




let u: undefined = undefined;
let n: null = null;

Never类型

never类型表示的是那些永远不会返回结果的类型。




function error(message: string): never {
    throw new Error(message);
}
 
function infiniteLoop(): never {
    while (true) {
    }
}

类型断言

有时候你会知道一个实体的类型比TypeScript更准确，但是它不会自动识别。在这种情况下，你可以使用类型断言来告诉TypeScript你知道的比它更多。




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

类型别名

你可以使用type关键字来给一个类型定义一个别名。




type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

接口

接口可以用来定义复杂类型。




interface Person {
    name: string;
    age: number;
}
 
let tom: Person = {
    name: "Tom",
    age: 25
};

类型守卫

有时你需要检查一个类型，并在该类型为某个特定类型时执行某些操作。你可以使用typeof类型保护来做到这一点。




function padLeft(value: string, padding: string | number) {
    if (typeof padding === 'number') {
        return Array(padding + 1).join(' ')

System

2024-08-19

所有,javascript




// 引入 SheetJS
const XLSX = require('xlsx');
 
// 创建一个新的工作簿
const workbook = XLSX.utils.book_new();
 
// 创建工作表数据
const worksheet_data = [
  ['姓名', '年龄', '职业'],
  ['Alice', 28, 'Engineer'],
  ['Bob', 22, 'Designer']
];
 
// 将数据转换为工作表
const worksheet = XLSX.utils.aoa_to_sheet(worksheet_data);
 
// 自定义单元格样式
const style1 = { font: { bold: true } }; // 粗体字
const style2 = { fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF0000" } } }; // 填充色和字体颜色
 
// 应用样式到单元格A2
XLSX.utils.format_cell({ cell: worksheet['A2'], style: style1 });
// 应用样式到单元格B2
XLSX.utils.format_cell({ cell: worksheet['B2'], style: style2 });
 
// 添加工作表到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
 
// 生成Excel文件并导出
XLSX.writeFile(workbook, 'styled_example.xlsx');

这段代码演示了如何使用 SheetJS（xlsx-js-style）库在前端创建一个带有自定义样式的Excel表格。首先创建了一个新的工作簿，然后定义了工作表数据并转换为工作表。接着，应用了自定义样式，最后将工作簿保存为Excel文件。这是一个简单的示例，实际应用中可以根据需要添加更多复杂的样式和功能。

- 阅读更多 -