原生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 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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和XSS跨站攻击的防范
2007/04/17 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
PHP Socket 编程
2010/04/09 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
教师三严三实心得体会
2014/10/11 职场文书
网络营销计划
2015/01/17 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL