标签 Javascript 下的文章

2024-08-19




<template>
  <div>
    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
      >
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</template>
 
<script>
import Vue from 'vue';
import VueGridLayout from 'vue-grid-layout';
 
Vue.use(VueGridLayout);
 
export default {
  data() {
    return {
      layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0"},
        {"x":2,"y":0,"w":2,"h":4,"i":"1"},
        {"x":4,"y":0,"w":2,"h":5,"i":"2"},
        // ...
      ]
    };
  }
};
</script>

这个代码实例展示了如何在Vue应用中使用vue-grid-layout组件来创建一个栅格布局系统。layout数据属性定义了网格的初始布局配置，其中包含每个网格项的位置、宽度、高度和标识。这个例子简单明了，适合作为学习如何在Vue项目中使用vue-grid-layout的起点。

- 阅读更多 -

编程笔记 html5&css&js 085 JavaScript 内置函数

System

2024-08-19

所有,html5

JavaScript 内置函数是语言本身提供的，非常基础且常用的函数。以下是一些常见的 JavaScript 内置函数及其简单示例：

parseInt(string, radix)：将字符串转换为整数。如果不能转换，返回 NaN。radix 参数定义了要解析的数字的基数。




let num = parseInt("123", 10); // 返回 123

parseFloat(string)：将字符串转换为浮点数。如果不能转换，返回 NaN。




let num = parseFloat("123.45"); // 返回 123.45

isNaN(value)：检查某个值是否是非数字值。如果值是 NaN 或非数字值，返回 true；否则返回 false。




let result = isNaN(NaN); // 返回 true
result = isNaN("123"); // 返回 false，因为 "123" 可以转换为数字 123

eval(string)：计算字符串参数，并执行它包含的 JavaScript 代码。




let result = eval("1 + 2"); // 返回 3

encodeURI(uri)：将字符串编码为 URI。




let uri = encodeURI("https://www.example.com/?query=Hello World");
// 返回 "https://www.example.com/?query=Hello%20World"

decodeURI(uri)：将编码的 URI 解码成正常的字符串。




let uri = decodeURI("https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World");
// 返回 "https://www.example.com/?query=Hello World"

encodeURIComponent(uriComponent)：将字符串编码为 URI 组件。




let uriComponent = encodeURIComponent("https://www.example.com/?query=Hello World");
// 返回 "https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World"

decodeURIComponent(uriComponent)：将编码的 URI 组件解码。




let uriComponent = decodeURIComponent("https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World");
// 返回 "https://www.example.com/?query=Hello World"

这些函数是 JavaScript 中最基本的内置函数，在日常开发中经常使用。

System

2024-08-19

所有,html5

以下是一个简单的HTML5七夕情人节表白网页示例，包含了自定义的文字和烟花特效。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕情人节告白</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    text-align: center;
  }
  h1 {
    color: #ff0000;
    font-size: 48px;
    font-weight: bold;
  }
</style>
</head>
<body>
<h1>你的名字</h1>
<canvas class="fireworks" style="position: absolute; width: 100%; height: 100vh;"></canvas>
 
<script>
  // 烟花效果的JavaScript代码，这里使用的是现成的库，实际使用时需要引入相应的js文件
  // 例如: <script src="path/to/your/fireworks.js"></script>
</script>
</body>
</html>

在实际应用中，您需要引入提供烟花效果的JavaScript库，例如fireworks.js。这个库会处理烟花的逻辑和渲染，您可以在网上找到很多这样的资源。

请注意，为了保持答案的简洁，烟花效果的实现代码没有包含在内。实际使用时，您需要找到一个符合您需求的烟花效果库，并将其引入您的HTML页面中。

System

2024-08-19

所有,html5

以下是一个使用HTML、CSS和JavaScript创建的简单七夕情人节表白网页示例，其中包含一个Canvas绘制爱心和相册的简单功能。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕情人节表白</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
  }
  canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #album {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  #album img {
    width: 100px;
    height: 100px;
    margin: 0 10px;
    opacity: 0.5;
    cursor: pointer;
  }
  #album img.active {
    opacity: 1;
  }
</style>
</head>
<body>
<canvas id="heartCanvas" width="400" height="400"></canvas>
<script>
  // 爱心绘制函数
  function drawHeart(ctx, x, y, scale) {
    ctx.save();
    ctx.translate(x, y);
    ctx.scale(scale, scale);
    var dx = 100, dy = 100, s = 1.5;
    ctx.beginPath();
    ctx.moveTo(-dx, -dy);
    ctx.bezierCurveTo(-dx, -dy - s * dy, -dx + s * dx, -dy, -dx + dx, -dy);
    ctx.bezierCurveTo(-dx + s * dx, -dy - s * dy, -dx, s * dx, -dx, dy);
    ctx.bezierCurveTo(-dx, s * dy + dx * tan(PI / 4), -dx - s * dx, dy, -dx - dx, dy);
    ctx.bezierCurveTo(-dx - s * dx, dy, -dx, dy - s * dy, -dx, dy - dx * tan(PI / 4));
    ctx.closePath();
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.restore();
  }
 
  // 绘制函数调用
  window.onload = function() {
    var canvas = document.getElementById('heartCanvas');
    var ctx = canvas.getContext('2d');
    setInterval(function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawHeart(ctx, canvas.width / 2, canvas.height / 2, 1);
    }, 100);
  };
</script>
 
<!-- 相册图片展示 -->
<div id="album">
  <img src="photo1.jpg" alt="Photo 1" class="active">
  <img src="photo2.jpg" alt="Photo 2">
  <img src="photo3.jpg" alt="Photo 3">
  <!-- 更多图片可以添加在此处 -->
</div>
 
<script>
  // 相册图片点击事件
  document.querySelectorAll('#album img').forEach(img => {
    img.addEventListener('click', function() {
      document.querySelector('#album .active').classList.remove('active');
      this.classList.add('active');
    });
  });
</script>
</body>
</html>

在这个示例中，使用了HTML来定义结构，CSS来控制样式，以及

- 阅读更多 -

HTML5新增的video标签配合原生js，实现视频案例！

System

2024-08-19

所有,html5

HTML5的<video>标签可以用来在网页上播放视频。结合原生JavaScript，可以实现一个简单的视频播放器。以下是一个实现的示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Video Example</title>
</head>
<body>
    <video id="myVideo" width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <button onclick="playPause()">播放/暂停</button>
 
    <script>
        var video = document.getElementById('myVideo');
 
        function playPause() {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
    </script>
</body>
</html>

这段代码中，<video>标签定义了一个视频播放器，其id为myVideo，方便JavaScript代码引用。controls属性添加了播放器的默认控制条。<source>标签指定了视频文件的路径和类型。

按钮用于控制视频的播放和暂停，通过一个简单的函数playPause来实现，该函数检查视频是否已暂停（video.paused），如果是则播放视频，如果不是则暂停视频。

- 阅读更多 -

jQuery相较于原生js的优势

System

2024-08-19

所有,jquery

jQuery是一个轻量级的JavaScript库，它封装了很多常用的原生JavaScript操作，提供了更简洁的语法和更易于管理的代码。相较于原生JavaScript，jQuery主要有以下优势：

跨浏览器的兼容性：jQuery处理了不同浏览器之间的差异，使得开发者能够更专注于功能的实现而不是浏览器的兼容性。
简化的DOM操作：jQuery提供了丰富的DOM操作API，例如选择元素、修改样式、事件绑定等，使得这些操作更加简单和高效。
链式操作：jQuery允许开发者将多个操作链式调用，以此来减少代码中的重复，使结构更清晰。
丰富的插件支持：jQuery有庞大的社区，许多插件可供选择，以满足特定的需求。
动画和特效：jQuery提供了丰富的动画和特效API，使页面更加生动。
兼容性好：如果需要，jQuery可以在不支持JavaScript的环境中提供良好的用户体验。

以下是使用jQuery和原生JavaScript实现相同功能的对比示例：

原生JavaScript选择元素：




var element = document.getElementById('myElement');

jQuery选择元素：




var $element = $('#myElement');

原生JavaScript添加事件监听器：




element.addEventListener('click', function() {
  // 处理点击事件
});

jQuery添加事件监听器：




$element.click(function() {
  // 处理点击事件
});

原生JavaScript修改样式：




element.style.color = 'red';

jQuery修改样式：




$element.css('color', 'red');

原生JavaScript创建和添加元素：




var newElement = document.createElement('div');
document.body.appendChild(newElement);

jQuery创建和添加元素：




var $newElement = $('<div></div>');
$('body').append($newElement);

以上对比展示了使用jQuery和原生JavaScript实现常见的DOM操作的不同。在实际开发中，可以根据项目需求和个人喜好选择合适的工具。

- 阅读更多 -

JS特效第90弹：jQuery年终转盘抽奖代码

System

2024-08-19

所有,jquery

以下是一个简化的jQuery年终转盘抽奖代码示例，用于实现点击按钮后在转盘上随机停止，并显示中奖信息。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Year-End Lottery Wheel</title>
<style>
  #wheel {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #e3e3e3;
    position: relative;
    margin: 0 auto;
  }
  #wheel .segment {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    background: #f2f2f2;
  }
  #wheel .pointer {
    width: 20px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -10px;
    background: #000;
    border-radius: 5px;
    transform: rotate(0deg);
    transform-origin: center;
    animation: spin 5s linear infinite;
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>
 
<button id="spin">Spin the Wheel</button>
<div id="wheel">
  <div class="pointer"></div>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  var segments = 360; // 一共有360个段
  var randomNumber = 0; // 随机数初始化
 
  $('#spin').click(function() {
    // 停止之前正在进行的转动
    $('#wheel .pointer').css('animation', 'none');
    
    // 在下次重绘之后更新动画
    setTimeout(function() {
      randomNumber = Math.random() * segments; // 生成一个随机数
      $('#wheel .pointer').css('animation', 'spin 5s linear infinite').css('transform', 'rotate(' + randomNumber + 'deg)');
    }, 0);
  });
});
</script>
 
</body>
</html>

这段代码实现了基本的转盘抽奖功能，点击按钮后转盘会停在随机位置。这里使用了CSS动画来实现转盘旋转，并在JavaScript中通过修改转盘的旋转角度来让它停在指定的位置。

- 阅读更多 -

探索jQuery.Hammer.js：手势识别的力量

System

2024-08-19

所有,jquery




// 首先，确保在页面中包含了jQuery和jQuery.Hammer.js库
// 然后，在你的脚本中，你可以这样使用它：
 
$(document).ready(function() {
    // 假设你有一个id为"element"的元素，你想要监听它的拖动事件
    $('#element').hammer({
        // 指定要监听的触摸事件
        drag: function(e) {
            // 这里处理拖动事件的逻辑
            console.log('元素被拖动', e);
        }
    });
 
    // 如果你想要同时监听多个事件，可以这样做：
    $('#element').hammer({
        drag: function(e) { console.log('拖动', e); },
        tap: function(e) { console.log('点击', e); },
        press: function(e) { console.log('按压', e); }
        // 你可以继续添加其他事件的处理函数
    });
});

这个示例展示了如何使用jQuery.Hammer.js来监听一个元素上的拖动、点击和按压事件。通过这种方式，你可以很容易地为你的网站添加触摸事件的交互功能。

System

2024-08-19

所有,jquery

以下是一个简单的HTML、CSS和JavaScript的图片轮播实现，用于展示龙猫的五张照片，并带有轮播功能和表单校验。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dragon Quest Slideshow</title>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
  }
  #slideshow {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  #slideshow img {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  #slideshow img.active {
    opacity: 1;
  }
</style>
</head>
<body>
 
<div id="slideshow">
  <img class="active" src="dragon1.jpg" alt="Dragon Quest 1">
  <img src="dragon2.jpg" alt="Dragon Quest 2">
  <img src="dragon3.jpg" alt="Dragon Quest 3">
  <img src="dragon4.jpg" alt="Dragon Quest 4">
  <img src="dragon5.jpg" alt="Dragon Quest 5">
</div>
 
<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('#slideshow img');
  const nextImage = () => {
    images[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % images.length;
    images[currentIndex].classList.add('active');
  };
 
  setInterval(nextImage, 3000);
</script>
 
</body>
</html>

在这个例子中，我们使用了CSS来制作简单的图片轮播效果，并通过JavaScript实现了轮播功能。图片列表是固定的，但你可以根据需要添加更多的图片。轮播会在每3秒钟自动切换到下一张图片。这个例子不包括表单校验，但你可以很容易地添加表单校验逻辑，比如使用HTMLFormElement.checkValidity()方法。

- 阅读更多 -

js,jquery获取父窗口，子窗口iframe的方法

System

2024-08-19

所有,jquery

在JavaScript中，要获取父窗口的引用，可以使用window.parent。要获取子窗口（如iframe）的引用，可以通过父窗口的frames集合或者contentWindow属性。

以下是示例代码：




// 在子窗口中获取父窗口的引用
var parentWindow = window.parent;
 
// 在父窗口中获取子窗口的引用（假设子窗口的索引是0）
var iframe = document.getElementsByTagName('iframe')[0];
var childWindow = iframe.contentWindow;

使用jQuery时，可以更简洁地获取iframe的内容窗口：




// 在父窗口中使用jQuery获取子窗口的引用
var childWindow = $('iframe').get(0).contentWindow;

请注意，出于安全考虑，跨域的iframe之间是不允许互相访问的，除非它们处于同一域或者通过CORS设置了相应的权限。

- 阅读更多 -