效果：
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. Java Socket

    什么是Socket Socket的概念很简单,它是网络上运行的两个程序间双向通讯的一端,既可以接收请求,也可以发送请求,利用它可以较为方便地编写网络上数据的传递. 所以简而言之,Socket就是进程通 ...

  2. 理解C# 4 dynamic(3) – DynamicObject的使用

    上篇文章"理解C# 4 dynamic(2) – ExpandoObject的使用" 了解了ExpandoObject的基本使用. 但ExpandoObject的问题就是它是一个万 ...

  3. 编译Android AOSP代码

    下载完了源代码,终于到了编译的阶段了.这个阶段远比你想象的简单,一个make命令就可以完成源代码的编译了.参照下面的教程你就可以编译出适用于Android源代码树上的所有分支,包括master.基本的 ...

  4. Excel单元格发生变化后，使用Outlook给特定的人发邮件

    自己在公司里面维护了一个小金库的Excel,当某个人的余额小于0的时候,Outlook会自动给这个人发一封邮件,同时将这个Excel附在邮件中,具体的代码如下: Public Function sen ...

  5. entityframework使用CodeFirst创建MySql数据库出错的解决方法恢复

    先告诉大家一个秘密,EF在使用 update-database 时候,使用的连接字符串来自于解决方案中的“启动项目”,而不是你在包管理器中选择的“默认项目” 0x01. 先说错误,方便大家检索到 开发 ...

  6. Java static 的一两点使用

    这篇文章是关于Java static关键字的使用,主要会介绍以下的内容: static 的概念 static的各种应用 总结 static 是什么 static 顾名思义是静态的意思.与this相对, ...

  7. 朴素贝叶斯（NB）复习总结

    摘要: 1.算法概述 2.算法推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 6.适用场合 内容: 1.算法概述 贝叶斯分类算法是统计学的一种分类方法,其分类原理就是利用贝叶斯公式根据某 ...

  8. Java程序员的日常—— FileUtils工具类的使用

    package cn.xingoo.learn.commons; import org.apache.commons.io.FileUtils; import org.apache.commons.i ...

  9. 动态给div中新增html

    小颖最近接触的项目中用到了    innerHTML 所以小颖今天就自己做了个demo,当当当当代码请看下方: 页面效果:

  10. Backup Volume 操作 - 每天5分钟玩转 OpenStack（59）

    本节我们讨论 volume 的 Backup 操作. Backup 是将 volume 备份到别的地方(备份设备),将来可以通过 restore 操作恢复. Backup VS Snapshot 初看 ...