原生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 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
javascript执行环境及作用域详解
May 05 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 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技术实现加载字体并保存成图片
2015/07/27 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
python中requests模块的使用方法
2015/04/08 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Python简单实现区域生长方式
2020/01/16 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
外贸业务员求职自荐信分享
2013/09/21 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
理财投资建议书
2014/03/12 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
场地使用证明模板
2014/10/25 职场文书
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技