首页 > 编程语言 >JavaScript——输入框、计时器

JavaScript——输入框、计时器

时间:2022-12-06 22:34:50浏览次数:35  
标签:function passWordEle JavaScript 输入框 getElementById 计时器 time let document

JavaScript——输入框、计时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onl oad="get_time()">
		<!-- <form action=""> -->
			<!-- register -->
			<p>
				username:<input type="text" id="userName">
				<span style="color: red;"></span>
			</p>
			
			<p>
				password:<input type="password" id="passWord">
				<span style="color: red;"></span>
			</p>
			<button id="suBtu">提交</button>
		<!-- </form> -->
		
		<!-- time -->
		<br>
		time:<span id='nowTime'></span>
		<br>
		<button id='start'>start</button>
		<button id="stop">stop</button>
	<script src="new_file.js"></script>
	</body>
</html>
let suBtuEle = document.getElementById('suBtu')
suBtuEle.onclick = function(){
	let userNameEle = document.getElementById('userName')
	let passWordEle = document.getElementById('passWord')
	if (userNameEle.value === 'jason'){
		userNameEle.nextElementSibling.innerText = 'username is not jason!'
	}
	if (passWordEle.value === '123'){
		passWordEle.nextElementSibling.innerText = 'password is not 123!'
	}
	userNameEle.onfocus = function(){
		userNameEle.nextElementSibling.innerText = ''
	}
	passWordEle.onfocus = function(){
		passWordEle.nextElementSibling.innerText = ''
	}
}

// 获取当前时间、开始、结束按钮标签
let timeEle = document.getElementById('nowTime')
let startEle = document.getElementById('start')
let stopEle = document.getElementById('stop')
// 获取当前时间

function get_time(){
	var date=new Date();
	var time=date.toLocaleString();
	document.getElementById("nowTime").innerHTML=time;
}
t = setInterval("get_time();",1000);

startEle.onclick = function(){
	t = setInterval("get_time();",1000);
}

stopEle.onclick = function(){
	clearInterval(t)
}

标签:function,passWordEle,JavaScript,输入框,getElementById,计时器,time,let,document
From: https://www.cnblogs.com/HaiMan/p/16961558.html

相关文章

  • JavaScript基础2
    今日内容概要BOM操作DOM操作jQuery类库今日内容详细BOM操作window对象BOM(BrowserObjectModel)是指浏览器对象模型它使JavaScript有能力与浏览器进行'对话'W......
  • python之路43 JavaScript语法BOM与DOM jQuery对比
    前戏到目前为止,我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法,并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互,我们......
  • JavaScript(二)
    ❤️‍JavaScript(二)BOM操作DOM操作jQuery类库❤️‍BOM操作BOM(BrowserobjectModel)是指浏览器对象模型,它的功能就是让javascrip能和浏览器进行“交流对话”;操作浏览器......
  • JavaScript——BOM操作、DOM操作
    JavaScript——BOM操作、DOM操作一、BOM操作1.1window相关操作/* BOM(BrowserObjectModel)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”*///1、......
  • Javascript
    内容概要BOM操作BOM操作基础DOM操作jQuery类库BOM操作BOM操作基础BOM(BrowserObjectModel)是指浏览器对象模型,它使用Javascript有能力与浏览器进行'对话'......
  • JavaScript中的异步、同步和回调函数
    异步(Asynchronous,async)是与同步(Synchronous,sync)相对的概念。在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序......
  • 【javascript】call、bind、apply方法的作用和区别
    1、call,apply,bind相同点都是改变this的指向接收的第一个参数都是要指向的对象都可以使用第一个参数之外的其他参数传参2、call,apply,bind不同点call,bind的传参都......
  • javascript手写树形结构
    constarr1=[{menuId:1,name:"系统管理1",parentMenu:null,},{menuId:2,name:"系统管理2",parentMenu:null,},{......
  • JavaScript文件分片上传,断点续传
    ​前言一、SpringMVC简介1.1、SpringMVC引言为了使Spring有可插入的MVC架构,SpringFrameWork在Spring基础上开发SpringMVC框架,从而在使用Spring进行WEB开发时可以......
  • Javascript-极速入门指南
    内容概要Javascript编程语言JS编程语言简介注释语法引入JS的多种方式结束符号变量与常量定义变量let关键字与var关键字的区别定义常量基本数据类型运算......