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)
}