Javascript 学习之路5 第五章字符串及应用于表单

最新推荐文章于 2024-07-08 16:22:29 发布

God shen

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量68

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_53655745/article/details/118914352

版权

继续学习...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id = "name">准备随机点名</div>
		<button type="button" id="bt" onclick="doit()">开始点名</button>
		<script type="text/javascript">
		<!--随机点名器-->
			var mylist = ["张三", "李四", "王五", "贺六", "孙九", "赵十", "刘一"];
			var count = 1;
			function doit(){
				var bt = window.document.getElementById("bt");
				if(count){
					bt.innerHTML = "停止点名";
					show();
					count = 0;
				}else{
					bt.innerHTML = "开始点名";
					clearTimeout(t1);
					count = 1;
				}
				
			}
			
			function show(){
				var index = Math.floor(Math.random()*mylist.length);
				window.document.getElementById("name").innerHTML = mylist[index];
				t1 = setTimeout("show()", 100);
			}
			var mystring = 'this is sample too easy'
			document.write('<br/>' + mystring.indexOf("is") + '<br/>'); //查找is的位置，但是返回第一个的位置  2
			document.write(mystring.lastIndexOf("is") + '<br/>');//查找is的位置，返回最后一次出现的位置   5
			document.write(mystring.substr(8, 6) + '<br/>') //截取第8个位置开始的6个字符，后一个数量可以不写代表截取后面所有字符   sample
			document.write(mystring.substring(8,14) + '<br/>')// 和python中的切片一样，位置前面切一刀   sample
			a = mystring.split('i');
			document.write(a + '<br/>');//字符串根据split中的值分隔成数组 th,s ,s sample too easy
			mystring = mystring.replace("is", "a");
			document.write(mystring);//不晓得为啥就代替了第一个，我写出来是这样，和python里的不一样 tha is sample too easy
			
		<!--标题滚动效果-->
		 var msg = "欢迎来到网页特效，快乐无限........."
		 function scrolltitle(){
			 document.title = msg;
			 msg = msg.substring(1) + msg.substring(0,1);
			 setTimeout("scrolltitle()", 500);
		 }
		 scrolltitle()
		</script>
		<!--target：在新的页面打开， action：提交到哪个页面， method:表单的提交方式 -->：
		<form id = "frm1" name="form1" method="get" action="#" target="_blank">
			账号:<input type="text" name="fname"/><br/><br/>
			密码:<input type="text" name="pass"/><br><br>
			<input type="button" onclick="formSubmit()" value="提交表单">
			<input type="button" onclick="formReset()" value="重置表单">
		</form>
		<script type="text/javascript">
			var f = document.getElementById("frm1");//通过id属性找到要提交或者重置的表单
			function formSubmit(){
				f.submit();
			}
			function formReset(){
				f.reset();
			}
		</script>
		<!--简单的加法计算表单-->
		<form name = "calc">
			<input type="text" name="first" value="111">+
			<input type="text" name="second"value="222">=
			<span id="s1"></span>
		</form>
		<button type="button" onclick="calculate()">计算</button>
		<script>
			function calculate(){
				var x1 = document.calc.first.value; //推荐用name的属性值去逐个读取
				var y1 = document.calc.second.value;
				var sum = parseFloat(x1)  + parseFloat(y1);
				document.getElementById("s1").innerHTML = sum;
			}
		</script>
		<!--input空间的聚焦和自动选中,鼠标移动自动选中文本框中的内容-->
		<form action="#" method="post" id="input_focus">
			<input type="text" value="尊姓大名" class="t">
			<input type="text" value="联系方式" class="t">
		</form>
		<script type="text/javascript">
			window.onload = function(){
				//var in_name = document.getElementById("input_focus");
				var _input = document.getElementById("input_focus").getElementsByTagName("input");
				console.log(_input);
				for(i=0; i<_input.length; i++){
					_input[i].onmouseover = function(){
						this.focus();
					};
					_input[i].onfocus = function(){
						this.select();
					};
				}
			}
			
		</script>
		<!--下拉列表框-->
		<select name="fruit" id="myselect">
			<option value="水果1">苹果</option>
			<option value="水果2">栗子</option>
			<option value="水果3">香蕉</option>
			<option value="水果4">橙子</option>
		</select>
		<button type="button" onclick="disable()">禁用列表</button>
		<button type="button" onclick="enable()">启用列表</button>
		<button onclick="selectMutiple()">选择多个</button>
		<button type="button" onclick="getoption()">输出选中选项</button><br>
		<button type="button" onclick="change()">设置所选的选项</button>
		<button onclick="_remove()">移除所选选项</button>
		<form action="" id="frm2">
			<input type="text" name="f" value="西瓜">
		</form>
			
		<script>
		
			var x = document.getElementById("myselect");
			function disable(){
				x.disabled = true; //禁用列表
			}
			function enable(){
				x.disabled = false; //启用列表
			}
			function selectMutiple(){
				x.multiple = true; //是否多选
			}
			function getoption(){
				for(var i=0; i<x.length; i++){
					if(x.options[i].selected){ //遍历一下是不是所选择的，如果是则弹出
						alert(x.options[i].text)
					}
				}
			}
			function change(){
				var change1 = frm2.f.value;
				//将表单里输入的内容放进去
				x.options[x.selectedIndex].text = change1; 
			}
			function _remove(){
				x.remove(x.selectedIndex);
			}
		</script>
	</body>
</html>