原生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 相关文章推荐
JavaScript 学习点滴记录
Apr 24 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
JSON.stringify()方法讲解
Jan 31 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
详解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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
服务员岗位职责
2014/01/29 职场文书
社会实践的活动方案
2014/08/22 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
导游欢送词
2015/01/31 职场文书
护士先进个人总结
2015/02/13 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
python多线程方法详解
2022/01/18 Python
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python