标签 Javascript 下的文章

2024-08-10

在Vue中，你可以使用计算属性来格式化JSON数据并将其输出到HTML中。以下是一个简单的示例：




<template>
  <div>
    <pre>{{ formattedJson }}</pre>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      jsonData: {
        name: "Vue.js",
        type: "JavaScript Framework",
        year: 2014
      }
    };
  },
  computed: {
    formattedJson() {
      // 使用JSON.stringify将对象转换为字符串，并格式化输出
      return JSON.stringify(this.jsonData, null, 2);
    }
  }
};
</script>

在这个例子中，jsonData 是组件的数据属性，包含了待格式化的JSON对象。formattedJson 是一个计算属性，使用 JSON.stringify 方法将 jsonData 转换为字符串，并通过指定 null 和缩进级别 2 来进行格式化。在模板中，使用 {{ formattedJson }} 将格式化后的JSON数据直接输出到HTML中，通过 <pre> 标签保持原格式。

- 阅读更多 -

用html、css、js做一个简单的计算器

System

2024-08-10

所有,html

以下是一个简单的网页计算器示例，使用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>Simple Calculator</title>
<style>
  .calculator {
    margin: auto;
    text-align: center;
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  input[type="text"] {
    width: 90%;
    margin-bottom: 10px;
    padding: 5px;
  }
  input[type="button"] {
    width: 40px;
    margin: 5px;
  }
</style>
</head>
<body>
 
<div class="calculator">
  <input type="text" id="display" disabled>
  <br>
  <input type="button" value="1" onclick="press('1')">
  <input type="button" value="2" onclick="press('2')">
  <input type="button" value="3" onclick="press('3')">
  <input type="button" value="+" onclick="press('+')">
  <br>
  <input type="button" value="4" onclick="press('4')">
  <input type="button" value="5" onclick="press('5')">
  <input type="button" value="6" onclick="press('6')">
  <input type="button" value="-" onclick="press('-')">
  <br>
  <input type="button" value="7" onclick="press('7')">
  <input type="button" value="8" onclick="press('8')">
  <input type="button" value="9" onclick="press('9')">
  <input type="button" value="*" onclick="press('*')">
  <br>
  <input type="button" value="0" onclick="press('0')">
  <input type="button" value="Clear" onclick="clearDisplay()">
  <input type="button" value="=" onclick="calculate()">
  <input type="button" value="/" onclick="press('/')">
</div>
 
<script>
  let current = 0;
  let operator = "";
  const display = document.getElementById("display");
 
  function press(btn) {
    if (btn === "Clear") {
      clearDisplay();
    } else {
      display.value = display.value + btn;
    }
  }
 
  function clearDisplay() {
    display.value = "";
  }
 
  function calculate() {
    const input = display.value;
    if (input) {
      const result = eval(input);
      display.value = result;
    }
  }
</script>
 
</body>
</html>

这个计算器有基本的数字键、运算符键和清除键。输入数字后，选择运算符并输入另一个数字，最后按下等号键计算结果。使用eval函数来执行表达式计算。这个示例简单易懂，但不包括错误处理和额外功能，如处理多位数字和小数。

- 阅读更多 -

HTML、CSS、JAVASCRIPT优缺点及共同点

System

2024-08-10

所有,html

HTML、CSS、JAVASCRIPT各自的优缺点和共同点如下：

HTML (Hypertext Markup Language):

优点：
- 易于学习和使用。
- 提供了结构化内容，有利于搜索引擎优化 (SEO)。
缺点：
- 不适合进行复杂的交互和动态内容展示。

CSS (Cascading Style Sheets):

优点：
- 提供了样式层次，使得HTML内容和样式分离，增强了代码的可维护性。
- 可以实现复杂的页面布局和动态效果。
缺点：
- 不适合编写程序逻辑。

JavaScript:

优点：
- 可以编写复杂的程序逻辑，实现交互和动画。
- 可以操作DOM，实现动态的页面更新。
- 有丰富的库和框架（如jQuery、Angular、React等）简化开发过程。
缺点：
- 对于不支持JavaScript的旧浏览器不够友好。
- 安全性问题，比如跨站脚本攻击 (XSS)。

共同点：

都是网页开发中不可或缺的技术，通常结合使用以创建动态和交互性强的网站。
都是基于浏览器的技术，在大多数现代网页开发中被广泛使用。

- 阅读更多 -

JS 实现鼠标框选（页面选择）时返回对应的 HTML 或文案内容

System

2024-08-10

所有,html

在JavaScript中，可以使用window.getSelection()方法来获取用户使用鼠标框选的文本。然后，可以通过Range对象的commonAncestorContainer属性来找到选中文本的最近的公共祖先节点，进而获取该节点的HTML或文本内容。

以下是一个简单的示例代码，展示了如何实现这个功能：




// 监听鼠标选择事件
document.addEventListener('mouseup', function() {
    // 获取选中的文本范围
    var selection = window.getSelection();
    if (selection.rangeCount > 0) {
        var range = selection.getRangeAt(0);
        // 获取最近的公共祖先容器
        var commonAncestor = range.commonAncestorContainer;
 
        // 检查公共祖先是否是节点（元素）
        if (commonAncestor instanceof Node) {
            // 如果是元素节点，获取该元素的HTML
            if (commonAncestor.nodeType === Node.ELEMENT_NODE) {
                var html = commonAncestor.outerHTML;
                console.log('选中的HTML:', html);
            } else {
                // 如果不是元素节点，获取节点文本
                var text = commonAncestor.textContent;
                console.log('选中的文本:', text);
            }
        }
    }
});

这段代码在用户完成鼠标框选操作后（即鼠标松开后），会打印出被框选的内容。如果框选的是一段文本，它会打印出选中的文本内容；如果框选的是HTML元素，它会打印出该元素的HTML。

- 阅读更多 -

「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中

System

2024-08-10

所有,html




// 引入DHTMLX Gantt和ContextMenu库
import { gantt, Gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/locale/locale_cn";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_grid_selection.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_palette.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_constraints.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_parent_tasks.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_export.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_timeline.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_contextmenu.js";
 
// 初始化Gantt图表
gantt.init("gantt_here");
 
// 配置Gantt图表
gantt.config.locale = "cn";
gantt.config.date_format = "%Y-%m-%d";
gantt.config.open_split_tasks = true;
gantt.config.autosize = true;
gantt.config.scale_height = 600;
gantt.config.min_column_width = 30;
gantt.config.duration_unit = "day";
gantt.config.work_time = true;
gantt.config.correct_work_time = true;
gantt.config.zoom_on_scroll = false;
gantt.config.min_grid_size = 20;
gantt.config.fbar = [{
    text: "导入",
    handler: importData
}, {
    text: "导出",
    handler: exportData
}];
 
// 创建数据
gantt.init("gantt_here");
gantt.parse(getGanttData());
 
// 初始化上下文菜单
gantt.addContextMenu();
 
// 其他函数和数据定义略...

在这个例子中，我们导入了必要的DHTMLX Gantt和ContextMenu库，并初始化了Gantt图表。我们还配置了Gantt的设置，并创建了一些数据。最后，我们调用gantt.addContextMenu()来初始化上下文菜单。这个简化的代码片段展示了如何将上下文菜单集成到Gantt图表中。

- 阅读更多 -

js Date时间格式化方法

System

2024-08-10

所有,css3

在JavaScript中，可以使用自定义的函数来格式化Date对象。以下是一个简单的函数，用于将Date对象格式化为YYYY-MM-DD HH:mm:ss格式：




function formatDate(date) {
  function padZero(num) {
    return num < 10 ? '0' + num : num;
  }
 
  var year = date.getFullYear();
  var month = padZero(date.getMonth() + 1);
  var day = padZero(date.getDate());
  var hours = padZero(date.getHours());
  var minutes = padZero(date.getMinutes());
  var seconds = padZero(date.getSeconds());
 
  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
 
// 使用示例
var now = new Date();
console.log(formatDate(now)); // 输出格式化的日期时间字符串

这个函数首先定义了一个辅助函数padZero，用于在需要的情况下向数字前面添加零。然后，它获取了年、月、日、小时、分钟和秒，并调用padZero函数以确保它们格式正确。最后，它将这些部分连接成一个字符串并返回。

- 阅读更多 -

vue中使用aos.js动画库

System

2024-08-10

所有,css3

要在Vue中使用aos.js动画库，你需要按照以下步骤操作：

安装aos.js：




npm install aos --save

在Vue项目中引入aos.js和它的CSS文件：




// main.js 或者其他的入口文件
import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'
 
Vue.use(AOS)

在Vue组件中使用aos指令：




<template>
  <div>
    <div v-aos="'fade-up'"></div>
    <div v-aos="'fade-down'"></div>
    <!-- 更多元素 -->
  </div>
</template>
 
<script>
export default {
  mounted() {
    AOS.init();
  }
}
</script>

确保在组件的mounted钩子中初始化AOS：




mounted() {
  AOS.init();
}

在你的Vue组件中，使用v-aos指令并指定动画效果。

确保你的Vue项目已经正确安装并配置了aos.js和它的CSS。在组件的mounted钩子函数中调用AOS.init()来初始化动画。在需要应用动画的元素上使用v-aos指令，并通过它的data-aos属性来设置动画的类型。

- 阅读更多 -

js 触发 onblur事件

System

2024-08-10

所有,ajax

在JavaScript中，你可以通过编程方式触发onblur事件，以便在一个元素上模拟失去焦点的行为。以下是如何做到这一点的示例代码：




// 获取你想要触发 onblur 事件的元素
var element = document.getElementById('myElement');
 
// 创建一个事件对象
var event = new Event('blur');
 
// 触发这个事件
element.dispatchEvent(event);

如果你的元素是通过文档对象模型（DOM）直接创建的，而不是存在于页面加载时，你需要先将其添加到文档中，然后再触发事件。




// 创建一个新元素
var newElement = document.createElement('div');
newElement.id = 'myNewElement';
document.body.appendChild(newElement); // 将元素添加到文档中
 
// 现在我们可以绑定和触发 onblur 事件
newElement.onblur = function() {
  console.log('Blur event triggered!');
};
 
// 创建并触发事件
var event = new Event('blur');
newElement.dispatchEvent(event);

请注意，new Event构造函数可能在不支持的旧浏览器中不可用。在这种情况下，你可以使用以下兼容性写法：




var event = document.createEvent('HTMLEvents');
event.initEvent('blur', true, true);
newElement.dispatchEvent(event);

- 阅读更多 -

走马灯效果（html+css+js）

System

2024-08-10

所有,css3

走马灯效果通常指的是文字滚动显示，类似于新闻滚动或者公告栏的效果。以下是一个简单的HTML、CSS和JavaScript结合的走马灯效果实现：

HTML:




<div id="marquee-container">
  <p id="marquee-text">这是走马灯效果的文本，将会从右向左滚动显示。</p>
</div>

CSS:




#marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
 
#marquee-text {
  display: inline-block;
  animation: marquee 10s linear infinite;
}
 
@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

JavaScript (可选，用于处理文本长度动态调整滚动速度):




function adjustMarqueeSpeed(textElement, containerWidth) {
  const textWidth = textElement.getBoundingClientRect().width;
  if (textWidth > containerWidth) {
    const duration = textWidth / containerWidth * 10; // 10s基础上根据文本长度调整
    textElement.style.animationDuration = `${duration}s`;
  }
}
 
window.onload = function() {
  const container = document.getElementById('marquee-container');
  const text = document.getElementById('marquee-text');
  adjustMarqueeSpeed(text, container.offsetWidth);
};

这段代码实现了一个基本的走马灯效果。@keyframes定义了名为marquee的动画，通过改变transform的translateX值实现滚动效果。JavaScript 代码用于在页面加载完成后调整走马灯的滚动速度，使得当文本长度超出容器宽度时可以更慢或者更快地滚动。

- 阅读更多 -

HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头

System

2024-08-10

所有,css3

以下是一个使用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>Image Slider</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
  }
  .slider img {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .slider img.active {
    opacity: 1;
  }
  .pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .pagination button {
    cursor: pointer;
    padding: 5px;
    margin: 0 5px;
    background-color: #ddd;
    border: none;
    outline: none;
  }
  .pagination button.active {
    background-color: #007bff;
    color: white;
  }
  .arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: #ddd;
    user-select: none;
  }
  .arrow:hover {
    color: #007bff;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img src="image1.jpg" class="active">
  <img src="image2.jpg">
  <img src="image3.jpg">
 
  <div class="arrow left">&#10094;</div>
  <div class="arrow right">&#10095;</div>
 
  <div class="pagination">
    <button class="active"></button>
    <button></button>
    <button></button>
  </div>
</div>
 
<script>
  let index = 0;
  const images = document.querySelectorAll('.slider img');
  const pagination = document.querySelectorAll('.pagination button');
  const leftArrow = document.querySelector('.left');
  const rightArrow = document.querySelector('.right');
 
  function showImage(imageIndex) {
    images.forEach((img, i) => img.classList.toggle('active', i === imageIndex));
    pagination.forEach((button, i) => button.classList.toggle('active', i === imageIndex));
  }
 
  showImage(index);
 
  rightArrow.addEventListener('click', () => {
    index = (index + 1) % images.length;
    showImage(index);
  });
 
  leftArrow.addEventListener('click', () => {
    index = (index + images.length - 1) % images.length;
    showImage(index);
  });
 
  pagination.forEach((button, i) => {
    button.addEven

- 阅读更多 -