interface Web
js tutoriel
[js] : détecter les entrées de l'utilisateur, le paramètre de style par défaut de la zone de texte, le style de la table de conception pour tout sélectionner et inverser la sélection
[js] : détecter les entrées de l'utilisateur, le paramètre de style par défaut de la zone de texte, le style de la table de conception pour tout sélectionner et inverser la sélection
Sujet 1 : Détection des entrées utilisateur :
Exigences du sujet :
Écrire une page d'enregistrement d'utilisateur
Vérifiez si le nom d'utilisateur comporte moins de 6 chiffres et si le mot de passe comporte plus de 8 chiffres. Si les conditions ne sont pas remplies, mettez en surbrillance la zone de texte
Le code est le suivant :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册页面</title>
<style>
.bg {background-color: red; }
</style>
</head>
<body>
<!-----id适用于js中的--->
<input type="text" name="name" id="name" /><br>
<input type="text" name="pwd" id="pwd" /><br>
<input type="submit" value="注册" id="submit" />
<script>
// 编写一个用户注册页面
// 检测用户名是否是6位以下，密码是否是8位以上，如果不满足要求高亮显示文本框 ；
var nameText = document.getElementById('name');
var pwdText = document.getElementById('pwd');
var submit = document.getElementById('submit');
//给submit按钮注册事件
submit.onclick = function () {
if(nameText.value.length < 6 && nameText.value.length > 0) {
nameText.className = '';
} else {
nameText.className = 'bg';
}
if(pwdText.value.length > 8 && pwdText.value.length < 16) {
pwdText.className = '';
} else {
pwdText.className = 'bg';
}
//取消submit的默认行为的执行 if里面不需要这句了 如果加了肯能会影响后续代码的执行
return false;
}
</script>
</body>
</html>Sujet 2 : Définir le style par défaut de la zone de texte :
![[js] : détecter les entrées de lutilisateur, le paramètre de style par défaut de la zone de texte, le style de la table de conception pour tout sélectionner et inverser la sélection](https://img.php.cn//upload/image/199/523/553/1533608688887946.png "1533608688887946.png")
Cette phrase peut définir la valeur par défaut de la zone de texte ;
L'effet est :![[js] : détecter les entrées de lutilisateur, le paramètre de style par défaut de la zone de texte, le style de la table de conception pour tout sélectionner et inverser la sélection](https://img.php.cn//upload/image/832/609/640/1533608704560537.png "1533608704560537.png")
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置文本框中的默认样式</title>
<style>
.bg {color: gray; }
</style>
</head>
<body>
<input type="text" id="textSearch" class="bg" value="请输入关键字" >
<input type="button" value="搜索">
<script>
//注册事件
//如果文本框获得焦点 当内容是请输入关键字 清空内容 文字颜色恢复默认的黑色
var textSearch = document.getElementById('textSearch');
textSearch.onfocus = function () {
if(textSearch.value === '请输入关键字') {
this.value = '';
//把this的属性恢复为默认值 这里作用是把文字颜色变为黑色
this.className = '';
}
}
// 当失去焦点的时候onblur。如果文本框中的内容为空 设置文本框中内容为 请输入关键字 设置字体颜色为gray
textSearch.onblur = function () {
// if (textSearch.value === '') {}
// 这一句不太好的 这个要是用户第一个输入的是空格的话那么就会误判 我们可以用它的长度来判断
if (textSearch.value.length === 0) {
this.className = 'bg';
this.value = '请输入关键字';
}
}
</script>
</body>
</html>Sujet 3 : : Concevoir un style de tableau pour réaliser la fonction de tout sélectionner et d'inverser la sélection
Fonction à réaliser :
1 Lorsque vous cliquez sur le bouton Sélectionner tout (case à cocher du parent), gardez l'état sélectionné de la case à cocher de l'enfant cohérent avec la case à cocher du parent
2 Donner les cases à cocher à tous les enfants Enregistrez un événement de clic et cliquez sur la case à cocher de l'enfant Si l'une des cases à cocher de l'enfant n'est pas cochée, la case à cocher du parent n'est pas non plus cochée
. 3 Sélection inversée
Exemple de code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全选反选</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<p class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="father" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="son">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
<script>
// 1 点击全选按钮(父的checkbox)的时候，让子的checkbox的选中状态跟父的checkbox保持一致
//1.1 给父级的check注册事件
//获取父级checkbox
var father = document.getElementById('father');
//获取所有的子级checkbox
//注意这一句用选择器的获得元素的写法
var sons = document.querySelectorAll('#son input[type=checkbox]');
var len = sons.length;
father.onclick = function () {
//1.2遍历这个容器中的所有元素 让所有的子级checkbox的状态都等于父级的状态
for(var i = 0;i < len; i++) {
//注意这一句话是核心 让子级的checkbox的状态等于父级
sons[i].checked = this.checked;
}
}
// 2 给所有的子的checkbox注册点击事件，点击子的checkbox 如果有一个子的checkbox没有选中，父的checkbox也不选中
// 2.1 给所有的子的checkbox注册点击事件
// 核心代码封装成方法 便于使用
function step2 () {
//2.2 只要子级有一个是false那么父级也就是false
//2.2 定义一个变量用于父级的状态 这个fatherIsTrue必须在点击事件这里面 father的赋值也是 因为每个点击事件需要判断所有的子级的状态 在外面的话是实现不了的
var fatherIsTrue = true;
for (var j = 0; j < len; j++) {
if (!sons[j].checked) {
fatherIsTrue = false;
break;
}
}
father.checked = fatherIsTrue;
}
for(var i = 0;i < len; i++) {
sons[i].onclick = function () {
step2();
}
}
//3 反选
// 给反选按钮注册一个事件
var btn = document.getElementById('btn');
btn.onclick = function () {
for(var i = 0; i < len; i++) {
sons[i].checked = !sons[i].checked;
}
//写到这里我门会有一个问题就是反选不能控制父级 但是呢我们的第二步已经完成这个问题了 所以我们把第二步
//的核心代码分装成一个方法 直接调用即可 直接粘贴复制过来不太好
step2();
}
</script>
</p>
</body>
</html>Exemple de page Web :
![[js] : détecter les entrées de lutilisateur, le paramètre de style par défaut de la zone de texte, le style de la table de conception pour tout sélectionner et inverser la sélection](https://img.php.cn//upload/image/237/889/832/1533608739833557.png "1533608739833557.png")
Remarque : cette phrase est le noyau. Que le statut de la case à cocher de l'enfant soit égal à Parent
fils[i].checked = this.checked;
Recommandations associées :
Comment sélectionner et inverser toutes les cases à cocher js
Code d'implémentation js pour définir le style de la ligne sélectionnée
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
Comment utiliser les cartes source pour déboguer le code JavaScript minifié?
Mar 18, 2025 pm 03:17 PM
L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
