标签 Javascript 下的文章

HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript

2024-08-09

以下是一个简单的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, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .birthday-cake {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f2e9e4;
    overflow: hidden;
  }
  .cake {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('cake.png') no-repeat;
    animation: rotate 5s linear infinite;
  }
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="birthday-cake">
  <div class="cake"></div>
</div>
<script>
  // 此处可以添加自定义的JavaScript代码，比如添加烟花特效等
</script>
</body>
</html>

在这个示例中，.birthday-cake 是一个容器，用来放置生日蛋糕的图像，.cake 是一个绝对定位的元素，背景图片是一个静态的生日蛋糕。通过CSS的 @keyframes 规则创建了一个无限循环的旋转动画。

你可以将 cake.png 替换为你自己的生日蛋糕图片，并在 <script> 标签内添加你想要的特效，比如表白的文字，烟花特效等。这个示例提供了一个简单的起点，你可以在此基础上根据自己的创意和需求进行自定义和拓展。

System

2024-08-09

所有,jquery

jQuery.transition.js 是一个用于简化CSS3过渡效果应用的jQuery插件。以下是一个使用该插件的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transition Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.transition.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: all 1s ease;
            -webkit-transition: all 1s ease;
            /* For Safari */
        }
        .box.large {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button id="enlarge">Enlarge Box</button>
 
    <script>
        $(document).ready(function() {
            $('#enlarge').click(function() {
                $('.box').addClass('large', 'easeInOutQuad');
            });
        });
    </script>
</body>
</html>

在这个例子中，我们定义了一个带有过渡效果的 .box 类，并在样式表中指定了改变大小时的动画过渡。jQuery.transition.js 插件允许我们通过 .addClass() 方法应用这个过渡，只需要在第二个参数中指定过渡效果的函数名即可。这个例子演示了如何使用这个插件来简化CSS3过渡的应用，并使其在现代浏览器中更加高效和用户友好。

- 阅读更多 -

js深浅拷贝：保证赋值后改变第二个变量的值，不影响第一个变量的值

System

2024-08-09

所有,jquery

在JavaScript中实现深浅拷贝，可以使用递归方式来复制嵌套的对象和数组，这样可以创建一个新的对象或数组，其中包含原始对象或数组的深拷贝。浅拷贝只复制当前层级的对象或数组。

深拷贝的例子代码如下：




function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
 
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
 
  if (obj instanceof Array) {
    return obj.reduce((arr, item, i) => {
      arr[i] = deepClone(item);
      return arr;
    }, []);
  }
 
  if (obj instanceof Object) {
    return Object.keys(obj).reduce((newObj, key) => {
      newObj[key] = deepClone(obj[key]);
      return newObj;
    }, {});
  }
}
 
// 使用示例
const original = { a: 1, b: { c: 2 } };
const copy = deepClone(original);
 
console.log(original.b.c); // 输出：2
copy.b.c = 3;
console.log(original.b.c); // 输出：2，不受copy影响，保证了深拷贝

浅拷贝的例子代码如下：




function shallowClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
 
  if (obj instanceof Array) {
    return [...obj];
  }
 
  if (obj instanceof Object) {
    return { ...obj };
  }
}
 
// 使用示例
const original = { a: 1, b: { c: 2 } };
const copy = shallowClone(original);
 
console.log(original.b.c); // 输出：2
copy.b.c = 3;
console.log(original.b.c); // 输出：3，原对象的嵌套对象被修改，不满足要求

在实际应用中，根据数据结构的复杂性和性能要求，可以选择合适的拷贝方式。深拷贝会创建所有子对象的新副本，而浅拷贝则只复制最外层的对象或数组。

- 阅读更多 -

jquery和js元素找到每个元素的data-index索引号

System

2024-08-09

所有,jquery

要使用jQuery或JavaScript获取每个元素的data-index属性，可以使用.data()方法。以下是使用jQuery和JavaScript的示例代码：

使用jQuery获取data-index属性：




$('[data-index]').each(function() {
    var index = $(this).data('index');
    console.log(index);
});

使用JavaScript获取data-index属性：




document.querySelectorAll('[data-index]').forEach(function(element) {
    var index = element.dataset.index;
    console.log(index);
});

这两段代码都会选择页面上所有具有data-index属性的元素，并打印出它们的索引号。

- 阅读更多 -

js字符串转换成变量名

System

2024-08-09

所有,jquery

在JavaScript中，可以使用eval()函数将字符串转换为变量名。但请注意，eval()的使用可能会带来安全风险，因为它可以执行任意的JavaScript代码。

下面是一个使用eval()将字符串转换为变量名的例子：




let variableName = "name";
let value = "Alice";
 
// 创建一个新的全局变量，其名称为variableName的值，并赋予它value的值
eval(`window['${variableName}'] = "${value}"`);
 
console.log(name); // 输出: Alice

如果你只是想要一个变量的名字，而不是真的需要执行这个变量名包含的代码，你可以使用对象属性的方式来实现：




let variables = {};
let variableName = "name";
let value = "Alice";
 
// 将value赋给一个以variableName为属性名的对象属性
variables[variableName] = value;
 
console.log(variables.name); // 输出: Alice

这种方式不会执行任何代码，而且安全性较高，因为它没有使用eval()。

System

2024-08-09

所有,jquery

以下是一个简单的图书管理系统的前端部分示例，包括增,删,改,查的功能。使用了HTML, CSS, JavaScript, jQuery 和 axios 库。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Manager</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
  <h2>Books</h2>
  <input type="text" v-model="newBook" placeholder="Add book">
  <button @click="addBook">Add</button>
  <ul>
    <li v-for="(book, index) in books" :key="index">
      {{ book }}
      <button @click="removeBook(index)">Delete</button>
      <button @click="editBook(index)">Edit</button>
    </li>
  </ul>
  <div v-if="editIndex !== null">
    <input type="text" v-model="editBookValue">
    <button @click="updateBook(editIndex)">Update</button>
    <button @click="cancelEdit">Cancel</button>
  </div>
</div>
 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script src="main.js"></script>
</body>
</html>

CSS (style.css):




#app {
  max-width: 600px;
  margin: 30px auto;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
input[type="text"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
}
 
button {
  padding: 10px 15px;
  background-color: #5cb85c;
  color: white;
  border: none;
  margin: 10px 0;
  cursor: pointer;
}
 
button:hover {
  background-color: #4cae4c;
}
 
ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

JavaScript (main.js):




const { createApp, ref } = Vue;
 
createApp({
  setup() {
    const books = ref([]);
    const newBook = ref('');
    const editIndex = ref(null);
    const editBookValue = ref('');
 
    const fetchBooks = async () => {
      // 假设有一个API可以获取图书列表
      const response = await axios.get('/api/books');
      books.value = response.data;
    };
 
    fetchBooks();
 
    const addBook = () => {
      books.value.push(newBook.value);
      newBook.value = '';
    };
 
    const removeBook = (index) => {
      books.value.splice(index, 1);
    };
 
    const editBook = (index) => {
      editIndex.value = index;
      editBookValue.value = books.value[index];
    };
 
    const updateBook = (index) => {
      books.value[index] = editBookValue.value;
      editIndex.value = null;

System

2024-08-09

所有,jquery

jQuery.zTree\_Toc.js 是一个基于jQuery和zTree插件的Markdown文档目录生成器，可以帮助用户快速生成文档的目录。以下是如何使用这个插件的简单示例：

首先，确保你的页面中包含了jQuery库和zTree库。




<link rel="stylesheet" href="path/to/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="path/to/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="path/to/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="path/to/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>

在页面中引入jQuery.zTree\_Toc.js插件。




<script type="text/javascript" src="path/to/jQuery.zTree_Toc.js"></script>




<div id="table_of_contents"></div>




$(document).ready(function() {
    $("#table_of_contents").zTree_Toc({
        tocContainer: "#table_of_contents", //目录容器选择器
        contentContainer: ".content", //内容区域选择器
        windowWidth: $(window).width(), //窗口宽度
        windowHeight: $(window).height(), //窗口高度
        targetId: "sidebar", //侧边栏ID
        onTocCreated: function() {
            //目录生成后的回调函数
            console.log('Table of contents has been created.');
        }
    });
});

确保你的Markdown内容和目录容器在页面中正确定义，插件会自动解析Markdown的标题，并生成对应的目录。

- 阅读更多 -

用JavaScript+jquery手写一个简单的多语言

System

2024-08-09

所有,jquery

以下是一个简单的使用JavaScript和jQuery实现的多语言切换功能的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-Language Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="content">
  <h1 data-i18n="welcome"></h1>
  <p data-i18n="description"></p>
  <button data-i18n="btn_en"></button>
  <button data-i18n="btn_es"></button>
</div>
 
<script src="multilingual.js"></script>
</body>
</html>

JavaScript部分 (multilingual.js):




$(document).ready(function() {
  var languages = {
    en: {
      welcome: "Welcome to our website",
      description: "This is a simple example of a multilingual website.",
      btn_en: "English",
      btn_es: "Español"
    },
    es: {
      welcome: "Bienvenido a nuestro sitio web",
      description: "Esto es un ejemplo sencillo de un sitio web multilingüe.",
      btn_en: "Inglés",
      btn_es: "Español"
    }
  };
  
  var currentLanguage = 'en';
 
  function translate(lang) {
    currentLanguage = lang;
    $('[data-i18n]').each(function() {
      var textKey = $(this).data('i18n');
      $(this).text(languages[lang][textKey]);
    });
  }
 
  $('button').click(function() {
    var lang = $(this).data('i18n');
    lang = lang.substring(3); // Remove "btn_"
    translate(lang);
  });
 
  translate(currentLanguage); // Translate to default language on load
});

在这个示例中，我们定义了一个languages对象，它包含了英语和西班牙语的翻译。我们使用jQuery的.each()方法来遍历所有带有data-i18n属性的元素，并根据当前选定的语言来更新它们的文本内容。按钮点击事件处理函数会根据按钮的data-i18n属性来切换语言。

System

2024-08-09

所有,jquery

在JavaScript中，解决checked属性二次全选反选不显示勾的问题，可以通过监听checkbox的点击事件，然后手动改变其checked状态。以下是一个简单的示例代码：




document.addEventListener('DOMContentLoaded', function() {
    var checkboxes = document.querySelectorAll('.checkbox');
    var masterCheckbox = document.getElementById('masterCheckbox');
 
    masterCheckbox.addEventListener('click', function() {
        var isChecked = masterCheckbox.checked;
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = isChecked;
        }
    });
 
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].addEventListener('click', function() {
            var allChecked = true;
            for (var j = 0; j < checkboxes.length; j++) {
                if (!checkboxes[j].checked) {
                    allChecked = false;
                    break;
                }
            }
            masterCheckbox.checked = allChecked;
        });
    }
});

在这个示例中，我们有一个主checkbox（masterCheckbox）和多个子checkboxes（checkboxes）。当主checkbox被点击时，所有子checkboxes的状态会被切换。当任意一个子checkbox被点击时，主checkbox的状态会根据所有子checkboxes的状态更新。这样就避免了二次点击主checkbox时不显示勾的问题。

- 阅读更多 -

【js步骤引导】基于jquery实现步骤引导进度条效果

System

2024-08-09

所有,jquery

以下是一个使用jQuery实现步骤引导进度条效果的示例代码：

HTML部分：




<div id="step-progress">
  <div class="step active" data-step="1">Step 1</div>
  <div class="step" data-step="2">Step 2</div>
  <div class="step" data-step="3">Step 3</div>
  <div class="step" data-step="4">Step 4</div>
</div>
 
<div id="progress-bar-container">
  <div id="progress-bar"></div>
</div>

CSS部分：




#step-progress .step {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
}
 
#step-progress .step.active {
  color: #fff;
  background-color: #007bff;
}
 
#progress-bar-container {
  width: 100%;
  background-color: #eee;
  height: 5px;
  position: relative;
}
 
#progress-bar {
  width: 0;
  height: 100%;
  background-color: #007bff;
  transition: width 0.3s ease;
}

jQuery部分：




$(document).ready(function() {
  var steps = $('#step-progress .step');
  var progressBar = $('#progress-bar');
  var progressBarContainer = $('#progress-bar-container');
  var totalSteps = steps.length;
  var stepWidth = 100 / totalSteps;
 
  steps.click(function() {
    var step = $(this).data('step');
    steps.removeClass('active');
    $(this).addClass('active');
 
    // Update progress bar width
    progressBar.css('width', stepWidth + '%');
    progressBarContainer.css('width', stepWidth + '%');
  });
});

这段代码实现了一个简单的步骤引导进度条。用户点击一个步骤时，该步骤会被标记为激活，进度条的宽度会更新以反映当前步骤的完成情况。这是一个基本的实现，可以根据具体需求进行扩展和美化。

- 阅读更多 -