JS实现的一些小功能

最新推荐文章于 2022-04-24 09:18:11 发布

mengyun00

最新推荐文章于 2022-04-24 09:18:11 发布

阅读量1.6k

点赞数

文章标签： javascript date button function input 存储

本文链接：https://blog.csdn.net/mengyun00/article/details/7281113

版权

1、网页时钟

实现思路：产生一个Date对象

获取年、月、日、时、分、秒

重复获取年、月、日、时、分、秒，使其一秒钟实现一次

显示出来

<script type="text/javascript" language=javascript>
function webTime(){
   //产生一个日期对象
   var date=new Date();
  //显示到指定位置
   document.getElementById("timediv").innerHTML=date.toLocaleString();
  //延迟一秒执行一次
   setTimeout("webTime()",1000);
}
</script>
<body οnlοad="webTime()">
<div id="timediv" bakground-color=blue></div>

2、检测非法字符

思路：定义合法的字符串（源字符串）

获取用户输入的内容

        循环的取出用户输入的每一个字符，去源字符串查找
              查找到了   返回该字符在源字符中出现的位置
              没有找到   返回-1，判断用户输入的内容是否合法

 <script language="javascript" type="text/javascript">
function check(){
  //获取用户输入的内容
   var username=document.getElementById("username").value;
   
   if(jiance(username)){
      alert("亲，您输入的内容检测到有非法字符串哦！再好好想想");
   }else{
      alert("您输入的用户名可以使用");
   }
  
}

//根据用户输入的内容检测是否非法
function jiance(inputstr){
    var flag=false;
   //定义一个源字符串
    var str="abcdefghijklmnopqrstuvwxyz1234567890-_";
   //定义每次取出的字符
	var c1="";
	
	for(var i=0;i<inputstr.length;i++){
	    //循环取出用户输入的单个字符
	    c1=inputstr.toLowerCase().charAt(i);
	    //如果小于0，表示没有在源字符串中找到，说明是非法的
		if(str.indexOf(c1)<0){
		   flag=true;
		   break;
		}
	}
	return  flag;
}
</script>
</head>
<body>
用户名：<input type="text" id="username">
<input type="button" value="检测" onClick="check()">

</body>

3、猜数字小游戏

思路：随机的产生一个数字供玩家猜测

获取用户输入的内容

比较用户输入的内容，判断和产生随机数的大小

判断的同时，加上次数的限制等修饰

<script language="javascript" type="text/javascript">
//定义累加变量，用于统计第几次输入

 var count=1; 
//定义一个标志位
 var flag=true;
 var str;//存储每次输入的结果
//产生一个随机数
 var sjNum = Math.round(Math.random()*1000);

//while循环
  while(flag){
      str="";
    //判断是否超过10次
	   if(count<=10){
    //获取用户的输入内容
	   var inputNum=prompt("请输入您要猜的数字","1");
	      if(inputNum<sjNum){
		    str+="您本次是第"+count+"次竞猜，还有"+(10-count)+"次机会，本次猜的数字是"+inputNum+"您输入的小了<br>";
	count++;
     }else if(inputNum>sjNum){
      str+="您本次是第"+count+"次竞猜，还有"+(10-count)+"次机会，本次猜的数字是"+inputNum+"您输入的大了<br>";
          count++;
     }else if(inputNum==sjNum){
       str+="您本次是第"+count+"次竞猜，恭喜您猜对了";
	//设置标志位
	flag=false;
		  }
     document.write(str);
}
else{
   alert("您已经没有机会了！");
   alert("正确答案是:"+sjNum);
   flag=false;
 }
 }
</script>

4、抽奖

思路：定义一个数组

随机抽取数组中的元素

将随机产生的元素显示出来

<script language="javascript" type="text/javascript">
   var student = new Array("卡卡","皮皮","球球","乐乐","嘿嘿","肚肚");
   var m=Math.round(Math.random()*5);
   document.write("<p align=center><h1>幸运观众</h1></p>");
   document.write("<h1>"+student[m]+"</h1>");
</script>