这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了原生 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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/328932.html