JS實現投票

有朋友反映代碼不能用,是因爲編輯器裏面上傳代碼會把腳本自動添加註釋,單獨貼一下樣式和腳本把!

那會看到CSDN上有投票的功能,感覺很好,以前是用jfreechart實現的,現在用js實現,很節省資源啊,呵呵.....寫的有點不好,希望大家指教,哈哈..........


單獨添加樣式和script腳本

樣式:

  <style>
	.voteresult{
		margin: 2px;
		margin-top: 5px;
		display: block;
		float: left;
		width: 250px;
		height: 10px;
		background-color: #EEE;
		overflow: hidden;
	}
	.style3{
		background-color: #666666;
	}
  
</style>

script腳本:

<script type="text/javascript">
	var total_vote = 0;
	var lq_vote = 0;
	var zq_vote = 0;
	var ppq_vote = 0;

	function vote(){
		var selectItem = 0;
		var items = document.getElementsByName("item");
		for(i = 0; i < items.length; i++){
			if(items[i].checked){
				selectItem++;
				total_vote++;
				switch(parseInt(items[i].value)){
					case 1: lq_vote++;break;
					case 2: zq_vote++;break;
					case 3: ppq_vote++;break;
				}
			}
		}

		if(selectItem <= 0){
			alert("請先選擇您喜歡的運動");
			return;
		}
		
		var lq_num = new Number(lq_vote/total_vote);
		var zq_num = new Number(zq_vote/total_vote);
		var ppq_num = new Number(ppq_vote/total_vote);


		alert("投票成功");

		setSpanWidth(lq_num, 1);
		setSpanWidth(zq_num, 2);
		setSpanWidth(ppq_num, 3);
		
		for(i = 0; i < items.length; i++){
			items[i].checked = false;
		}

	}
	
	//設置投票結果顯示
	function setSpanWidth(vote_num, type){
		var _width = new Number(250*vote_num);
		var _span = document.getElementById("span" + type);
		var _span1 = document.getElementById("span1" + type);
		//alert(_span.style.width);
		_span.style.width = _width.toFixed(0);
		var _percent = new Number(100*vote_num);
		_span1.innerHTML = _percent.toFixed(1) + "%";
	}
  
</script>



下面是運行的結果,呵呵:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章