原生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 模拟用户单击事件
Dec 31 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 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获取域名的google收录示例
2014/03/24 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue 组件内获取actions的response方式
2019/11/08 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
求职自荐信格式
2013/12/04 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
学校周年庆活动方案
2014/08/22 职场文书
故意伤害辩护词
2015/05/21 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
初三毕业感言
2015/07/31 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
Redis性能监控的实现
2021/07/09 Redis
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库