脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → JS 投票

原生JS实现在线问卷调查投票特效

 更新时间：2017年01月03日 16:11:14   作者：roucheng  
本文主要分享了原生JS实现在线问卷调查投票特效的实例代码。可直接复制保存HTML运行查看效果。具有一定的参考价值，下面跟着小编一起来看下吧

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • jQuery简易时光轴实现方法示例

    jQuery简易时光轴实现方法示例

    这篇文章主要介绍了jQuery简易时光轴实现方法,可实现点击底部链接动态加载内容的功能,涉及jQuery响应鼠标事件动态操作页面元素属性的相关实现技巧,需要的朋友可以参考下
    2017-03-03
  • jquery.multiselect多选下拉框实现代码

    jquery.multiselect多选下拉框实现代码

    这篇文章主要为大家详细介绍了jquery.multiselect 多选下拉框实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • jquery禁止回车触发表单提交

    jquery禁止回车触发表单提交

    这篇文章主要介绍了jquery实现的禁止回车触发表单提交的方法，非常的使用，这里推荐给大家。
    2014-12-12
  • jquery如何把数组变为字符串传到服务端并处理

    jquery如何把数组变为字符串传到服务端并处理

    这篇文章主要介绍了jquery如何把数组变为字符串传到服务端并处理,需要的朋友可以参考下
    2014-04-04
  • jquery-mobile基础属性与用法详解

    jquery-mobile基础属性与用法详解

    这篇文章主要介绍了jquery-mobile基础属性与用法,结合实例形式详细分析了jQuery-mobile常用属性功能与具体使用技巧,需要的朋友可以参考下
    2016-11-11
  • jquery中post方法用法实例

    jquery中post方法用法实例

    这篇文章主要介绍了jquery中post方法用法,以实例的形式分析了post方法的具体用法,并对相关的知识点及注意点进行了较为深入的分析,需要的朋友可以参考下
    2014-10-10
  • jquery判断checkbox是否选中及改变checkbox状态的实现方法

    jquery判断checkbox是否选中及改变checkbox状态的实现方法

    下面小编就为大家带来一篇jquery判断checkbox是否选中及改变checkbox状态的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jquery 简单的进度条实现代码

    jquery 简单的进度条实现代码

    jquery其实是有个进度条插件的，叫做jqueryprogressbar.js，可是想练习一下，就没有用，自己写了点代码。这个代码其实是参考别人的，因为自己的JS基础不是很好。
    2010-03-03
  • jQuery下拉美化搜索表单效果代码分享

    jQuery下拉美化搜索表单效果代码分享

    这篇文章主要介绍了jQuery下拉美化搜索表单样式，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • jQuery过滤特殊字符及JS字符串转为数字

    jQuery过滤特殊字符及JS字符串转为数字

    这篇文章主要介绍了jQuery过滤特殊字符及JS字符串转为数字 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-05-05

最新评论