原生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 编程笔记 无名函数
Jun 28 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 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正确配置mysql(apache环境)
2011/08/28 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js星星评分效果
2014/07/24 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
实例代码讲解Python 线程池
2020/08/24 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
经典演讲稿开场白
2014/08/25 职场文书
党员对照检查材料
2014/09/22 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
Python获取百度热搜的完整代码
2021/04/07 Python
python 模块重载的五种方法
2021/04/24 Python
php png失真的原因及解决办法
2021/10/24 PHP
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android