效果：
http://hovertree.com/texiao/js/24/

效果图：

代码如下：

<!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>Javascript实现在线调查投票</h1>

<a href="http://hovertree.com/h/bjaf/jsdiaocha.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>

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

转自：http://hovertree.com/h/bjaf/jsdiaocha.htm

特效：http://www.cnblogs.com/roucheng/p/texiao.html

原生JS投票特效的更多相关文章

  1. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  2. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  3. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  4. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  5. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  6. 原生js实现架子鼓特效

    这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个 ...

  7. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  8. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...

  9. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

随机推荐

  1. Kosaraju 算法查找强连通分支

    有向图 G = (V, E) 的一个强连通分支(SCC:Strongly Connected Components)是一个最大的顶点集合 C,C 是 V 的子集,对于 C 中的每一对顶点 u 和 v, ...

  2. 作业六：团队项目——编写项目的Spec

    主要内容: 各组结合所选项目,编写项目的规格说明书(Spec),Spec应至少包含以下内容:(20分) 1. Spec的目标 2. 项目的典型用户和场景 3. 项目的用例模型 4. 项目中涉及到的术语 ...

  3. 简单一招实现json数据可视化

    开发一个内部功能时碰到的需求,要把json数据在页面上展示出来,平时浏览器会安装jsonView这样的扩展来看json数据,但是程序要用到的话该怎么办呢?今天在网上搜索的时候,发现了这个小技巧,分享一 ...

  4. Objective-C 观察者模式--简单介绍和使用

    观察者模式(有时又被称为发布-订阅模式) 在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知. 这通常透过呼叫各观察者所提供的方法来实现.此种模式通常被用来实 ...

  5. Java抽象类的总结

    什么是抽象类: 当你在定义一个父级的类的时候,往往在父级内的方法没有添加任何内容,这时候如果你在子类里面调用父级的时候,万一在子类之中类名或者方法名没有写正确,会出现不执行的情况,但是这种情况默认是不 ...

  6. sql复习第四次

    1.关系操作的特点是集合操作 2.关系模型的完整性规则包括实体完整性规则,参照完整性规则,用户定义的完整性规则 3.rou联接运算是由笛卡儿积和选择操作组合而成的 4.自然联接运算是由笛卡儿积,选择, ...

  7. 【hadoop摸索系列】记录使用libhdfs访问hdfs的关键问题

    hadoop官方的二进制发布版本一直是32位平台编译的,对于java来说跨平台不影响使用,但是为了在c/c++程序中操作hdfs就做不到了,因为libhdfs.so是二进制不兼容的. 我使用的是sta ...

  8. Sql Server系列：数据控制语句

    数据控制语句用来设置.更改用户或角色的权限,包括GRANT.DENY.REVOKE等语句. GRANT用来对用户授予权限,REVOKE可用于删除已授权的权限,DENY用于防止主体通过GRANT获得特定 ...

  9. Sql Server系列：多表连接查询

    连接查询是关系数据中最主要的查询,包括内连接.外连接等.通过连接运算符可以实现多个表查询.内连接查询操作列出与连接条件匹配的数据行,它使用比较运算符比较被连接列的列值.SQL Server中的内连接有 ...

  10. ES6 - Note3：数组、对象与函数的扩展

    一.数组的扩展,ES6在数组扩展了一些API,以实现更多的功能 1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示 var a = { '0':1,'1':1,leng ...