js笔记(包括电话抽奖和cookie练习)

学徒在修行

于 2022-10-10 21:25:09 发布

阅读量154

点赞数 3

文章标签： servlet javascript

本文链接：https://blog.csdn.net/m0_53394907/article/details/127252808

版权

电话抽奖

index.html


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>你的手机号码中奖了吗</title>
    <link type="text/css" rel="stylesheet" href="css/mr-style.css">
</head>
<body>
<div class="cont">
    <input type="text" disabled="disabled" id="mr-show"><br>
    <span>按下Enter键开始，任意键结束</span>
</div>
</body>
<script type="text/javascript">
	let rand1;
	var startFlag=false;
	
	var randomCode=function(len,dirc){
		for(var i=0,rs='';i<len;i++){
			rs+=dirc.charAt(Math.floor(Math.random()*1000)%dirc.length);
		}
		return rs;
	};
	
	var randomPhoneNumber=function(){
		return[1,randomCode(1,"3456789"),randomCode(1,"0123456789"),"****",randomCode(4,"0123456789")].join("");
	};

		var phoneNum1=document.getElementById("mr-show");
	
	function start(){
		rand1=self.setInterval(function(){
			phoneNum1.value=randomPhoneNumber();    
	},100);
		console.log(randomPhoneNumber()); 
	}
	function stop(){
		window.clearInterval(rand1);
	}
	window.onkeydown=function(e){
		if(startFlag==false&&e.keyCode==13){
			start();
		
			startFlag=true;
		}
		if(startFlag==true&&e.keyCode!=13){
			stop();
			startFlag=false;
		}
	}

	
	
	
</script>
</html>

css

@charset "utf-8";
/* CSS Document */

.cont {        /*设置页面大小，背景图等样式*/
    width: 640px;
    height: 290px;
    margin: 20px auto;
    background: url(../images/bg1.jpg);
    text-align: center;
}

#mr-show {        /*设置文本框的样式*/
    margin-top: 100px;
    width: 260px;
    height: 62px;
    border-radius: 50px;
    background: #FF0;
    font-size: 36px;
    text-align: center;
}

span {        /*设置提示文字的样式*/
    color: #FFF;
    font-size: 30px;
}

cookie小练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		 function setcookie(cname,value,exdays){
			 var d=new Date();
			 d.setTime(d.getTime()+(exdays*24*60*60*1000));
			 var expires="expiers"+d.toUTCString();
			 document.cookie=cname+"="+value+";"+expires+";path:/";

		 }
		 function getcookie(cname){
			 var name=cname+"=";
			 var decodecookie=decodeURIComponent(document.cookie);
			 var ca=decodecookie.split(";");
			 for(let i=0;i<ca.length;i++){
				 let c=ca[i];
				 while(c.charAt(0)==''){
					 c=c.substring(1);
				 }
				 if(c.indexOf(name)==0){
					return c.substring(name.length,c.length);
				 }
			 }
			 return "";
		 }
		 function checkcookie(){
			 var user=getcookie("username");
			 if(user!=""){
				 alert("欢迎再次光临"+user);
			 }
			 else{
					  user=document.getElementById("name").value;
				 if(user!=""&&user!=null){
					 setcookie("username",user,30);
					 alert("欢迎您"+user);
					 user="";
				 }
			 }
		 }
		</script>
	</head>
	<body>
	用户名：<input type="text" placeholder="请输入密码" id="name1"  />
		<input type="button"   value="提交" onclick="checkcookie()"/>
	
	</body>
</html>

我发一个是证明最近也还算没有摸鱼。