ホームページ > 記事 > ウェブフロントエンド > JavaScriptで実装された小さな機能
JavaScriptで実装された小さな機能
- 王林オリジナル
- 2023-05-09 17:47:07436ブラウズ
JavaScript は、HTML および CSS と組み合わせて強力な Web アプリケーションを作成できる、高レベルの動的オブジェクト指向プログラミング言語です。この記事では、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>概要
JavaScript は、さまざまな Web アプリケーションの作成に使用できる非常に強力なプログラミング言語です。この記事では、ボタンクリック時のテキストの変更、タイマー、確認ダイアログ、フォーム検証、画像カルーセルなど、JavaScript の使用法をいくつか紹介します。これらの例が JavaScript アプリケーションの理解を深めるのに役立つことを願っています。
以上がJavaScriptで実装された小さな機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。