图片选项：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粟子</title>
<style type="text/css">
.box{
width: 500px;
height: 700px;
background-color: #efefef;
border: 1px solid lightgray;
margin: 20px auto;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px #999;
}
.box ul{
margin: 0;
padding: 0;
overflow: hidden;
}
.box ul li{
list-style-type: none;
float: left;
background-color: skyblue;
margin-left: 20px;
}
.box ul li a{
display: block;
width: 100px;
height: 40px;
line-height: 40px;
color: #fff;
text-decoration: none;
}
.box ul li a:hover{
font-size: 1.2em;
background-color: coral;
}
.box .pic{
width: 450px;
height: 400px;
border: 1px solid lightgray;
line-height: 1px;
margin: auto;
margin-top: 50px;
}
.box .pic img{
width: 100%;
height: 80%;
}
</style>
</head>
<body>
<div class="box">
<h2>明星相册</h2>
<ul>
<li>
<a href="./images/star.png" title="one" onclick="change(this); return false;">小一</a>
</li>
<li>
<a href="./images/star.png" title="two" onclick="change(this); return false;">小二</a>
</li>
<li>
<a href="./images/star.png" title="three" onclick="change(this); return false;">小三</a>
</li>
<li>
<a href="./images/star.png" title="four" onclick="change(this); return false;">小四</a>
</li>
</ul>
<div class="pic">
<img src="./images/star.png" alt="" id="img">
</div>
<p id="info"></p>
</div>
<script type="text/javascript">
function change(info){
//获取图片信息
var picUrl = info.href;
var picInfo = info.title;
var picName = info.innerHTML;
// 获取dom 对象
var img = document.getElementById('img');
var p = document.getElementById('info');
//替换内容
img.src= picUrl;
p.innerHTML = "<span style='color: skyblue;'>"+picName +"</span>" + ':' + picInfo;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
计算计算器：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器示例</title>
<style>
.clear{
clear:both;
}
.box{
/*width:250px;*/
/*height:300px;*/
margin:0 auto;
display:inline-block;
background-color:peru;
}
.show{
width:100%;
height:80px;
border:none;
outline:none;
text-align:right;
font-size:30px;
background-color:darkcyan;
}
.first > input,
.second > input,
.third > input,
.fourth > input{
/*width:55px;
height:55px;*/
width:75px;
height:75px;
display:inline-block;
float:left;
background-color:orange;
}
</style>
</head>
<body>
<div class="box">
<form>
<input type="text" name="show" value="" class="show" id="show" />
<div class="numberArea">
<div class="first" id="first">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="BS" />
<input type="button" value="AC" />
</div>
<div class="clear"></div>
<div class="second" id="second">
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="+" />
<input type="button" value="-" />
</div>
<div class="clear"></div>
<div class="third" id="third">
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
<!--<input type="button" value="×" />
<input type="button" value="÷" />-->
<input type="button" value="*" />
<input type="button" value="/"
</div>
<div class="clear"></div>
<div class="fourth" id="fourth">
<input type="button" value="0" />
<input type="button" value="00" />
<input type="button" value="." />
<input type="button" value="=" />
<input type="button" value="%" />
</div>
<div class="clear"></div>
</div>
</form>
</div>
<script>
var input=new Array(),//input输入框中只保持有一个数组还是字符串?
inputValue="",//用来存放输入的值
input_1="",
input_2="",
operation_1="",
operation_2="",
inputDom=document.getElementById('show');
//给按钮绑定事件
var first=document.getElementById('first'),
firsts=first.getElementsByTagName('input');
var second=document.getElementById('second'),
seconds=second.getElementsByTagName('input');
var third=document.getElementById('third'),
thirds=third.getElementsByTagName('input');
var fourth=document.getElementById('fourth'),
fourths=fourth.getElementsByTagName('input');
var numberDom=[first.getElementsByTagName('input')[0],
first.getElementsByTagName('input')[1],
first.getElementsByTagName('input')[2],
second.getElementsByTagName('input')[0],
second.getElementsByTagName('input')[1],
second.getElementsByTagName('input')[2],
third.getElementsByTagName('input')[0],
third.getElementsByTagName('input')[1],
third.getElementsByTagName('input')[2],
fourth.getElementsByTagName('input')[0],
fourth.getElementsByTagName('input')[1],
fourth.getElementsByTagName('input')[2]];
//for(var i=0;i<12;i++){
// numberDom[i].onclick=function(){
// inputDom.value+=this.value;
//// alert(inputDom.value);
// }
//}
//给数字区绑定点击事件
for(var i=0;i<12;i++){
numberDom[i].onclick=num;
}
//给运算符事件
for(var i=3;i<5;i++){
seconds[i].onclick=operation;
thirds[i].onclick=operation;
fourths[i].onclick=operation;
}
//先写状态：分为：1、数字，2、运算符，3、退格，4、清零,5、等号
//状态1：
function num(){
// alert(this.value+"bbbbbbb");
//判断是否有运算符
if(inputDom.value==""&&this.value==0){
return;
}
if(operation_1!=""){
// 没有运算符,再判断inputDom.value是否为零
var lastChar=inputValue.charAt(inputValue.length-1);
if(lastChar=="+"||lastChar=='-'||lastChar=="*"||lastChar=='/'||lastChar=='%'){
inputDom.value=this.value;
input_2=this.value;
inputValue+=this.value;
console.log("有运算符后再次输入的值 inputValue："+inputValue);
}else{
inputDom.value+=this.value;
input_2+=this.value;
inputValue+=this.value;
console.log("input_2的值为：");
console.log("有运算后的inputValue的值为："+inputValue);
}
}else{
//operation_1的值为1,则输入的值应该拿给input_1
inputDom.value+=this.value;
input_1+=this.value;
inputValue+=this.value;
}
}
//状态2：
//当点击运算符时,分为两种:1、运算前面有两组数字，则计算结果，显示结果。
// 2、运算符前面只有一组数字，则不变。
//输入框中的默认值为0
function operation(){
if(operation_1!=""){
var lastChar=inputValue.charAt(inputValue.length-1);
if(lastChar=='+'||lastChar=='-'||lastChar=='*'||lastChar=='/'||lastChar=='%'){
//则替换该运算符
inputValue=inputValue.slice(0,inputValue.length-1);
inputValue+=this.value;
operation_1=this.value;
console.log("inputValue的值是："+inputValue);
}else{
//最后一个字符是数字，则做运算
// inputDom.value=eval(input_1+operation_1+input_2);
//计算结果
var a=Number(input_1);
var b=Number(input_2);
console.log("计算结果：\na为："+a+"\nb为："+b+"\noperation_1为："+operation_1);
if(operation_1=='+'){
inputDom.value=a+b;
// inputDom.value=eval(input_1+"+"+input_2);
input_1=inputDom.value;
operation_1=this.value;
inputValue=inputDom.value+this.value;
console.log("计算结果后inputValue值为:"+inputValue);
}else if(operation_1=='-'){
inputDom.value=a-b;
// inputDom.value=eval(input_1+"-"+input_2);
input_1=inputDom.value;
operation_1=this.value;
inputValue=inputDom.value+this.value;
console.log("计算结果后inputValue值为:"+inputValue);
}else if(operation_1=='*'){
inputDom.value=a*b;
// inputDom.value=eval(input_1+"*"+input_2);
input_1=inputDom.value;
operation_1=this.value;
inputValue=inputDom.value+this.value;
console.log("计算结果后inputValue值为:"+inputValue);
}else if(operation_1=='/'){
inputDom.value=a/b;
// inputDom.value=eval(input_1+"/"+input_2);
input_1=inputDom.value;
operation_1=this.value;
inputValue=inputDom.value+this.value;
console.log("计算结果后inputValue值为:"+inputValue);
}else if(operation_1=='%'){
inputDom.value=a%b;
// inputDom.value=eval(input_1+"%"+input_2);
input_1=inputDom.value;
operation_1=this.value;
inputValue=inputDom.value+this.value;
console.log("计算结果后inputValue值为:"+inputValue);
}
}
}else{
//operation_1没有值
console.log(operation_1+"没有值");
operation_1=this.value;
console.log(operation_1+'有值')
inputValue+=this.value;
console.log("inputValue的值是："+inputValue);
}
}
//给等号绑定事件
fourths[3].onclick=function(){
var a=Number(input_1);
var b=Number(input_2);
console.log("计算结果：\na为："+a+"\nb为："+b+"\noperation_1为："+operation_1);
if(operation_1=='+'){
inputDom.value=a+b;
// inputDom.value=eval(input_1+"+"+input_2);
input_1=inputDom.value;
operation_1="";
inputValue=inputDom.value;
console.log("计算结果后inputValue值为:"+inputValue);
}else if(operation_1=='-'){
inputDom.value=a-b;
// inputDom.value=eval(input_1+"-"+input_2);
input_1=inputDom.value;
operation_1="";
inputValue=inputDom.value;
console.log("计算结果后inputValue值为:"+inputValue);
}else if(operation_1=='*'){
inputDom.value=a*b;
// inputDom.value=eval(input_1+"*"+input_2);
input_1=inputDom.value;
operation_1="";
inputValue=inputDom.value;
console.log("计算结果后inputValue值为:"+inputValue);
}else if(operation_1=='/'){
inputDom.value=a/b;
// inputDom.value=eval(input_1+"/"+input_2);
input_1=inputDom.value;
operation_1="";
inputValue=inputDom.value;
console.log("计算结果后inputValue值为:"+inputValue);
}else if(operation_1=='%'){
inputDom.value=a%b;
// inputDom.value=eval(input_1+"%"+input_2);
input_1=inputDom.value;
operation_1="";
inputValue=inputDom.value;
console.log("计算结果后inputValue值为:"+inputValue);
}
}
//给清0绑定事件
firsts[4].onclick=function(){
inputDom.value="";
input_1="";
input_2="";
inputValue="";
operation_1="";
operation_2="";
}
//给退格绑定事件
firsts[3].onclick=function(){
if(operation_1!=""){
var lastChar=inputValue.charAt(inputValue.length-1);
if(lastChar=='+'||lastChar=='-'||lastChar=='*'||lastChar=='/'||lastChar=='%'){
//则替换该运算符
//在刚输入运算符后退格
inputValue=inputValue.slice(0,inputValue.length-1);
operation_1=""
console.log("当刚输入运算符后按退格后：inputValue的值是："+inputValue);
}else{
//在输入第二个数据时退格
inputDom.value=inputDom.value.slice(0,inputDom.value.length-1);
inputValue=inputValue.slice(0,inputDom.length-1);
input_2=input_2.slice(0,input_2.length-1);
}
}else{
//在输入第一个数据时退格
inputDom.value=inputDom.value.slice(0,inputDom.value.length-1);
inputValue=inputValue.slice(0,inputDom.length-1);
input_1=input_1.slice(0,input_1.length-1);
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
