一些可以操作的页面
2016-04-20
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
fieldset{
margin: 10px;
width: 600px;
padding: 5px;
}
table{
float: left;
margin: 10px;
}
style>
head>
<body>
<fieldset id="">
<legend>计算器legend>
<input type="text" id="no1" />
<select id="op">
<option value="0">+option>
<option value="1">-option>
<option value="2">×option>
<option value="3">÷option>
select>
<br />
<input type="text" id="no2" /><input type="button" value="=" onclick="ol();" />
<span id="span1">span>
fieldset>
<fieldset id="">
<legend>可以编辑的表格legend>
<table id="tb" border="1" cellspacing="0" cellpadding="2" width="80%">
<thead>
<tr><th>第一列标题th><th>第二列标题th>tr>
thead>
<tbody>
<tr>
<td><div contenteditable="true">AAAdiv>td><td><div contenteditable="true">BBBdiv>td>
tr>
tbody>
table>
<input type="button" value="+" onclick="addRow();" />
fieldset>
<fieldset id="">
<legend>textarea自动增高legend>
<textarea style="float: left;width: 200px;" onpropertychange="this.style.height=this.scrollHeight+'px'" oninput="this.style.height=this.clientHeight+'px'">textarea>
<img src="../img/height.gif" width="300px" height="300px" />
fieldset>
<fieldset id="">
<legend>判断选择了多少个复选框legend>
<form method="post" name="playlist">
1<input type="checkbox" name="ckbox" />
2<input type="checkbox" name="ckbox" />
3<input type="checkbox" name="ckbox" />
4<input type="checkbox" name="ckbox" />
5<input type="checkbox" name="ckbox" />
<input type="button" onclick="numCheck(this.form);" value="检测" /><span id="sp1">span>
form>
fieldset>
<script type="text/javascript">
function ol(){
var sum=0;
var op=document.getElementById("op").value;
var no1=parseInt(document.getElementById("no1").value);
var no2=parseInt(document.getElementById("no2").value);
if(op==0){
sum=no1+no2;
}
if(op==1){
sum=no1-no2;
}
if(op==2){
sum=no1*no2;
}
if(op==3){
sum=no1/no2;
}
document.getElementById("span1").innerText=sum;
}
function addRow(){
var tb=document.getElementById("tb");
var tBodies=tb.tBodies;
var tbody=tBodies[0];
var addtr=tbody.insertRow(tbody.rows.length);
var addtd_1=addtr.insertCell(0);
addtd_1.innerHTML="第一列";
var addtd_2=addtr.insertCell(1);
addtd_2.innerHTML="第二列";
}
function numCheck(form){
var nums=0;
var items=form.ckbox;
for (var i=0;i<items.length;i++) {
if( eval("document.playlist.ckbox[" + i + "].checked") == true ){
nums++;
}
}
// console.info("选择中了"+nums+"个");
document.getElementById("sp1").innerHTML="选择中了"+nums+"个";
}
script>
body>
html>