原生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数组处理多个字符串的连接问题
Aug 20 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
prototype.js常用函数详解
Jun 18 Javascript
Javascript中的arguments对象
Jun 20 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 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
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python批量修改文件后缀的方法
2014/01/26 Python
解析Python中的二进制位运算符
2015/05/13 Python
django celery redis使用具体实践
2019/04/08 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
Final类有什么特点
2012/04/25 面试题
实习评语
2013/12/16 职场文书
高中体育教学反思
2014/01/24 职场文书
推普周活动总结
2014/08/28 职场文书
八年级英语教学计划
2015/01/23 职场文书
2015年路政工作总结
2015/05/22 职场文书
2016新年问候语大全
2015/11/11 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python