原生JS投票特效

阿新 • • 發佈：2019-01-18

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

原生JS投票特效

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS+CSS實現投票效果 - 何問起</title> <link rel="s

H5+原生js 雪花特效

概述隨著前端技術的發展，越來越多的H5技術被應用到實際開發中，本次實現的是螢幕實現雪花飄落特效。 2 效果圖如下： 3 主要功能實現雪花飄落。。。。後續功能可以自己酌情新增 4實現方式首先，我們需要一個容器，在這裡只需要一個div就可以

原生js 放大鏡特效

最近在做ecshop的二次開發，遇到一些jquery外掛與ecshop的衝突，調整衝突的需要修改的地方又太多，修改起來得不償失，故做了一個原生的js實現商品詳情頁面的放大鏡效果，以避免衝突！下面介紹一下程式碼及實現過程：首先，建立fangda.html檔案在檔案頭

原生js實現返回頂部特效

程序 mar document timer margin con lse hid 監聽 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

原生js仿網易雲輪播特效

原理：運用兩張圖片切換可視區域向左走或向右走要跳轉的圖片定位在可視區域的左邊或右邊然後用緩動動畫實現切換重點：緩動動畫 js實現步驟：1、獲取所需元素 2、建立指示器 3.讓第一個選中 4.新增事件 5、切換索引 6、自動輪播 1、獲取所需元素 var slider=$(

原生JS實現各種經典網頁特效——Banner圖滾動、選項卡切換、廣告彈窗等

在製作網頁過程中，我們可能會遇到各種常用的經典網頁特效，比如Banner圖片滾動、選項卡迴圈播放、右下角廣告彈窗、評論提交展示、選項動態增刪、剪刀石頭布小遊戲等等等。。。是不是感覺都見到過這些場景、那些這些場景都是如何實現的呢？今天，小瑞老師就一口氣把所有經典網頁特效效果送給大家！！！

原生js可愛糖果數字時間特效

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="vi

JS打字特效 JS 原生程式碼

<html> <head> <title>打字效果的帶連結的新聞標題</title> <meta http-equiv="Content-Type

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

0510日重點：原生js修改豆瓣電影api 在angularjs裏運用出現的bug

http ava move var cti tps 上下 console date 用$http.jsonp調用豆瓣電影api，會出現返回數據格式錯誤的bug。在控制器裏加上下面的代碼，才能正常獲取到數據。 function jsonp(url, ca

原生JS的HTTP請求

font sch 原生 office 請求 ref html sof nbsp ar xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(

基於原生JS+node.js+mysql打造的簡易前後端分離用戶登錄系統

power 3.2 80端口文檔 type ima 原生倉庫 json 一、登錄頁面這個沒什麽說的，就放兩張圖二、服務器端用express（文檔）搭建服務器，數據褲用mysql(基礎語句），新建一個users，再新建一張users表，我們用這張表。服務器主要是

使用原生JS封裝Tap事件，解決移動端300ms延遲

itl dia can 開發閉包 tcl type 移動端 com 為了防止誤操作，移動端iOS操作系統針對原生click事件做了300ms的延遲，這在一定程度上影響了我們的使用體驗。 GitHub項目地址：https://github.com/Simon

原生JS Ajax 請求

else 對象 amp pan stat func ext val hang 　　　　　　　var username = document.getElementById(‘username‘).value; var password = docum

原生js實現outerWidth()方法，用到getComputedStyle

turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at

原生js的二級聯動

長沙湖北合肥 city array 河北 .text 長春佛山 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title&g

玩轉圖片上傳————原生js XMLHttpRequest 結合FormData對象實現的圖片上傳

con tel ech 圖片 xmlhttp scrip state clas document var form=document.getElementById("formId"); var formData=new FormData(form);

原生js實現form表單序列化

defined json cnblogs 一個 break value 元素 default [0 大家都知道在jquery中有相應的表單序列化的方法： 1.serialize()方法　　格式：var data = $("form").serialize(); 　　功能：

表單校驗常用原生js庫

rim pro fun 常用 ltrim turn () js庫 his 1.字符串去除左右空格繼承形式// 除去左右空格String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g,

原生js--事件類型

事件 scroll 鼠標事件輸入文字 mouseup cnblogs bsp enter use 1、表單事件： submit事件 reset事件 click事件 change事件 focus事件（不冒泡）（IE和ES5支持冒泡的focusin） blur事件（

原生JS投票特效

相關推薦