原生JS实现在线问卷调查投票特效


Posted in Javascript onJanuary 03, 2017

效果图:

原生JS实现在线问卷调查投票特效

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS+CSS实现投票效果</title>
<link rel="stylesheet" href="http://hovertree.com/texiao/js/24/style.css" type="text/css">
<script src="http://hovertree.com/texiao/js/24/vote.js" type="text/javascript"></script>
</head>
<body>
<div><h1>原生JS实现在线问卷调查投票特效</h1>
</div>
<!--问卷调查内容-->
<div class="vote">
<div class="votechoice">
<ul class="vote1">
1.您觉得现在哪些开发语言有前途:
<li><input type="checkbox" value="C#" /><span class="votechoicename">C#</span></li>
<li><input type="checkbox" value="Java" /><span class="votechoicename">Java</span></li>
<li><input type="checkbox" value="Swift" /><span class="votechoicename">Swift</span></li>
<li><input type="checkbox" value="C++" /><span class="votechoicename">C++</span></li>
<li><input type="checkbox" value="JavaScript" /><span class="votechoicename">JavaScript</span></li>
<li><input type="checkbox" value="其他" /><span class="votechoicename">其他</span></li>
<li><button type="button" class="button blue" onClick="submitvote(this)">投票</button></li>
</ul>
</div>
<div class="votechoice">
<ul class="vote2">
2.您认为哪些网站适合手机或触屏访问:
<li><input type="checkbox" value="博客园" /><span class="votechoicename">博客园</span></li>
<li><input type="checkbox" value="何问起" /><span class="votechoicename">何问起</span></li>
<li><input type="checkbox" value="CSDN" /><span class="votechoicename">CSDN</span></li>
<li><input type="checkbox" value="柯乐义" /><span class="votechoicename">柯乐义</span></li>
<li><input type="checkbox" value="GitHub" /><span class="votechoicename">GitHub</span></li>
<li><input type="checkbox" value="hovertree.net" /><span class="votechoicename">hovertree.net</span></li>
<li><button type="button" class="button blue" onClick="submitvote(this)">投票</button></li>
</ul>
</div> 
</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
angular select 默认值设置方法
Jun 23 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 #Javascript
Node.js学习入门
Jan 03 #Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 #Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 #Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 #Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 #Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 #Javascript
You might like
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php内存缓存实现方法
2015/01/24 PHP
10条php编程小技巧
2015/07/07 PHP
PHP打印输出函数汇总
2016/08/28 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
VueJS全面解析
2016/11/10 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
谈谈python中GUI的选择
2018/03/01 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python数学形态学实例分析
2019/09/06 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
运动会广播稿60字
2014/01/15 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
幼儿园个人总结
2015/02/28 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android