02手动版轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02手动版轮播图</title>
<style type="text/css">
img{
vertical-align:top;
}
.winDiv{
width:960px;
height:600px;
border:5pxsolid gold;
margin:0auto;
overflow:hidden;
}
.conDiv{
width:2880px;
height:600px;
font-size:0;
/*定位*/
position:relative;
}
.btnDiv{
text-align: center;
}
</style>
</head>
<body>
<!--上边图片-->
<div class="winDiv">
<div class="conDiv" id="conDiv">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
</div>
</div>
<!--下边按钮-->
<div class="btnDiv">
<input id="btnOne" type="button" value="按钮一" />
<input id="btnTwo" type="button" value="按钮二" />
<input id="btnThr" type="button" value="按钮三" />
</div>
</body>
<script type="text/javascript">
// 获取页面元素
var conDiv = document.getElementById("conDiv");
var btnOne = document.getElementById("btnOne");
var bntTwo = document.getElementById("btnTwo");
var btnThr = document.getElementById("btnThr");
btnOne.onclick = function() {
conDiv.style.left = 0;
}
bntTwo.onclick = function() {
conDiv.style.left = "-960px";
}
btnThr.onclick = function() {
conDiv.style.left = "-1920px";
}
</script>
</html>
03分支
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03分支</title>
</head>
<body>
<input type="text" id="txt" placeholder="请输入正整数"/>
<input type="button" value="点" id="btn" />
</body>
<script type="text/javascript">
//获取页面元素
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function(){
//如果输入框中的值是"西瓜"
if (txt.value == "西瓜") {
//输出 "买一个包子"
alert("买一个包子");
}
}
//点击按钮时,判断输入框中的数字是奇数还是偶数,如果是奇数输出"是奇数",如果是偶数输出"是偶数"
btn.οnclick=function(){
//奇数
if (txt.value % 2 == 1) {
alert("奇数");
}
//偶数
if (txt.value % 2 == 0) {
alert("偶数");
}
}
/*
* 如果输入框中的值是7的倍数,输出"是7的倍数",否则输出"不是7的倍数"
*/
btn.onclick = function(){
if (txt.value % 7 == 0) {
alert("是7的倍数");
} else{
alert("不是7的倍数");
}
}
//求以下两个变量中的最大值
var m = 100 , n = 516;
var maxVal = 0;
if (m > n) {
maxVal = m;
} else{
maxVal = n;
}
//三目运算符
m > n ? maxVal = m : maxVal = n;
alert("最大值是:"+ maxVal);
/* 三目运算符:作用是为了简化if...else 分支
* 简化步骤:
* 1.遇到if将if后小括号中的内容原封不动的抄写下来,然后在条件后边添加?号
* 2.依次往后抄写if分支中的语句
* 3.如果遇到else改写为:号
* 4.继续抄写else分支中的语句
*/
//求以下三个数中的最大值
var x = 8 , y = 39 , z = 544 ;
var maxVal = 0
if (x > y) {
if (x > z) {
maxVal = x;
} else{
maxVal = z;
}
} else{
if (y > z) {
maxVal = y;
} else{
maxVal = z;
}
}
alert(maxVal);
//if语句的级联式结构:
//if (条件1) {
//语句1
//} else if (条件2) {
//语句2
//} else if (条件3) {
//语句3
//} else{
//语句4
//}
//执行原理:如果条件1为真,则执行语句1 ,否则如果条件2为真,则执行语句2,否则如果条件3为真,则执行语句3,否则执行语句4
//判断输入框中输的月份所在季节
btn.onclick = function(){
var val = parseInt(txt.value);
if (val>=3 && val<=5) {
alert("春季");
} else if (val >= 6 && val <= 8) {
alert("夏季");
} else if (val >= 9 && val <= 11) {
alert("秋季");
} else if (val == 12 || val == 1 || val == 2) {
alert("冬季");
} else {
alert("请输入月份");
}
}
//switch (){
//case 表达式1:
//语句1
//break;
//case 表达式2:
//语句2
//break;
//case 表达式3:
//语句3
//break;
//...
//default:
//
//break;
//}
//default相当于if分支中的else
//break:在坟之中的作用是结束当前的分支
var num = 666;
switch (num){
case 661:
alert("市场部");
break;
case 662:
alert("这个部");
break;
case 666:
alert("那个部");
break;
default:
alert("请输入正确分机号");
break;
}
btn.onclick = function(){
var val = parseInt(txt.value);
switch (val){
case 3:
case 4:
case 5:
alert("春")
break;
case 6:
case 7:
case 8:
alert("夏")
break;
case 9:
case 10:
case 11:
alert("秋")
break;
case 12:
case 1:
case 2:
alert("冬")
break;
default:
alert("请输入月份")
break;
}
}
</script>
</html>
1814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
