标签 Javascript 下的文章

2024-08-11

<!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或者服务器端的数据抓取技术。

- 阅读更多 -

js逆向爬取某音乐网站某歌手的歌曲

System

2024-08-11

所有,ajax

要实现这个功能，你可以使用JavaScript结合网页爬虫技术。以下是一个简单的例子，使用axios和cheerio库来爬取音乐歌手的歌曲列表。

首先，确保安装所需的依赖：

npm install axios cheerio

然后，使用以下代码：

const axios = require('axios');
const cheerio = require('cheerio');

// 歌手名
const artistName = '某歌手';

// 目标网页URL
const url = '某音乐网站的歌手页面URL';

axios.get(url).then(response => {
  const $ = cheerio.load(response.data);

  // 选择器选取歌曲列表
  const songs = [];
  $('#song-list a').each((i, element) => {
    const songUrl = $(element).attr('href');
    const songName = $(element).text().trim();
    songs.push({ url: songUrl, name: songName });
  });

  console.log('歌曲列表:');
  songs.forEach(song => {
    console.log(song.name);
  });
}).catch(error => {
  console.error('爬取失败:', error);
});

请注意，你需要替换artistName和url变量以指向正确的歌手页面和网站。此外，不同的音乐网站可能会有不同的HTML结构，你可能需要根据实际情况调整选择器。

此代码只是一个简单的示例，实际应用中可能需要处理更多的情况，例如处理分页、处理登录验证、错误处理等。

- 阅读更多 -

写错Ajax返回数据的Json字段名造成无法进入success和error函数

System

2024-08-11

所有,ajax

错误解释：

当Ajax请求返回的JSON数据中的字段名写错时，可能会导致无法触发success回调函数，而进入error回调函数。这通常是因为返回的JSON格式不正确或者字段名与你在Ajax请求中指定的期望接收的字段名不匹配。

解决方法：

检查返回的JSON数据格式是否正确，确保所有的字段名称都是用双引号包围的有效JSON格式。
确认你在Ajax请求中指定的dataType为json。
确保你在success回调函数中指定的字段名与返回的JSON数据中的字段名完全匹配。
如果可能，检查网络请求的响应头以确保返回的内容类型是application/json。
如果问题依然存在，可以使用浏览器的开发者工具查看网络请求的响应内容和头信息，进一步调试。

- 阅读更多 -

Vue.js 与 Ajax（vue-resource）的集成应用

System

2024-08-11

所有,ajax

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$http.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.body;
        })
        .catch(error => {
          console.error('There was an error fetching the data: ', error);
        });
    }
  }
};
</script>

这个例子展示了如何在Vue组件中使用created生命周期钩子来获取数据，并在模板中使用获取到的数据。同时，使用了vue-resource插件来进行Ajax请求。这是一个简单的应用程序，但它展示了如何将Ajax请求整合到Vue.js应用程序中。

- 阅读更多 -