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

2024-09-27 17:44:40

效果图：

代码如下：

<!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实现投票的实例代码

本文实例讲述了JavaScript实现三种投票方式的实现方法,分享给大家供大家参考.具体如下: 一.js柱状投票图效果图: 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org
js脚本编写简单刷票投票系统

本文实例为大家分享了js刷票投票系统的具体代码,供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta h
9个JavaScript评级/投票插件

所以,越来越多的门户网站也开始加入评级或投票功能,这里是9个优秀的JavaScript实现的评级投票插件和教材,方便你二次开发和使用. jQuery Start Rating Prototype Starbox Prototype Livepipe Control.Rating Mootool Rabid Rating Favourite rating with jQuery and Ajax How to build a star ratings jQuery Plugin Reddit st
简易的投票系统以及js刷票思路和方法

早就听说有什么刷票脚本,微博投票等等相关的投票都有某些人去刷票. 试一下吧,兴许自己也会刷票呢?捣鼓了几个小时,终于有所眉目. (1)投票系统要刷票,就得先有个投票界面. 当然,可以直接去各个投票网站就行,不过这里还是自己弄个投票页面,方便自己. 页面大致如下或者查看演示照理,界面很简洁,但也基本有了投票的基本功能. 原始规则是:只能投一次票,然后提示成功,然后按钮不可用. 都是原生JS,DOM操作不灵活的可以借此练练手.当然,用jq将会很便捷. html/css部分 <!DOCTYPE
JSP实现的简单Web投票程序代码

本文实例讲述了JSP实现的简单Web投票程序.分享给大家供大家参考.具体如下: 这里使用文本文件作为数据存储的投票系统. 1. vote.java: package vote; import java.io.*; import java.util.*; public class vote { public String filePath = ""; public int n; private File voteFile; private BufferedReader fileRead;
JSP生成jpeg图片用于投票

一.前言本文原作者为Tony Wang ,该文章涉及到文件的读写和jpg图片的自动生成.利用jsp+servlet的技术,jsp调用servlet生成图片. 二.首文件index.jsp如下: <%-- Author: Tony Wang E-mail: lucky_tony@163.net Date: 2001-01-01 如果对程序有什么疑问,可以和我联系, 另外程序如果有什么bug,麻烦指出!! --%><%@ page contentType="text/html;c
使用js写的一个简易的投票

大家直接自己看吧,请多多指教,这个是几个月前写的,现在全部整理一下. 复制代码代码如下: <!doctype html> <html> <head> <meta charset="utf-8" > <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/j
原生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"
原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0
原生JS实现图片跑马灯特效

今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现图片跑马灯特效</title> <style type="
原生js实现轮播图特效

轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理. 3.图片播放的同时,下面小圆圈模块跟随一起变化. 4.点击小圆圈,可以播放相应图片. 5.鼠标不经过轮播图,轮播图也会自动播放图片. 6.鼠标经过,轮播图模块, 自动播放停止. 此文章的代码为一个完整的轮播图的实现代码,复制即可运行实现效果由于大小问题无法上传,可自行观看淘宝或京东首页轮
使用原生JS实现弹出层特效

创建遮罩层复制代码代码如下: _createCover: function() { var newMask = document.createElement("div"); newMask.id = this._mark; newMask.style.position = "absolute"; newMask.style.zIndex = "100"; _scrollWidth =
原生JS实现数码表特效

本文分享一个用原生JS实现的数码时钟特效,效果如下: 上面的数字是用的图片生成的,共10张图片如下: 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现数码表特效</title> <
JS实现网页导航条特效

本文实例给大家分享了一个用原生JS实现的比较实用的网页导航条特效,当页面滚动时,导航条会发生变化,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
原生JS实现实时钟表

分享一个用原生JS实现的实时钟表特效,效果如下(PS:实际指针是按360度走的,截图时只截了一部分) 上面的效果一共需要4张图片,分别是表盘.时针.分针.秒针,根据需要可以自己做图片,实现的代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生JS实现实时钟表</title> <style
原生JS实现的放大镜特效示例【测试可用】

本文实例讲述了原生JS实现的放大镜特效.分享给大家供大家参考,具体如下: 最近在做ecshop的二次开发,遇到一些jquery插件与ecshop的冲突, 调整冲突的需要修改的地方又太多,修改起来得不偿失, 故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突! 下面介绍一下代码及实现过程: 首先,创建fangda.html文件在文件头部的<head></head>中添加文件的css样式,即: <style type="text/css">
原生JS实现特效留言框

本文给大家分享一个用原生JS实现的特效留言框,效果如下: 实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现特效留言框</title> <style> * { margin:

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

相关推荐

随机推荐