JS初学三记

目录

js测试素数

js简易订单勾选计算结果

效果:

代码:

前端 js实现验证码

效果:

代码:


js测试素数

function show(number){
			var x = parseInt(number.value), y, j = 1;
			if(x < 1)
			{
				j = 0;	
			}
			else
			{
				y = Math.sqrt(parseFloat(x));
				for(var i = 2; i < y; i++){
					if(x % i == 0){
						j = 0;
						break;
					}
				}
			}
			if(j == 0){
				alert(x + "不是素数");
			}else{
				alert(x + "是素数");
			}
		}
	
		<form>
			请输入一个数<input type="text" name="number"><input type="button" value="测试是否是素数"  onClick="show(number)">
		</form>

js简易订单勾选计算结果

效果:

 (计算结果乘以0.8)

代码:

//订单的JavaScript,功能提示和计算金额
function postOrder(){
	var a=1;
	if(a==0)
	{
	   alert("先扫码");//扫码判断,现前端设计默认为已扫码
	}else if(a==1){
	   alert("正在处理中,前面排队");
	}else{	
	}	
}
//计算金额后乘以0.8
function sum(){
	var record=0;
	var show;
	var getNums;	
	if(document.getElementById("firstChoice").checked)
	{
		getNums=document.getElementById("firstChoice").value;
		record+=parseFloat(getNums);
	}
	if(document.getElementById("secondChoice").checked){
		getNums=document.getElementById("secondChoice").value;
		record+=parseFloat(getNums);
	}
	if(document.getElementById("thirdChoice").checked){
		getNums=document.getElementById("thirdChoice").value;
		record+=parseFloat(getNums);
	}
	if(document.getElementById("fourthChoice").checked){
		getNums=document.getElementById("fourthChoice").value;
		record+=parseFloat(getNums);
	}
	if(document.getElementById("fifthChoice").checked){
		getNums=document.getElementById("fifthChoice").value;
		record+=parseFloat(getNums);
	}
	if(document.getElementById("sixthChoice").checked){
		getNums=document.getElementById("sixthChoice").value;
		record+=parseFloat(getNums);
	}
	if(document.getElementById("seventhChoice").checked){
		getNums=document.getElementById("seventhChoice").value;
		record+=parseFloat(getNums);
	}
	if(document.getElementById("eighthChoice").checked){
		getNums=document.getElementById("eighthChoice").value;
		record+=parseFloat(getNums);
	}
	if(document.getElementById("ninthChoice").checked){
		getNums=document.getElementById("ninthChoice").value;
		record+=parseFloat(getNums);
	}
	if(document.getElementById("firstChoice").checked){
		record+=record;
	}
	document.getElementById("price").value=record*0.8;
}
			<form method="post" onSubmit="postOrder()" action="">
				<table align="center" border="5 none none" width="80%">
					<tr>
						<td colspan="2"><h3>Account:<input type="text" value="Tel or E-mail" id="account"></h3></td>
					</tr>
					<tr>
						<td>选择</td>
						<td>
							<ul>
								<li><img src="img/1.png" width="50" alt="加载中">15<input type="checkbox" id="firstChoice" onClick="sum()" value="15">
								<img src="img/2.png" width="50" alt="加载中">30<input type="checkbox" id="secondChoice" onClick="sum()" value="30">
								<img src="img/3.png" width="50" alt="加载中">50<input type="checkbox" id="thirdChoice" onClick="sum()" value="50"></li>
								<li><img src="img/4.png" width="50" alt="加载中">15<input type="checkbox" id="fourthChoice" onClick="sum()" value="15">
								<img src="img/5.png" width="50" alt="加载中">390<input type="checkbox" id="fifthChoice" onClick="sum()" value="390">
								<img src="img/6.png" width="50" alt="加载中">40<input type="checkbox" id="sixthChoice" onClick="sum()" value="40"></li>
								<li><img src="img/7.png" width="50" alt="加载中">390<input type="checkbox" id="seventhChoice" onblur="chosen()" onClick="sum()" value="390">
								<img src="img/8.png" width="50" alt="加载中">15<input type="checkbox" id="eighthChoice" onClick="sum()" value="15">
								<img src="img/9.png" width="50" alt="加载中">390<input type="checkbox" id="ninthChoice" onClick="sum()" value="390"></li>
							</ul>
						</td>
					</tr>
					<tr>
						<td>计算</td>
						<td><br>价格(八折)<input type="number" id="price" value="0" disabled><</td>
					</tr>
					<tr><td colspan="2"><input type="submit" value="确认"></td></tr>
				</table>
			</form>

前端 js实现验证码

效果:

代码:

// 登录界面的JavaScript,功能验证码
var code; //在全局定义验证码
//产生验证码
function createCode(){
    code = "";
    var codeLength = 4;//验证码的长度
    var checkCode = document.getElementById("code");
    var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');//随机数,0,O,L,I可能相似
    for(var i = 0; i < codeLength; i++) {
        var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)
        code += random[index];//根据索引取得随机数加到code上
    }
    checkCode.value = code;//把code值赋给验证码
}
//校验验证码
document.getElementById("Yzm").addEventListener("change",validate);
//正确转绿
function greenColor(){	
	Yzm.style.background="green";
}
//错误报红
function redColor(){	
	Yzm.style.background="#DA484B";
}
 function validate(){
     var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写
     //若输入的验证码长度为0
	 if(inputCode.length <= 0) { 
         alert("请输入验证码!"); //则弹出请输入验证码		
		 createCode();
		 redColor();
         $("#Yzm").focus();
     }
     else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
         alert("验证码输入错误!"); //则弹出验证码输入错误
         createCode();//刷新验证码
		 redColor();
         $("#Yzm").val("");//清空文本框
         $("#Yzm").focus();//重新聚焦验证码框
     }
     else { //输入正确时		
		 var x = document.getElementById("cid");		
		 if(x.value==""||x.value==null){			
			 x.value="游客";//未输入passID自动默认为游客		
		 }					
		 alert("欢迎,"+x.value+"!点击确定进入主站");
		 greenColor();	//输入正确文本框变绿
		 window.setTimeout("window.location='main.html'",800);//延时0.8s执行跳转
         $("#Yzm").blur();	
     }
 }

</head>

<body>
	<div>
		<!-- 背景图标 -->
		<div class="bgp">
			<table align="center">
				<tr><td><img src="../img/view/背景.png" width="350" style="height: 100%;opacity: 0.3" alt="背景"></td></tr>
			</table>
		</div>	
		<!-- 大标题 -->
		<div class="mainTitle">
			<h1>Welcome to Here</h1>
			<table align="center">
					<tr>
						<td><img src="../img/view/修饰左.png" width="150" alt="加载中"></td>
						<td></td>
						<td><img src="../img/view/修饰右.png" width="150" alt="加载中"></td>
					</tr>
			</table>
		</div>
		<!-- 内容设计 -->
		<div class="form" align="center">
			<form action="" method="post">
				<table align="center" valign="middle">
					<tr>
						<td style="font-family: Calligraffitti-Regular">passID:</td>
						<td><input type="text" value="游客" id="cid" class="create" onSubmit="poster()"></td>
					</tr>
					<tr>
						<td>验证码:</td>
						<td>
							<input  type="text" required="required" id="Yzm" class="create" onChange="greenColor()">
						</td>
						<td>
							<a onClick="createCode()">
								<input type = "button" id="code" value="生成刷新" οnclick="createCode()" class="create2">
							</a>
						</td>
					</tr>
				</table>
				<input type="button" value="CLICK" onClick="validate()" class="submit">
			</form>
			<!-- 返回相对之前的页面 -->
			<a href="javascript:history.go(-1);"><button class="submit">返回</button></a>
		</div>
	</div>
</body>
</html>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值