原生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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
javascript实现摄像头拍照预览
Sep 30 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中获取主机名、协议及IP地址的方法
2014/11/18 PHP
php正则表达式学习笔记
2015/11/13 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
python中zip()方法应用实例分析
2016/04/16 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
预备党员入党感想
2015/08/10 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android