Use JavaScript functions to achieve user interaction and dynamic effects

Use JavaScript functions to achieve user interaction and dynamic effects

With the development of modern web design, user interaction and dynamic effects have become the key to attracting users’ attention. As a commonly used scripting language, JavaScript has powerful functions and flexible features, and can achieve a variety of user interactions and dynamic effects. This article will introduce some common JavaScript functions and give specific code examples.

1. Change element style (style)

You can easily change the style of web page elements through JavaScript functions, such as changing color, font size, background, etc.

function changeColor() {
  var element = document.getElementById("myElement");
  element.style.color = "red";
}

function changeFontSize() {
  var element = document.getElementById("myElement");
  element.style.fontSize = "20px";
}

function changeBackground() {
  var element = document.getElementById("myElement");
  element.style.backgroundColor = "blue";
}

2. Showing and hiding elements (display)

You can display and hide elements through JavaScript functions to improve the user interaction experience.

function showElement() {
  var element = document.getElementById("myElement");
  element.style.display = "block";
}

function hideElement() {
  var element = document.getElementById("myElement");
  element.style.display = "none";
}

3. Add and remove elements (createElement and removeChild)

Use JavaScript functions to dynamically add and remove web page elements.

function addElement() {
  var element = document.createElement("p");
  element.innerHTML = "这是新添加的元素";
  document.body.appendChild(element);
}

function removeElement() {
  var element = document.getElementById("myElement");
  document.body.removeChild(element);
}

4. Response to user events (addEventListener)

JavaScript functions can respond to user events, such as clicks, mouse movements, etc.

function handleClick() {
  alert("点击事件被触发");
}

function handleMouseMove(event) {
  var x = event.clientX;
  var y = event.clientY;
  console.log("鼠标移动到坐标 (" + x + "," + y + ")");
}

var element = document.getElementById("myElement");
element.addEventListener("click", handleClick);
element.addEventListener("mousemove", handleMouseMove);

5. Achieve animation effects (setTimeout and setInterval)

Animation effects, such as gradients, scaling, etc., can be achieved through JavaScript functions.

function fadeIn(element) {
  var op = 0.1;  // 初始透明度为0.1
  var timer = setInterval(function () {
    if (op >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
    op += op * 0.1;
  }, 10);
}

function scaleElement(element, scale) {
  var size = 100;  // 初始大小为100
  var timer = setInterval(function () {
    if (size >= 200) {
      clearInterval(timer);
    }
    element.style.transform = "scale(" + size / 100 + ")";
    size += 10;
  }, 100);
}

The above are just some common examples of JavaScript functions. Through these functions, we can achieve more complex user interactions and dynamic effects. I hope this article will be helpful to you and enable you to use more creativity and imagination in web design.

The above is the detailed content of Use JavaScript functions to achieve user interaction and dynamic effects. For more information, please follow other related articles on the PHP Chinese website!