编程 Javascript

原生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>

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

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

- Author -

roucheng

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

动态加载js的几种方法

Oct 23 Javascript

jQuery + Flex 通过拖拽方式动态改变图片的代码

Aug 03 Javascript

用循环或if语句从json中取数据示例

Aug 18 Javascript

javascript表格的渲染组件

Jul 03 Javascript

AngularJS基础 ng-readonly 指令简单示例

Aug 02 Javascript

jQuery中值得注意的trigger方法浅析

Dec 12 Javascript

js实现带三角符的手风琴效果

Mar 01 Javascript

javascript闭包功能与用法实例分析

Apr 06 Javascript

详解AngularJS ui-sref的简单使用

Apr 24 Javascript

一个简易的js图片轮播效果

Jul 22 Javascript

慕课网题目之js实现抽奖系统功能

Sep 19 Javascript

微信小程序后台持续定位功能使用详解

Aug 23 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 form 表单传参明细研究

2009/07/17 PHP

php几个预定义变量$_SERVER用法小结

2014/11/07 PHP

Laravel登录失败次数限制的实现方法

2020/08/26 PHP

javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来

2013/01/23 Javascript

jquery在Chrome下获取图片的长宽问题解决

2013/03/20 Javascript

JS实现简单的键盘打字的效果

2015/04/24 Javascript

针对JavaScript中this指向的简单理解

2016/08/26 Javascript

JavaScript 闭包详细介绍

2016/09/28 Javascript

前端js实现文件的断点续传后端PHP文件接收

2016/10/14 Javascript

在js中实现邮箱格式的验证方法(推荐)

2016/10/24 Javascript

微信页面倒计时代码（解决safari不兼容date的问题）

2016/12/13 Javascript

vue mounted 调用两次的完美解决办法

2018/10/29 Javascript

小程序获取周围IBeacon设备的方法

2018/10/31 Javascript

JS基于Location实现访问Url、重定向及刷新页面的方法分析

2018/12/03 Javascript

微信小程序与webview交互实现支付功能

2019/06/07 Javascript

超详细的5个Shell脚本实例分享(值得收藏)

2019/08/15 Javascript

微信公众号生成新浪短网址的实现(快速生成)

2019/08/18 Javascript

vue中使用极验验证码的方法（附demo）

2019/12/04 Javascript

js实现上传图片并显示图片名称

2019/12/18 Javascript

react PropTypes校验传递的值操作示例

2020/04/28 Javascript

浅谈webpack构建工具配置和常用插件总结

2020/05/11 Javascript

jQuery实现鼠标滑动切换图片

2020/05/27 jQuery

原生JS实现弹幕效果的简单操作指南

2020/11/10 Javascript

[43:18]NB vs Infamous 2019国际邀请赛淘汰赛败者组 BO3 第一场 8.22

2019/09/05 DOTA

Python的一些用法分享

2012/10/07 Python

Python访问纯真IP数据库脚本分享

2015/06/29 Python

PyInstaller将Python文件打包为exe后如何反编译（破解源码）以及防止反编译

2020/04/15 Python

JD Sports德国官网：英国领先的运动鞋和运动服饰零售商

2018/02/26 全球购物

Linux开机引导的步骤是什么

2014/02/26 面试题

汽车技术服务英文求职信范文

2014/01/02 职场文书

军训鉴定表自我鉴定

2014/02/13 职场文书

优秀共产党员演讲稿

2014/09/04 职场文书

副总经理岗位职责范本

2014/09/30 职场文书

2014年节能减排工作总结

2014/12/06 职场文书

三八妇女节寄语

2015/02/27 职场文书

2016自主招生教师推荐信范文

2015/03/23 职场文书