JavaScript的样式

庄文杰21

于 2022-09-26 13:43:16 发布

阅读量276

点赞数

文章标签： servlet java 前端

本文链接：https://blog.csdn.net/weixin_70649267/article/details/127051833

版权

一，写一段程序，计算1-100之间所有3的倍数的和

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a=0
			for (i=1;i<101;i++) {
				if (i%3==0) {
					a+=i
				}
			}
			document.write(a)
		</script>
	</body>
</html>

二，在页面上实现一个显示当前时间的动态时钟，效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span id="time"></span >
		<script type="text/javascript">
			var i=0
			setInterval(function () {
				var date = new Date()
				var hours=date.getHours()
				var minutes=date.getMinutes()
				var seconds=date.getSeconds()
				hours=hours>9?hours:"0"+hours
				minutes=minutes>9?minutes:"0"+minutes
				seconds=seconds>9?seconds:"0"+seconds
				var result="现在是"+hours+"时"+minutes+"分"+seconds+"秒"
				document.getElementById("time").innerHTML=result
			},1000)
		</script>
	</body>
</html>

三，编写计算器，实现加、减、乘、除

如图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		请输入第一个数：<input type="text"id="a" /><br /><br />
		请输入第二个数：<input type="text"id="b" /><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		运算符：<input type="button"" name="" id="" value="+" onclick="ca1('+')"/>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="button"" name="" id="" value="-" onclick="ca1('-')"/>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="button"" name="" id="" value="*" onclick="ca1('*')"/>&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="button"" name="" id="" value="/"onclick="ca1('/')"/><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		运算结果为：<input type="text" id="c"><br />
		<script type="text/javascript">
			function ca1(i){
				var one=document.getElementById("a").value
				var two=document.getElementById("b").value 
				if(isNaN(one)){
					alert("请输入第一个数字")
					result
				}
				if(isNaN(two)){
					alert("请输入第二个数字")
					result
				}
				var result=0
				if(i=="+"){
					result=parseFloat(one)+parseFloat(two)
				}if(i=="-"){
					result=parseFloat(one)-parseFloat(two)
				}if(i=="*"){
					result=parseFloat(one)*parseFloat(two)
				}if(i=="/"){
					result=parseFloat(one)/parseFloat(two)
				}
				document.getElementById("c").value=result
			}
	</body>
</html>

四，编写注册页面，使用正则表达式完成相关验证，可以使用alert弹出

如图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欢迎注册**网站</h2>
		<h4>姓名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="q" placeholder="2-4个中文"></h4>
		<h4>密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="w" placeholder="至少6位，只能字母数字下划线"></h4>
		<h4>邮箱:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="e" placeholder="单域名邮箱"></h4>
		<h4>年龄:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="r" placeholder="整数"></h4>&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" id="t" value="验证信息">
		<script type="text/javascript">
  			document.getElementById("t").onclick=function(){
  				var q=/^[\u4e00-\u9fa5]{2,4}$/
  				var q1=document.getElementById("q").value
  				var q2=q.test(q1)
  				if(q2==false){
  					alert("名字格式不正确")
  					return
  				}
  				var w=/^[0-9a-zA-Z_]{6,}$/
  				var w1=document.getElementById("w").value
  				var w2=w.test(w1)
  				if(w2==false){
  					alert("密码格式不正确")
  					return
  				}
  				var e=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
  				var e1=document.getElementById("e").value
  				var e2=e.test(e1)
  				if(e2==false){
  					alert("邮箱格式不正确")
  					return
  				}
  				var r=/^[0-9]*$/
  				var r1=document.getElementById("r").value
  				var r2=r.test(r1)
  				if(r2==false){
  					alert("年龄格式不正确")
  					return
  				}
  				if(q2&&w2&&e2&&r2){
  					alert("验证成功")
  				}
  			}
  		</script>
	</body>
</html>