자바스크립트로 구현된 작은 기능-프런트엔드 Q&A-php.cn

자바스크립트로 구현된 작은 기능

王林

풀어 주다： 2023-05-09 17:47:07

원래의

562명이 탐색했습니다.

JavaScript는 HTML 및 CSS와 결합하여 강력한 웹 애플리케이션을 만들 수 있는 높은 수준의 동적 객체 지향 프로그래밍 언어입니다. 이 글에서는 JavaScript의 응용을 더 잘 이해할 수 있도록 JavaScript를 사용하여 구현된 몇 가지 작은 기능을 소개합니다.

버튼을 클릭하면 텍스트가 변경됩니다

이것은 매우 기본적인 JavaScript 애플리케이션이며 구현 방법도 매우 간단합니다. 버튼을 만들고 onclick 이벤트 핸들러를 추가할 수 있습니다. 버튼을 클릭하면 JavaScript 코드가 관련 텍스트를 수정합니다. 예:

<!DOCTYPE html>
<html>
<head>
  <title>点击按钮改变文本</title>
</head>
<body>
  <h1 id="header">欢迎来到我的网站</h1>
  <button onclick="changeText()">点击修改标题</button>

  <script>
    function changeText() {
      var header = document.getElementById("header");
      header.innerHTML = "欢迎访问我的个人博客";
    }
  </script>
</body>
</html>

로그인 후 복사

Timer

JavaScript를 사용하여 타이머를 생성할 수도 있는데, 이는 타이밍이 필요한 일부 애플리케이션에 매우 유용합니다. setInterval() 함수를 사용하여 타이머를 구현할 수 있습니다. 예:

<!DOCTYPE html>
<html>
<head>
  <title>计时器</title>
</head>
<body>
  <h1>倒计时：</h1>
  <p id="timer"></p>

  <script>
    var count = 60;
    var timer = document.getElementById("timer");

    var interval = setInterval(function(){
      count--;
      timer.innerHTML = count + "秒";
      if (count === 0) {
        clearInterval(interval);
        timer.innerHTML = "时间到！";
      }
    }, 1000);
  </script>
</body>
</html>

로그인 후 복사

확인 대화 상자

때로는 사용자에게 작업 수행 여부를 확인하도록 요청해야 하는 경우가 있습니다. JavaScript를 사용하면 사용자가 선택할 수 있는 확인 대화 상자를 만들 수 있습니다. 예:

<!DOCTYPE html>
<html>
<head>
  <title>确认对话框</title>
</head>
<body>
  <button onclick="showConfirm()">点击删除</button>

  <script>
    function showConfirm() {
      var choice = confirm("您确定要删除这个文件吗？");
      if (choice) {
        alert("文件已成功删除！");
      } else {
        alert("删除操作已取消。");
      }
    }
  </script>
</body>
</html>

로그인 후 복사

양식 유효성 검사

양식 유효성 검사는 매우 일반적인 JavaScript 응용 프로그램입니다. 사용자가 입력한 내용이 요구사항을 충족하는지 양식을 통해 확인할 수 있습니다. 예:

<!DOCTYPE html>
<html>
<head>
  <title>表单验证</title>
  <script>
    function validateForm() {
      var name = document.forms["myForm"]["name"].value;
      var phone = document.forms["myForm"]["phone"].value;

      if (name === "") {
        alert("请输入您的姓名。");
        return false;
      }

      if (phone === "") {
        alert("请输入您的电话号码。");
        return false;
      }

      // 电话号码必须是数字
      if (isNaN(phone)) {
        alert("电话号码必须是数字。");
        return false;
      }
    }
  </script>
</head>
<body>
  <h1>请填写以下表单：</h1>
  <form name="myForm" onsubmit="return validateForm()">
    姓名：<input type="text" name="name"><br>
    电话：<input type="text" name="phone"><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

로그인 후 복사

Picture Carousel

JavaScript를 사용하여 동적 사진 회전판을 만들 수도 있습니다. JavaScript를 사용하여 여러 이미지가 포함된 div 요소를 설정한 다음 setInterval() 함수를 사용하여 이미지를 전환할 수 있습니다. 예:

<!DOCTYPE html>
<html>
<head>
  <title>图片轮播</title>
  <style>
    #slideshow {
      width: 400px;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
    #slideshow img {
      width: 400px;
      height: 300px;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="slideshow">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />
  </div>

  <script>
    var currentImg = 0;
    var imgList = document.querySelectorAll("#slideshow img");

    setInterval(function() {
      imgList[currentImg].style.opacity = 0;
      currentImg = (currentImg + 1) % imgList.length;
      imgList[currentImg].style.opacity = 1;
    }, 2000);
  </script>
</body>
</html>

로그인 후 복사

Summary

JavaScript는 다양한 웹 애플리케이션을 만드는 데 사용할 수 있는 매우 강력한 프로그래밍 언어입니다. 이 문서에서는 버튼 클릭 시 텍스트 변경, 타이머, 확인 대화 상자, 양식 유효성 검사 및 이미지 캐러셀을 포함한 일부 JavaScript 사용을 소개합니다. 이 예제가 JavaScript 애플리케이션을 더 잘 이해하는 데 도움이 되기를 바랍니다.

위 내용은 자바스크립트로 구현된 작은 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!