JS例子：随机点名，标题栏滚动显示效果，用js实现表单常用属性，前面下拉框后面文本框

本文链接：https://blog.youkuaiyun.com/weixin_52166438/article/details/119865956

这篇博客介绍了JavaScript中的随机数生成、字符串操作、定时器以及表单处理等基础知识。通过实例展示了如何使用Math.random()生成随机数，利用indexOf()和lastIndexOf()查找字符串，以及如何使用setTimeout()和clearTimeout()进行定时操作。此外，还演示了如何访问和操作表单元素，包括提交和重置表单的功能。最后，展示了如何结合jQuery实现下拉框与文本框的交互，以实现动态更改显示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

random() 返回介于0(包含）到1（不包含）一个随机数:Math.random()*10取得介于0到10（不包含）之间的一个随机数
floor(x)方法 返回小于等于x的最大整数。
setTimeout()方法 用于在指定的毫秒数后调用函数或计算表达式
clearTimeout()方法 可取消由setTimeout()方法设置的timeouto
参数必须是由setTimeout()返回的ID值.

随机点名

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
<style type="text/css">
#bodybj
{
	background-color:#000;
}
#box{
	margin:auto;
	width:50%;
	font-size:66px;
	height:94px;
	line-height:94px;
	text-align:center;
	padding:0 30px;
	margin-top:200px;
	color:#FFF;
}
#bt{
	margin:auto;
	width:200px;
	text-align:center;
	margin-top:75px;
	color:#FFF;
	font-size:25px;
	line-height:45px;
	cursor:pointer;
	height:45px;
	background-color:#F00;
}
</style>
</head>

<body id="bodybj">
<div id="box">亲，准备好点名了吗</div>
<div id="bt" onclick="doit()">开始点名</div>

<script type="text/javascript">
var namelist=["张紫琪","张瑞湾","赵小贞","刘云","凯风","娜美",
"小紫","柯柯","小明","小张","小刘","小赵"];
var mytime=null;
function doit(){
	var bt=window.document.getElementById('bt');
	if(mytime==null){
		bt.innerHTML="停止点名";
		show();
	}
	else{
		bt.innerHTML="开始点名";
		clearTimeout(mytime);
		mytime=null;
	}
}
function show(){
	var box=window.document.getElementById('box');
	var num=Math.floor(Math.random()*100000)%namelist.length;
	box.innerHTML=namelist[num];
	mytime=setTimeout("show()",100);
}
</script>
</body>
</html>

字符串

假设字符串var myString= "this sample too easy ! "
length 返回字符串的长度 myString.length结果为21
indexOf(要查找的字符) 返回字符串中检索指定字符第一次出现 myString.indexOf(“too”)结果为12
lastIndexOf(要查找的字符) 返回字符串中检索指定字符最后一次出 myString.lastIndexOf(“s”)结果为18
substr(开始位置[长度] 截取字符串） myString. substr(5,6)结果为sample
substring(开始位置,结束位置) 截取字符串 myString. substring(5,11)结果为sample（不包含结束处的字串）
split([分隔符]) 分隔字符串到一个数组中 var a= myString.split(）
document.write(a[5])输出为s
replace(需替代的字符串，新字替代字符串 myString.replace( “too” ,” so”)，结果为this sample so easy !

标题栏滚动显示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题栏滚动显示效果</title>   
<style type="text/css">

</style>
</head>

<body id="bodybj">

<script type="text/javascript">
var msg="欢迎来到网页特效，各种乐趣无限...";
function title(){
	document.title=msg;//把msg赋给标题
	msg=msg.substr(1,msg.length)+msg.substr(0,1);//更新标题
}
setInterval("title()",300);//记得引用函数带上引号
</script>
</body>
</html>

用js实现表单常用属性

action=“ ”;表单要提交到哪个页面
重置与提交表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
<style type="text/css">

</style>
</head>

<body>
<form id="form" name="form1" method="get" action="猜数字.html" target="_blank">
	账号：<input type="text" name="fname" /><br /><br />
    密码：<input type="password" name="fpass" /><br /><br />
    <input type="button" onclick="formsub()" value="提交表单" />
    <input type="button" onclick="formset()" value="重置表单" />
</form>
<script type="text/javascript">
	var f=document.getElementById('form');
	document.write('target属性的值为：',f.target,'<br>');
	document.write('表单名称为：',f.name,'<br>');
	document.write('发送表单数据的方法：',f.method,'<br>');
	document.write('"form"元素的数量为：',f.length,'<br>');
	document.write('action属性的值为：',f.action,'<br>');
	function formsub(){//提交表单
		f.submit();
	}
	function formset(){//重置表单
		f.reset();
	}
</script>
</body>
</html>

表单及控件的访问

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>   
<style type="text/css">

</style>
</head>

<body>
<form name="form1" >
	<input name="fname"  value="222"/>
    + <input name="ftext" value="222" />
 	= <span id="s1"></span>
</form>
<button onclick="jisuan()">计算</button>
<script type="text/javascript">
function jisuan(){
	var t1=form1.fname.value;//访问它的值，用name.name.value访问
	var t2=form1.ftext.value;
	var sum=parseFloat(t1)+parseFloat(t2);
	document.getElementById("s1").innerHTML=sum;
}
</script>
</body>
</html>

带下拉框的文本框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../jquery-1.12.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<title>表单</title>
</head>
<body>

<div class="input-group">  
     <div class="input-group-btn">
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="background-color: white">
             <span id="span1" class="buttonText">大陆 +86</span>
             <span class="caret"></span>
         </button>     
         <!-- 下拉框选择的内容 -->
         <ul class="dropdown-menu pull-left">
         	<li><a href="#" onClick="shows($(this).text())">大陆 +86</a></li>
             <li><a href="#" onClick="shows($(this).text())">香港 +852</a></li>
             <li><a href="#" onClick="shows($(this).text())">澳门 +853</a></li>
             <li><a href="#" onClick="shows($(this).text())">台湾 +886</a></li>
         </ul>
         
     </div>
     <input type="text" id="input1" class="form-control" placeholder="请输入电话号码">
</div>

<script>
function shows(a) {
     $('.buttonText').text(a)
}
</script>

</body>
</html>