Web网页开发之问卷调查
程序员文章站
2022-03-08 22:37:52
...
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)
}
推荐阅读
-
Python web开发(一):认识网页
-
【原】《DIV+CSS商业案例与网页布局开发精讲》读书笔记(2)_html/css_WEB-ITnose
-
微信开发之网页授权获取用户信息(二)
-
PHP和MySQL Web开发(第4版)之第1章1.2.1源代码
-
微信开发之网页授权获取用户信息(二)_PHP
-
web前端开发控件学习笔记之jqgrid+ztree+echarts
-
深入CSS,让网页开发少点“坑”_html/css_WEB-ITnose
-
web前端开发 - 网页端使用PHP生成随机的用户头像?
-
Java web基础学习之开发环境篇(详解)
-
Android开发之浏览器用法实例详解(调用uc,opera,qq浏览器访问网页)