分类前端技术下的文章

2024-08-15

HTML、CSS和JavaScript是现代网页和Web应用开发的三大支柱。以下是每种语言的简单介绍和示例代码。

HTML (Hypertext Markup Language)
- 定义网页的结构。
- 示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

CSS (Cascading Style Sheets)
- 设置网页的样式。
- 示例代码：




body {
    background-color: #f0f0f0;
}
 
h1 {
    color: blue;
}
 
p {
    color: green;
}

JavaScript
- 为网页添加交互性。
- 示例代码：




// 改变段落的文本
function changeParagraphText() {
    var p = document.querySelector('p');
    p.textContent = '段落已更改！';
}
 
// 当按钮被点击时执行函数
document.querySelector('button').addEventListener('click', changeParagraphText);

HTML、CSS和JavaScript共同构建了现代网页的基础。随着Web技术的发展，新的前端开发语言和框架（如React、Vue、Angular）也不断涌现，但这三种是基础也是根基。

- 阅读更多 -

CSS实现动画效果的菜单收起展开图标，html实现动画效果的箭头

System

2024-08-15

所有,css3

以下是一个使用CSS和HTML实现的简单的动画效果的菜单收起展开图标：

CSS代码：




.menu-icon {
  width: 50px;
  height: 10px;
  background-color: #333;
  position: relative;
  transition: background-color 0.3s;
}
 
.menu-icon.active {
  background-color: #000;
}
 
.menu-icon.active .top {
  transform: translateY(10px) rotate(45deg);
}
 
.menu-icon.active .middle {
  display: none;
}
 
.menu-icon.active .bottom {
  transform: translateY(-10px) rotate(-45deg);
}
 
.menu-icon span {
  position: absolute;
  background-color: #333;
  transition: transform 0.3s;
}
 
.menu-icon .top {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
 
.menu-icon .middle {
  top: 18px;
  width: 100%;
  height: 2px;
}
 
.menu-icon .bottom {
  top: 36px;
  left: 0;
  width: 100%;
  height: 2px;
}

HTML代码：




<div class="menu-icon">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>

JavaScript代码，用于切换菜单图标：




const menuIcon = document.querySelector('.menu-icon');
menuIcon.addEventListener('click', () => {
  menuIcon.classList.toggle('active');
});

这段代码实现了一个简单的菜单图标，点击它会切换为一个三角形（箭头），表示菜单的展开和收起状态。通过CSS的transform属性和transition属性，我们为这个图标添加了平滑的动画效果。

- 阅读更多 -

HTML动画效果技术指南：打造引人注目的网页悬浮体验

System

2024-08-15

所有,html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悬浮体验</title>
    <style>
        .hover-effect {
            float: left;
            overflow: hidden;
            position: relative;
            text-align: center;
            cursor: pointer;
            transition: box-shadow 0.3s ease-in-out;
        }
        .hover-effect:hover {
            box-shadow: 0 0 10px #666;
        }
        .hover-effect img {
            display: block;
            position: relative;
        }
        .hover-effect h2 {
            position: absolute;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            width: 100%;
            padding: 5px;
            transition: all 0.3s ease-in-out;
            transform: translateY(100%);
        }
        .hover-effect:hover h2 {
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="hover-effect">
        <img src="your-image.jpg" alt="Your Image">
        <h2>悬浮显示的标题</h2>
    </div>
</body>
</html>

这个简单的HTML和CSS代码示例展示了如何创建一个悬浮效果，当用户将鼠标悬停在图片上时，图片会显示出一个阴影效果，同时图片下方的标题也会以动画效果滑入视图。这种效果能够提升网页的互动体验，是一种常用的网页设计技巧。

- 阅读更多 -

APP开发_ js 控制手机横屏或竖屏

System

2024-08-15

所有,javascript

在JavaScript中控制手机横屏或竖屏通常涉及到使用Screen Orientation API。以下是一个简单的示例代码，展示如何使用这个API来锁定屏幕方向。




// 判断API是否可用
if ('screen' in navigator) {
  // 锁定横屏
  function lockLandscape() {
    navigator.screen.lockOrientation('landscape').catch(err => {
      console.error('无法锁定横屏:', err);
    });
  }
 
  // 锁定竖屏
  function lockPortrait() {
    navigator.screen.lockOrientation('portrait').catch(err => {
      console.error('无法锁定竖屏:', err);
    });
  }
 
  // 使用示例
  // 锁定横屏
  lockLandscape();
 
  // 解锁
  function unlockOrientation() {
    navigator.screen.unlockOrientation().catch(err => {
      console.error('无法解锁屏幕方向:', err);
    });
  }
} else {
  console.warn('Screen Orientation API不可用');
}

请注意，这个API可能不在所有的浏览器中被支持，尤其是在移动端浏览器中的支持情况可能会因不同的操作系统和浏览器而异。在实际应用中，你可能需要添加特性检测以确保兼容性，并且在用户的设备上尝试之前，应该先获取用户的许可。

- 阅读更多 -

vue3+ts获取定位

System

2024-08-15

所有,typescript

在Vue 3和TypeScript中获取元素的位置，可以使用原生DOM API结合Vue的ref来实现。以下是一个简单的例子：

在模板中，为需要获取位置信息的元素添加ref属性。
在setup函数中，使用ref和Vue的onMounted生命周期钩子来获取元素的位置。




<template>
  <div ref="elementRef">获取位置信息的元素</div>
</template>
 
<script lang="ts">
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const elementRef = ref<HTMLElement | null>(null);
 
    onMounted(() => {
      if (elementRef.value) {
        const rect = elementRef.value.getBoundingClientRect();
        console.log('元素的位置:', rect);
      }
    });
 
    return {
      elementRef
    };
  }
};
</script>

在这个例子中，elementRef是一个ref，它被绑定到模板中的div元素上。在onMounted钩子中，通过访问elementRef.value.getBoundingClientRect()获取元素的位置信息，并在控制台中打印出来。这样就可以在Vue组件被挂载后获取到元素的位置。

- 阅读更多 -

vue uniapp wx-open-launch-weapp开放标签的使用

System

2024-08-15

所有,vue.js

在Vue和uni-app中使用wx-open-launch-weapp开放标签，可以用来引导用户在微信外部打开小程序。以下是一个简单的示例：

首先，确保你的项目已经配置了对应的微信开放能力。

在pages.json中配置你的页面：




{
  "pages": [
    // ... 其他页面配置
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    // ... 全局样式配置
  }
}

在页面中使用wx-open-launch-weapp开放标签：




<template>
  <view>
    <button @click="launchWeapp">打开小程序</button>
    <wx-open-launch-weapp username="小程序username" path="小程序页面路径">
      <template v-slot:default>
        <image src="自定义的图片路径" mode="aspectFit"></image>
      </template>
    </wx-open-launch-weapp>
  </view>
</template>
 
<script>
export default {
  methods: {
    launchWeapp() {
      // 调用微信API打开小程序
      wx.openLaunchWeapp({
        username: "小程序username", // 小程序原始id
        path: "小程序页面路径" // 打开的页面路径，若不填则打开首页
      });
    }
  }
};
</script>

在上面的代码中，替换username和path为你的小程序信息。wx-open-launch-weapp的default插槽可以用来自定义打开小程序时的按钮样式。

注意：wx-open-launch-weapp是微信小程序开放数据组件，在非微信环境下不会生效。确保你的项目配置正确，并且在微信小程序中测试该功能。

- 阅读更多 -

Typescript的tsconfig.json配置及相关原理

System

2024-08-15

所有,typescript




{
  "compilerOptions": {
    "target": "es5",                          // 指定ECMAScript目标版本
    "module": "commonjs",                     // 指定使用的模块系统
    "strict": true,                           // 启用所有严格类型检查选项
    "esModuleInterop": true,                  // 启用ES模块互操作
    "skipLibCheck": true,                     // 跳过对所有声明文件的类型检查
    "forceConsistentCasingInFileNames": true, // 确保文件名大小写一致
    "outDir": "./dist",                       // 指定输出目录
    "moduleResolution": "node",               // 模块解析策略
    "baseUrl": ".",                           // 解析非相对模块名的基目录
    "paths": {                                // 路径映射，用于模块名称的替换
      "@app/*": ["app/*"]
    }
  },
  "include": [                                // 需要包含进编译的文件或目录
    "src/**/*.ts"
  ],
  "exclude": [                                // 需要排除的文件或目录
    "node_modules",
    "dist",
    "**/*.spec.ts"
  ]
}

这个tsconfig.json示例配置了TypeScript编译器的一些基本选项，包括目标版本、模块系统、严格类型检查、输出目录等。通过这样的配置，开发者可以定制TypeScript编译过程以满足项目需求。

- 阅读更多 -

【Vue】使用ElementUI实现图片上传

System

2024-08-15

所有,vue.js

在Vue项目中使用ElementUI实现图片上传功能，可以利用<el-upload>组件。以下是一个简单的例子：

首先确保你已经安装并引入了ElementUI。
在你的Vue组件中，可以这样使用<el-upload>：




<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/" <!-- 这里替换为你的图片上传API -->
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :file-list="fileList"
    list-type="picture"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handlePreview(file) {
      // 预览图片逻辑
    },
    handleRemove(file, fileList) {
      // 移除图片逻辑
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      // 图片上传成功逻辑
    },
    handleError(err, file, fileList) {
      // 图片上传失败逻辑
    }
  }
};
</script>

在这个例子中，我们定义了一个Vue组件，其中包含了<el-upload>组件，用于处理图片上传的各个环节。你需要根据自己的后端API更改action属性的值。其他方法可以根据实际需求进行扩展或修改。

- 阅读更多 -

html5怎么实现语音搜索

System

2024-08-15

所有,html5

在HTML5中，可以使用Web Speech API来实现语音搜索功能。这个API包括两个主要的部分：语音输入（通过SpeechRecognition接口）和语音合成（通过SpeechSynthesis接口）。

以下是一个简单的实现语音搜索的例子：




<!DOCTYPE html>
<html>
<head>
<title>Voice Search</title>
<script>
// 初始化语音识别对象
let recognition = new webkitSpeechRecognition() || new SpeechRecognition();
 
// 语音识别开始和结束的回调函数
function startVoiceSearch() {
  recognition.onresult = function(event) {
    let result = event.results[event.results.length-1][0].transcript;
    document.getElementById('search-input').value = result;
    // 你可以在这里添加搜索逻辑
    console.log('Voice search result:', result);
  };
 
  recognition.start();
}
 
function stopVoiceSearch() {
  recognition.stop();
}
</script>
</head>
<body>
 
<input type="text" id="search-input" placeholder="Type to search...">
<button onclick="startVoiceSearch()">Start Voice Search</button>
<button onclick="stopVoiceSearch()">Stop Voice Search</button>
 
</body>
</html>

在这个例子中，我们创建了一个文本输入框和两个按钮，一个用于开始语音搜索，一个用于停止。当用户点击“开始语音搜索”按钮时，会触发startVoiceSearch函数，该函数初始化语音识别并在识别结束时处理结果，即用户的语音输入转换为文本，并将其设置为搜索框的值。

请注意，Web Speech API在不同的浏览器中的实现可能不同，可能需要添加前缀，如webkitSpeechRecognition。此外，用户需要在浏览器中授予相应的麦克风权限，API才能正常工作。

- 阅读更多 -

使用npm仓库的优先级以及.npmrc配置文件的使用

System

2024-08-15

所有,npm

在使用npm时，可以通过.npmrc文件来配置不同的仓库地址和优先级。以下是一个.npmrc文件的示例，它配置了两个仓库地址，并设置了优先级：




registry=https://registry.npmjs.org/
@myorg:registry=https://myorg.registry.node/

在这个例子中，我们配置了两个registry，一个是默认的npm仓库，另一个是针对myorg这个npm用户或组织的私有仓库。

当你安装包时，npm会首先检查是否有特定于该包的scope的registry配置，如果没有，则会使用默认的registry。例如，当你安装@myorg/somepackage时，npm会使用https://myorg.registry.node/作为仓库地址。

如果你需要在代码中动态设置npm仓库的优先级，你可以使用npm的config方法来设置registry地址：




const npm = require('npm');
 
async function setNpmRegistry(registryUrl) {
  await npm.load();
  npm.config.set('registry', registryUrl);
}
 
// 使用示例
setNpmRegistry('https://myorg.registry.node/').then(() => {
  console.log('Npm registry set to myorg registry');
});

这段代码会在运行时动态设置npm的仓库地址。这对于需要在不同环境下使用不同仓库的场景（例如开发、测试、生产环境）特别有用。

- 阅读更多 -