标签 Javascript 下的文章

2024-08-11




// 引入Node.js的文件系统模块
const fs = require('fs');
 
// 读取文件并打印内容
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('读取文件时发生错误:', err);
    return;
  }
  console.log('文件内容:', data);
});
 
// 写入文件
const dataToWrite = '这里是要写入的内容';
fs.writeFile('example.txt', dataToWrite, 'utf8', (err) => {
  if (err) {
    console.error('写入文件时发生错误:', err);
    return;
  }
  console.log('文件写入成功');
});
 
// 同步读取文件内容
try {
  const data = fs.readFileSync('example.txt', 'utf8');
  console.log('同步读取:', data);
} catch (err) {
  console.error('读取文件时发生错误:', err);
}

这段代码展示了如何使用Node.js的fs模块进行文件的读写操作。其中，readFile和writeFile是异步操作的例子，而readFileSync是同步操作的例子。异步操作不会阻塞程序的执行，而同步操作会阻塞直到文件读写完成。在实际应用中，异步操作通常是首选，因为它们不会影响程序的性能。

- 阅读更多 -

js实现鼠标滚轮放大缩小页面指定区域(css3 scale)

System

2024-08-11

所有,css3

在网页中使用鼠标滚轮来放大缩小页面的特定区域，可以通过监听元素的wheel事件来实现。以下是一个使用JavaScript和CSS实现的示例：

HTML:




<div id="zoomable-area">
  <!-- 这里是你需要放大缩小的内容 -->
</div>

CSS:




#zoomable-area {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  overflow: hidden; /* 确保放大后的内容不超出div边界 */
  transition: transform 0.1s; /* 平滑的变换效果 */
  transform-origin: center center; /* 变换的基点设为中心 */
}

JavaScript:




const zoomableArea = document.getElementById('zoomable-area');
let scale = 1; // 初始缩放比例为1
 
zoomableArea.addEventListener('wheel', function(event) {
  event.preventDefault(); // 阻止默认的滚轮行为
  const delta = event.deltaY > 0 ? 1.1 : 0.9; // 根据滚轮方向调整缩放比例
  scale *= delta; // 更新缩放比例
  this.style.transform = `scale(${scale})`; // 应用缩放变换
}, { passive: false }); // passive: false 防止移动设备上的默认行为

这段代码会为ID为zoomable-area的元素添加一个事件监听器，当用户在该元素上使用鼠标滚轮时，会根据滚轮的滚动方向放大或缩小该区域。transform属性被用来应用缩放效果，而transition属性确保缩放有平滑的过渡效果。

- 阅读更多 -

html+css+js 鼠标放在页面顶部则导航栏出现鼠标移出则隐藏

System

2024-08-11

所有,css3

这个功能可以通过HTML、CSS和JavaScript实现。以下是实现这个功能的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar on Hover</title>
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .nav {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
  }
  .nav.active {
    display: block;
  }
</style>
</head>
<body>
 
<div class="nav">
  <span>Navigation Link 1</span>
  <span>Navigation Link 2</span>
  <span>Navigation Link 3</span>
</div>
 
<script>
  const nav = document.querySelector('.nav');
 
  window.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('mouseover', (e) => {
      if (e.target === e.currentTarget) {
        nav.classList.add('active');
      }
    });
 
    document.addEventListener('mouseout', (e) => {
      if (e.target === e.currentTarget) {
        nav.classList.remove('active');
      }
    });
  });
</script>
 
</body>
</html>

在这个示例中，当鼠标悬停在页面body上时，导航栏会显示，鼠标移出则导航栏隐藏。这是通过监听mouseover和mouseout事件实现的，并通过添加或移除一个CSS类来控制导航栏的显示与隐藏。

- 阅读更多 -

HTML5+CSS3+JS小实例：倒计时动画特效

System

2024-08-11

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时动画特效</title>
<style>
  .countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-family: Arial, sans-serif;
    color: #333;
    margin: 20px;
  }
  .digit {
    line-height: 1;
    font-size: 2em;
    margin: 0 2px;
  }
</style>
</head>
<body>
<div id="countdown" class="countdown">
  00:00:10
</div>
<script>
function countdown() {
  var endTime = new Date().getTime() + 10 * 1000,
      elements = document.getElementById('countdown').querySelectorAll('.digit'),
      tick = function() {
        var currentTime = new Date().getTime(),
            remaining = endTime - currentTime,
            hours = Math.floor(remaining / (1000 * 60 * 60)),
            minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60)),
            seconds = Math.floor((remaining % (1000 * 60)) / 1000),
            milliseconds = Math.floor((remaining % 1000) / 100);
 
        elements[0].textContent = hours < 10 ? '0' + hours : hours;
        elements[1].textContent = minutes < 10 ? '0' + minutes : minutes;
        elements[2].textContent = seconds < 10 ? '0' + seconds : seconds;
        elements[3].textContent = milliseconds < 10 ? '0' + milliseconds : milliseconds;
 
        if (remaining < 0) {
          clearInterval(interval);
          elements[0].textContent = '00';
          elements[1].textContent = '00';
          elements[2].textContent = '00';
          elements[3].textContent = '00';
        }
      };
 
  tick();
  var interval = setInterval(tick, 100);
}
 
countdown();
</script>
</body>
</html>

这段代码实现了一个简单的倒计时动画特效。它使用了HTML、CSS和JavaScript。在页面中，它创建了一个ID为countdown的div元素，并通过CSS给它设置了样式。JavaScript脚本定义了countdown函数，它使用了setInterval方法来每100毫秒更新一次计时器的显示。当计时结束时，计时器会被清零。这个实例提供了一个简单的倒计时动画示例，并且可以通过调整endTime的值来改变倒计时的时间。

- 阅读更多 -

html+js实现自定义弹窗

System

2024-08-11

所有,css3

以下是一个简单的HTML和JavaScript结合的代码示例，实现了一个自定义弹窗：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Modal</title>
<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
</style>
</head>
<body>
 
<button id="openBtn">Open Modal</button>
 
<div id="myModal" class="modal">
  <div class="modal-content">
    <span id="closeBtn">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>
 
<script>
  // Get the modal
  var modal = document.getElementById("myModal");
  // Get the button that opens the modal
  var btn = document.getElementById("openBtn");
  // Get the <span> element that closes the modal
  var span = document.getElementById("closeBtn");
  // When the user clicks on the button, open the modal
  btn.onclick = function() {
    modal.style.display = "block";
  }
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>
 
</body>
</html>

这段代码实现了一个基本的自定义弹窗，当用户点击“Open Modal”按钮时弹窗会显示，点击弹窗内的“x”按钮或者点击弹窗外的任何地方都可以关闭弹窗。

System

2024-08-11

所有,css3

在HTML5和CSS3中，border属性是用来设置元素边框样式的。

HTML5示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>Border Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 2px solid black; /* 设置边框 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS3示例代码：




.box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    border: 2px solid black; /* 设置边框 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 5px 5px 10px grey; /* 盒子阴影 */
}

在这个例子中，.box类定义了一个100x100像素的方形盒子，有2像素宽的黑色边框，以及圆角和盒子阴影的样式。这些都是使用CSS3的特性实现的。

- 阅读更多 -

React-Hoc高阶组件与css-in-js技术

System

2024-08-11

所有,css




import React from 'react';
import styled from 'styled-components';
 
// 创建带样式的按钮组件
const StyledButton = styled.button`
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文本 */
  padding: 15px 32px; /* 内边距 */
  text-align: center; /* 居中文本 */
  text-decoration: none; /* 无文本装饰 */
  display: inline-block; /* 行内块显示 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 手形鼠标光标 */
`;
 
// 高阶组件，用于处理点击事件
const withClickHandler = (WrappedComponent) => {
  return class extends React.Component {
    handleClick = () => {
      console.log('按钮被点击');
      // 这里可以添加点击后的处理逻辑
    }
 
    render() {
      const props = { ...this.props, handleClick: this.handleClick };
      return <WrappedComponent {...props} />;
    }
  };
};
 
// 使用高阶组件和样式化组件
const ButtonWithClickHandler = withClickHandler(StyledButton);
 
export default () => <ButtonWithClickHandler onClick={() => console.log('点击事件触发')}>点我</ButtonWithClickHandler>;

这个例子展示了如何结合使用高阶组件和CSS-in-JS库（例如styled-components）来创建一个带有点击事件处理逻辑的按钮组件。withClickHandler是一个高阶组件，它封装了点击事件的处理逻辑，而StyledButton是一个使用styled-components定义样式的按钮组件。最后，我们导出了一个结合了两者的ButtonWithClickHandler组件，可以直接在应用中使用。

- 阅读更多 -

推荐几个css+js特效网站

System

2024-08-11

所有,css

CodePen: 这是一个设计师和开发者社区，你可以在上面找到各种创新的CSS和JS特效。
CSS Tricks: 虽然名为CSS Tricks，但它也有很多JS特效。
CSSWow: 提供大量的创新CSS动画效果。
Muzli: 一个专注于分享JavaScript和CSS动画的网站。
Magic CSS3 Animations: 提供大量的CSS3动画效果。
Animate.css: 一个用于创建动画的CSS库，非常受欢迎。
Hero Animations: 提供了很多创新的CSS动画效果。
CSS Loader: 提供各种创新的CSS加载器。
CSS Play: 提供了一些创新的CSS动画。
CSS GitHub Button: 提供了一些创新的CSS按钮。

这些网站都有很好的教程和实例代码，你可以直接使用或者参考其实现方式来创造自己的特效。

System

2024-08-11

所有,ajax




// 假设已有JSON字符串jsonStr
var jsonStr = '{"name":"John", "age":30, "city":"New York"}';
 
// 方法1：使用JSON.parse()将JSON字符串转换为JSON对象
var obj1 = JSON.parse(jsonStr);
console.log(obj1.name); // 输出：John
 
// 方法2：使用jQuery的$.parseJSON()方法（仅适用于jQuery环境）
var obj2 = $.parseJSON(jsonStr);
console.log(obj2.name); // 输出：John
 
// 前后端JSON数据交换示例
$.ajax({
    url: '/api/data', // 后端API接口
    type: 'GET',
    dataType: 'json', // 指定数据类型为JSON
    success: function(response) {
        // 处理返回的JSON数据
        console.log(response);
    },
    error: function(xhr, status, error) {
        console.error("An error occurred: " + status + "\nError: " + error);
    }
});
 
// 使用Fastjson生成JSON字符串
var jsonObject = new Object();
jsonObject.name = "John";
jsonObject.age = 30;
jsonObject.city = "New York";
var jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // 输出生成的JSON字符串

在这个示例中，我们首先定义了一个JSON字符串jsonStr，然后使用JSON.parse()方法将其转换成了一个JSON对象。接着，我们演示了如何使用jQuery的$.parseJSON()方法进行转换。最后，我们演示了如何通过AJAX与后端进行JSON数据的交换，并使用Fastjson库来生成JSON字符串。

- 阅读更多 -

获取JS动态内容

System

2024-08-11

所有,ajax

获取JavaScript动态内容通常涉及到以下几种方法：

使用Ajax请求：




$.ajax({
    url: 'http://example.com/data',
    type: 'GET',
    success: function(data) {
        console.log(data);
    }
});

使用fetch API：




fetch('http://example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

使用JavaScript的DOM操作等待动态内容加载：




window.onload = function() {
    var content = document.getElementById('dynamic-content').innerText;
    console.log(content);
};

如果是单页应用(SPA)，可能需要使用JavaScript框架提供的方法来获取数据，如React的useEffect钩子或Vue的生命周期钩子。

确保你有权访问目标网站的动态内容，并且遵守相关的法律和道德准则。如果是自己的网站，则直接通过JavaScript访问DOM元素获取内容即可。如果是其他网站，可能需要使用CORS或者服务器端的数据抓取技术。

- 阅读更多 -