<script> function zc(event){ var zh=document.querySelector("#zczh") var mm=document.querySelector("#zcmm") var obj={} var a=0 obj.name=zh.value, obj.password=mm.value event.preventDefault() var arr=JSON.parse(localStorage.getItem("arr"))||[] for(let i=0;i<arr.length;i++){ if(arr[i].name==zh.value){ a=1 } } if(nan.checked==false&&nv.checked==false){ alert("请选择性别") return } if(zh.value==""||zcmm.value==""){ alert("账号或密码不能为空") return }else if(a==1){ alert("用户名已经被注册了") return } arr.push(obj) localStorage.setItem("arr",JSON.stringify(arr)) console.log(arr) alert("恭喜你注册成功") location.href="./index.html" } </script>解释代码
时间: 2024-04-25 09:26:36 浏览: 276
这段代码是一个 JavaScript 函数,用于注册账号。它首先获取输入框中的账号和密码,并将它们存储在一个 JavaScript 对象中。然后它从本地存储中获取一个名为 "arr" 的数组,并检查输入的用户名是否已经存在于该数组中。如果用户名已经存在,它会提示用户进行修改。如果没有选择性别,它会提示用户选择性别。如果用户名和密码输入框为空,它会提示用户进行填写。如果一切都符合要求,它会将新的用户对象添加到 "arr" 数组中,将该数组存储在本地存储中,然后跳转到首页。
相关问题
<video id="myVideo" src="myVideo.ogv"></video> <input type="button" value="播放/暂停"/></br> <script> var myVideo =document.querySelector("#myVideo"); var oBtn =document.querySelector("input") oBtn.onclick = function (){ if(myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> 为上述代码增添一些新功能,并给出添加后的代码
以下是为上述代码增添新功能后的代码:
```
<video id="myVideo" src="myVideo.ogv"></video>
<input type="button" value="播放/暂停"/>
<input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1"/>
<input type="range" id="seekBar" min="0" step="0.1"/>
<span id="currentTime">00:00</span>/<span id="duration">00:00</span>
<script>
var myVideo = document.querySelector("#myVideo");
var playBtn = document.querySelector("input[value='播放/暂停']");
var volumeBar = document.querySelector("#volumeBar");
var seekBar = document.querySelector("#seekBar");
var currentTime = document.querySelector("#currentTime");
var duration = document.querySelector("#duration");
// 播放/暂停视频
playBtn.onclick = function () {
if (myVideo.paused) {
myVideo.play();
this.value = "暂停";
} else {
myVideo.pause();
this.value = "播放";
}
};
// 调节音量
volumeBar.oninput = function () {
myVideo.volume = this.value;
};
// 调节进度条
seekBar.oninput = function () {
myVideo.currentTime = this.value;
};
// 更新视频当前时间和总时长
myVideo.ontimeupdate = function () {
var curTime = formatTime(myVideo.currentTime);
var totalDuration = formatTime(myVideo.duration);
currentTime.textContent = curTime;
duration.textContent = totalDuration;
seekBar.value = myVideo.currentTime;
};
// 格式化时间
function formatTime(time) {
var minutes = Math.floor(time / 60);
var seconds = Math.floor(time % 60);
return (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
}
</script>
```
代码中新增了调节音量、调节进度条、展示当前时间和总时长等功能,同时对代码进行了一些细节上的优化,比如添加了格式化时间函数,让时间显示更加友好。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { text-align: right; } #pwdTd> img,#pwdTwoTd > img { width: 17px; height: 15px; position: absolute; right: 5px; top: 5px; } #pwdTd,#pwdTwoTd { position: relative; } </style> <script type="text/javascript"> window.onload = function() { var username = document.querySelector("#username"); var pwd = document.querySelector("#pwd"); var pwdTwo = document.querySelector("#pwdTwo"); var usernameText = document.querySelector("#usernameText"); var pwdText = document.querySelector("#pwdText"); var pwdTwoText = document.querySelector("#pwdTwoText"); var phone = document.querySelector("#phone"); var phoneText = document.querySelector("#phoneText"); //绑定失去焦点事件 username.onblur = function() { var usernameV = document.querySelector("#username").value; if (usernameV.length == 0) { usernameText.innerHTML = "账号不能为空"; usernameText.style.color = "red"; usernameText.style.fontSize = "13px" } else { usernameText.innerHTML = ""; } }; username.onfocus = function() { //pwdText.innerHTML = ""; }; //给密码框设置焦点事件 pwd.onblur = function() { var pwdV = document.querySelector("#pwd").value; var reg1 = /^[0-9]{6,20}$/; var reg2 = /^[A-z]{6,20}$/; if (pwdV.length == 0) { pwdText.innerHTML = "密码不能为空"; pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else if (pwdV.length < 6) { pwdText.innerHTML = "密码长度不能小于六位"; pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else if (reg1.test(pwdV)) { pwdText.innerHTML = "密码过于简单(不能是纯数字)"; pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else if (reg2.test(pwdV)) { pwdText.innerHTML = "密码过于简单(不能是纯英文)";
这是一个HTML文档的开头部分,其中包含了一些元素和属性。其中,<!DOCTYPE html>是文档类型声明,告诉浏览器这是一个HTML5文档。<html>是HTML文档的根元素,包含了整个文档的内容。<head>是文档头部元素,包含了一些元数据,如字符集、标题、样式表等。<meta charset="utf-8">是设置文档的字符集为UTF-8,确保文档中的中文等非ASCII字符能够正确显示。<title>是设置文档的标题,显示在浏览器的标签页上。<style type="text/css">是定义文档的样式表,其中table { text-align: right; }是设置表格中的文本对齐方式为右对齐。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)