您的位置：首页 > Web前端 > JavaScript

javascript 模拟开源中国IT技能页面

2016-06-02 00:00 302 查看

javascript 模拟开源中国IT技能页面

纸上得来终觉浅，前面总结了很多javascript 的一些要点。但是不是真的领悟了，就比较耐人寻味了，于是模拟了一下开源中国IT技能页面，纯的js加html代码，实现了该有的效果，感觉自己收获很大。

js代码：不过radio部分实现的不是很优雅，可以参照我的div标签cxs去优化实现。

html页面：没有全部使用div进行布局设置是一个比较大的败笔，不过这次主要是侧重js，优化方向也是js结合div的布局使用。

[code=language-javascript]window.onload = setEvents;
var radiostate = 1;

function setEvents(event) {
document.getElementById("radio1").addEventListener("click", dealRadio1, true);
document.getElementById("radio2").addEventListener("click", dealRadio2, true);
document.getElementById("radio3").addEventListener("click", dealRadio3, true);
document.getElementById("cxs").addEventListener("click", dealCheck, true);
}

function dealCheck(event) {
var nums = 0;
for (i = 0; i < document.getElementsByName("cx").length; i++) {
if (document.getElementsByName("cx")[i].checked == true) {
nums++;
}
}
if (nums == 5) {
for (i = 0; i < document.getElementsByName("cx").length; i++) {
if (document.getElementsByName("cx")[i].checked == false) {
document.getElementsByName("cx")[i].setAttribute('disabled','disabled');
}
}
}else{
for (i = 0; i < document.getElementsByName("cx").length; i++) {
if (document.getElementsByName("cx")[i].checked == false) {
document.getElementsByName("cx")[i].removeAttribute('disabled');
}
}

}

}

function stopEvent(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}

function dealRadio1(event) {

if (radiostate != 1) {
document.getElementById('radio1').checked = true;
document.getElementById('radio2').checked = false;
document.getElementById('radio3').checked = false;
radiostate = 1;
}

}

function dealRadio2(event) {
if (radiostate != 2) {
document.getElementById('radio2').checked = true;
document.getElementById('radio1').checked = false;
document.getElementById('radio3').checked = false;
radiostate = 2;
}

}

function dealRadio3(event) {
if (radiostate != 3) {
document.getElementById('radio3').checked = true;
document.getElementById('radio1').checked = false;
document.getElementById('radio2').checked = false;
radiostate = 3;
}

}

[code=language-html]
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/skillForm.js"></script>
</head>

<body>
<form id="skill">
<p>我是一名：
<select name="selection">
<option value="op1" >程序员</option>
<option value="op2" >项目经理</option>
<option value="op3" >技术总监</option>
</select> 工作年限：
<select name="selection">
<option value="op1" >学生</option>
<option value="op2" >应届毕业生</option>
<option value="op3" >一年</option>
</select>
<br />
</p>
<p>目前状态:
<input id="radio1" type="radio" value="opt1" checked="true" /> 在职
<input id="radio2" type="radio" value="opt1" /> 学生
<input id="radio3" type="radio" value="opt1" /> 找工作
<br />
</p>

<p>工作单位：
<input type="text" /><br/>
</p>

<p>熟悉的开发平台：（最多选5个）<br/>
<div id="cxs">
<input name="cx" type="checkbox" value="opt3" /> Java EE
<input name="cx"  type="checkbox" value="opt4" /> Java SE
<input name="cx"  type="checkbox" value="opt3" /> J2ME/K-Java
<input name="cx" type="checkbox" value="opt4" /> HTML/CSS <br/>

<input name="cx" type="checkbox" value="opt3" /> Android
<input name="cx" type="checkbox" value="opt4" /> iOS/Objective-C
<input name="cx" type="checkbox" value="opt3" /> Windows Phone
<input name="cx" type="checkbox" value="opt4" /> Linux/Unix <br/>
</div>
</p>

</form>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航