Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 相册和简单计算机
Blogger Information
Blog 36
fans 0
comment 1
visits 28236
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
相册和简单计算机
其琛的博客
Original
712 people have browsed it

相册效果如图$@GUE]L[@W`O[(]__H`JCY1.png

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相册</title>
<style type="text/css">
.box{

width: 500px;
height: 1100px;
background-color: #989898;
border:1px solid lightgray;
margin: 40px auto;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px #999;

}
.box h1{
color: orange;
}
.box ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.box ul li{
float: left;
margin-left: 20px;
background-color: skyblue;
}
.box ul li a{

display: block;
width: 100px;
height: 40px;
line-height: 40px;
color: white;
text-decoration-line: none;
}
.box ul li a:hover{
font-size: 1.2em;
background-color: black;
}
.box.pic{
width: 450px;
height: 470px;
border:1px solid lightgray;
line-height: 1px;
margin:auto;
}
.box .pic img{
margin-top:100px;
width: 100%;
height:100%;
}
.box .pic #info{
color: orange;
}

</style>
</head>
<body>
<div>
<h1>梦幻西游</h1>
       <ul>
        <li>
        <a href="images/m1.jpg" title="可拜门派：龙宫、五庄、天宫、凌波城" onclick="change(this);return false;">龙太子</a>
        </li>
        <li>
        <a href="./images/m2.jpg" title="可拜门派：大唐官府、化生寺、方寸山、神木村" onclick="change(this);return false;">逍遥生</a>
        </li>
        <li>
        <a href="./images/m3.jpg" title="可拜门派：大唐官府、化生寺、方寸山、神木村" onclick="change(this);return false;">剑侠客</a>
         </li>
         <li>
         <a href="./images/m4.jpg" title="可拜门派：龙宫、五庄、天宫、凌波城" onclick="change(this);return false;">神天兵</a>
          </li>
       </ul>
       <div>
        <img src="./images/m0.jpg" alt="" id="one">
       </div>
       <p id="info">梦幻西游，人人都玩，不玩才怪~</p>

</div>
<script type="text/javascript">
function change(pic){

var picUrl=pic.href
var picInfo=pic.title
// alert(picInfo)
     var img = document.getElementById('one')
     var p = document.getElementById('info')
     img.src = picUrl
     // p.innerHTML ='<span style="color:skyblue; font-size:2em;">'+ picInfo+'</span>'
    var str='<span style="color:skyblue; font-size:1.3em;">'
     str+=picInfo
     str+='</span>'
     p.innerHTML=str
}
</script>


</body>
</html>

计算机效果图Z~LC7K~OVT[N(775CNR%`DV.png

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>迷你计算器</title>
<style type="text/css">

.box{

width: 500px;
height: 200px;
background-color: #989898;
border:1px solid lightgray;
margin: 40px auto;
text-align: center;
color: #636363;
box-shadow: 2px 2px 2px #999;

}
table{
margin: auto;
border:1px solid red;
}
td{
border:1px solid blue;
width: 100px;
height: 30px;
padding: 5px 10px;
}
input,select{
width:100%;
height: 100%;
border: none;
text-align: center;
}
button{
width:100%;
height: 100%;
border: none;
background-color: brown;
color: white;
}
button:hover{
font-size: 1.3em;
background-color: skyblue;
width: 105%;
height: 105%;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<h2>计算器</h2>
<form>
<table>
<tr>
<td><input type="text" name="one" placeholder="填写数字"></td>
<td>
<select name="option">
<option value="null">请选择</option>
<option value="add">+</option>
<option value="sub">-</option>
<option value="mul">*</option>
<option value="div">/</option>
</select>
</td>
<td><input type="text" name="two" placeholder="填写数字"></td>
<td><button type="button">计算</button></td>
</tr>
<tr>
<td colspan="2"><h3>我扣手算的：</h3></td>
<td colspan="2"><h3 id="jie"></h3></td>

</tr>

</table>
</form>
</div>
<script type="text/javascript">
var one = document.getElementsByName('one')[0]
var two = document.getElementsByName('two')[0]
var jisuan = document.getElementsByName('option')[0]
var but = document.getElementsByTagName('button')[0]
var jie = document.getElementById('jie')
but.onclick = function(){
if(one.value.length==0){
alert('第一个不能为空')
one.focus()
return false
}else if(isNaN(one.value)){
alert('第一个必须是数字')
}else if(two.value.length==0){
alert('第二个不能为空')
two.focus()
return false
}else if(isNaN(two.value)){
alert('第二个必须是数字')}
else{
var data1= parseFloat(one.value)
var data2 =  parseFloat(two.value)
}
var option = jisuan.value
var temp = 0
var flag=''
switch(option){
case'null':
alert('请选择算法')
jisuan.focus()
return false
case 'add':
flag='+'
temp=data1+data2
break
return false
case 'sub':
flag='-'
temp=data1-data2
break
return false
case 'mul':
flag='*'
temp=data1*data2
break
return false
case 'div':
flag='/'
if (data2==0) {
alert('除数不能为0')
return false
}else{
                      temp=data1/data2
}

break
}
// jie.innerHTML= '<span style ="color:skyblue">'+data1+' '+flag+' '+data2+' ='+temp+'</span>'
var str ='<span style ="color:blue;">'
str += data1+' '+flag+' '+data2+' ='+temp
str += '</span>'
jie.innerHTML=str
}

</script>
</body>
</html>

手写如图qq_pic_merged_1522645224066.jpg

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post