您的位置：首页 > Web前端 > JavaScript
H5的css的特性及JavaScript

2017-10-08 09:29 369 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>

*{
margin: 0;
padding: 0;
}
.nv{
width: 100%;
background: #ffd24a;
margin: 0 auto;
}
.nv ul li {
width: 70px;
list-style: none;
float: left;
margin-left: 20px;
}
.nv ul li a{
text-decoration: none;
}
.nv ul{
clear: left;
}
.nv ul li ul{
display: none;
}
.nv:hover .child{
display: block;
}
.dd{
width: 200px;
height: 200px;
background: red;
margin: 500px;
/*transition: all 2s ease;*/
animation:run 2s linear;
}
.dd:hover{
transform: translate(200px,300px)rotate(60deg) scale(0.6) skew(60deg,50deg) ;

}
@keyframes run {
0%{
width: 100px;
}
50%{
height: 350px;
}
100%{
width: 500px;
}

}
.pic{
box-shadow: 10px 10px 10px rgba(0,0,0,.5);

}
.dia{
width: 200px;
height: 50px;
background: orange;
border-radius: 5px;
margin: 20px auto;
position: relative;
}
.dia:after{
content: "\200B";
display: block;
width: 0;
height: 0;
border: 10px solid transparent;
border-left: 10px solid orange;
position: absolute;
right: -20px;
top: 10px;
}
p{
font-weight:bold;
font-size: 20px;
background: black;
color: #ffffff;
animation: run 3s linear infinite;
}

@keyframes run {
0%{
text-shadow:0px 0px 10px  red;

}
25%{
text-shadow:0px 0px 10px  blue;

}
50%{
text-shadow:0px 0px 10px  yellow;

}
75%{
text-shadow:0px 0px 10px green;

}
100%{
text-shadow:0px 0px 10px  gray;

}
}
/* ul{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;

animation: run 3s linear infinite;
animation-fill-mode:forwards;
transform-style: preserve-3d;
}
li{
width: 100%;
height:100%;
float: left;
list-style: none;
background: red;
left: 0;
top:0;
position: absolute;

}*/
/*
@keyframes run {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}*/

.df{
width: 200px;
height: 200px;
background: red;
}

</style>
</head>
<body>
<nav class="nv">
<ul>
<li><a href="#">首页</a>
<ul class="child">
<li ><a href="#">新闻</a></li>
&l
4000
t;li><a href="#">体育</a></li>
<li><a href="#">汽车</a></li>
<li><a href="#">财经</a></li>
</ul>
</li>
<li><a href="#">拍卖指南</a>
<ul class="child">
<li ><a href="#">明清文物</a></li>
<li><a href="#">大秦历史</a></li>
<li><a href="#">国外文物</a></li>
<li><a href="#">十二生肖</a></li>
</ul>
</li>
<li><a href="#">信息咨询</a></li>

</ul>
</nav>
<div class="dd"></div>
<img src="../img/sample-image.jpg" height="220" width="600" class="pic"/>
<div class="dia">

</div>
<p>您好啊啊啊啊啊 啊</p>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

<!--  <input type="number" value="320826199001200577"><br/>

<button>查询</button>
<p>性别<span id="sex"></span></p>
<p>年龄<span id="age"></span></p>
<p>生日<span id="birth"></span></p>-->

<!--开关-->
<div class="df"></div>
<div style="height: 230px;width: 652px"></div>
<!--计算机-->
<input type="number" value="4">
<select>
<option value="1" selected="selected">+</option>
<option value="2" >-</option>
<option value="3">*</option>
<option value="4">/</option>
</select>
<input type="number" value="3">
<button id="but">=</button>
<span class="sp"></span>
<div style="height: 230px;width: 652px"></div>
<script>

var btn=document.getElementsByTagName("button")[0];

var sex=document.getElementById("sex");
var age=document.getElementById("age");
var birth=document.getElementById("birth");

var div=document.getElementsByClassName("df")[0];
var i=true;
div.onclick=function () {

if(i==true){
div.style.background="blue"
i=false;
}else {
div.style.background="red"
i=true;
}
}

/*  btn.onclick=function(){
var str=document.getElementsByTagName("input")[0].value;
str[str.length-2]%2==0?sex.innerHTML="女":sex.innerHTML="男";

//截取生日
var ss= str.substring(11,14);

birth.innerHTML=ss;
//截取出生的年
var sm=str.substring(6,10)
//得到当前的年
var sf= new Date().getFullYear();
//用当前的年减去身份证上出生的年
age.innerHTML=sf-sm;

};

var arr=[5,6,8,1,2];

/!*冒泡排序*!/

for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length-1;j++){
if(arr[j]>arr[j+1]){
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
console.log(arr);

/!*乘法口诀*!/

for (var i = 1; i<=9;i++) {

for (var j =1; j<=i;j++) {

if(i==j){

document.write(i+"*"+j+"="+(i*j)+"<br/>");
}else {
document.write(i+"*"+j+"="+(i*j)+"  ");
}
}
}*/

/*计算器*/
//获取button

var btn=document.getElementById("but");
btn.onclick=function () {
//获取input
var var1=document.getElementsByTagName("input")[0].value;
var var2=document.getElementsByTagName("input")[1].value;
var sl=document.getElementsByTagName("select")[0].value;
var sp=document.getElementsByClassName("sp")[0];

switch (sl){
case "1":
sp.innerHTML=parseInt(var1)+parseInt(var2)
break;
case "2":
sp.innerHTML=parseInt(var1)-parseInt(var2)
break;
case "3":
sp.innerHTML=parseInt(var1)*parseInt(var2)
break;
case "4":
sp.innerHTML=parseInt(var1)/parseInt(var2)
break;
}

}

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航