Web网页开发之问卷调查

1.运行结果:

在这里插入图片描述
在这里插入图片描述

2.代码分析

①开始部分

	<head>
		<meta charset="utf-8">
		<!--author-->
		<meta name="generator" content="#66AFE9"/>
		<meta name="author" content="QinHsiu" />
		<meta name="keywords" content="Code Survey"/>
		<meta name="description" content="Code Survey"/>
		<!--title-->
		<title>Code Survey</title>
		<!--link-->
		<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 

		<style>
			.li{
				list-style: none;
			}
			form>ul>li{
				color: #66AFE9;
				align-content: center;
				align-items: center;
			}
			form>ul>li>input::selection{
				background-color: #66AFE9;
				color: #122B40;
			}
		</style>
	</head>

②中间问卷主体

<ul style="align-content: center;">
					<li class="li"><h4 style="color: #66AFE9;">1.请选择你的年级:</h4></li>
					<li style="list-style: none;">
						<input type="radio" name="grade" value="one"/>大一
					</li>
					<li class="li">
						<input type="radio" name="grade" value="two"/>大二
					</li>
					<li class="li">
						<input type="radio" name="grade" value="three"/>大三
					</li>
					<li class="li">
						<input type="radio" name="grade" value="four"/>大四
					</li>		
				</ul>

③js代码
a)最后一个按钮选中就显示文本框

		function visibilityS(){
			//var s=toString();	
			i=document.getElementById("language");
			//c=document.getElementById("interest")
			//alert(i.checked)
			//var m=document.getElementById("text1")
			var t=document.getElementById("text2");
			if (i.checked==true){
				t.style.visibility="visible";
				}
				else{
				t.style.visibility="hidden"
				}
			}

b)保存文件操作

			function save(){
				var time="Time:"+document.time.time.value;
				var word="Content:"+document.submit.word.value;
				var grade="Grade:"+document.content.grade.value;
				//var interest="Interest:"+document.content.interest.value;
				var profession="Profession:"+document.content.profession.value;
				var languagee="Language:"+document.content.language.value;
				var environment="Environment:"+document.content.environment.value;
				var reason="Reason:"+document.content.reason.value;
				var film="Film:"+document.content.film.value;
				var work="Work:"+document.content.work.value;
				var salary="Salary:"+document.content.salary.value;
				var product="Product:"+document.content.product.value;
				var s='';
				var obj=document.getElementsByName("interest");
				for(var i=0;i<obj.length;i++){
					if(obj[i].checked){
						s+=obj[i].value+',';
					}	
				}
				var interest="Interest:"+s;
				var blob=new Blob([grade+"\n"+interest+"\n"+profession+"\n"+languagee+"\n"+environment+"\n"+reason+"\n"+film+"\n"+work+"\n"+salary+"\n"+product+"\n"+word+"\n"+time+"\n"],{type:"text/plain;charset=utf-8"});
				//var file=new File(["hello"],"1.txt",{type:"text/plain;charset=UTF-8"});
				saveAs(blob,"information.txt");
				//saveAs(file)
			}
发布了78 篇原创文章 · 获赞 83 · 访问量 5382

猜你喜欢

转载自blog.csdn.net/qxyloveyy/article/details/104951259
今日推荐