-
开关案例
-
排他思想
-
定位到搜索框
-
图片跟上鼠标
-
省市二级联动
-
网页版计算器
-
轮播图
1.开关案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/pic_bulboff.gif" onclick="kaiGuan(this)">
</body>
<script type="text/javascript">
var flag = true;
function kaiGuan(ele) {
if (flag) {
ele.src = "img/pic_bulbon.gif";
//开启功能
} else {
ele.src = "img/pic_bulboff.gif";
//关闭功能
}
flag = !flag; //修改标记
}
</script>
</html>
2.排他思想
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script type="text/javascript">
var btns=document.getElementsByTagName("button");
for(let i=0;i<btns.length;i++){
btns[i].onclick=function(){
//把所有元素的背景恢复成默认
clearColor();
this.style.backgroundColor="red";
}
}
function clearColor(){
for(let i=0;i<btns.length;i++){
btns[i].style.backgroundColor="";
}
}
</script>
</html>
3.定位到搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="search" name="" id="ss" value="" />
<button type="button" onclick="sousuo()">搜索</button>
<hr size="12000px">
</body>
<script type="text/javascript">
function sousuo() {
alert("搜索");
}
//当输入完搜索的内容,敲回收开始搜索
document.getElementById("ss").addEventListener('keydown', function(e) {
//alert(e.keyCode);
if (e.keyCode == 13) {
alert("开始搜索")
}
})
//给整个文档绑定按键抬起事件
document.addEventListener('keyup', function(e) {
//alert(e.keyCode);
//判断 按的是 s
if (e.keyCode == 83) {
//让输入框获取焦点 focus() 在文本域上设置焦点。
document.getElementById("ss").focus();
e.pageY = 0 + "px"; //让页面定位到顶部 pageY纵坐标
}
})
</script>
</html>
4.图片跟随鼠标移动
标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<img src="img/yazi.gif" id="tp">
</body>
<script type="text/javascript">
//你要整个页面绑定事件,绑定 document 上
//标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
//或者 window.event 中获取事件对象
document.addEventListener('mousemove', function(e) {
// 2. page 鼠标在页面文档的x和y坐标
var x = e.pageX;
var y = e.pageY;
//获取图片对象
var img = document.getElementById("tp");
//设置图片的样式
img.style.left = x + "px";
img.style.top = y + "px";
})
</script>
</html>
5.省市二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="sheng" id="sheng" onchange="selectSheng()">
<option value="">--请选择省份--</option>
<option value="1">陕西</option>
<option value="2">河南</option>
</select>
<select name="city" id="city">
<option value="">--请选择城市--</option>
</select>
</body>
<script type="text/javascript">
//获取省和市的标签对象
var sheng = document.getElementById("sheng");
var city = document.getElementById("city");
//设计数据结构,我们可以设计为二维数组
var citys = [
[],
['西安', '咸阳', '安康', '宝鸡', '商洛', '榆林'],
['郑州', '南阳', '安阳', '开封']
];
function selectSheng() {
//返回或设置下拉列表中的选项数目。
//city.length=1;
//方式2
city.innerHTML="<option>--请选择城市--</option>";
//获取下拉项的编号
//selectedIndex 设置或返回下拉列表中被选项目的索引号。
var index=sheng.selectedIndex;
//取出这个省份对应的城市数组
var arr = citys[index]; //0 1 2
//遍历城市数组,城市添加到第二个下拉框中
for (var i = 0; i < arr.length; i++) {
/* //创建option标签
var option = document.createElement("option");
//创建文本节点
var text = document.createTextNode(arr[i]);
//给option添加 文本
option.appendChild(text);
//给select添加option
city.appendChild(option); */
//方式2
city.innerHTML+="<option>"+arr[i]+"</option>";
}
}
</script>
</html>
6.网页版计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input {
height: 70px;
width: 500px;
font-size: 50px;
border: none;
background: gainsboro;
}
table {
text-align: center;
font-size: 30px;
font-weight: 500;
color: blue;
}
td:hover {
cursor: pointer;
background-color: greenyellow;
}
</style>
</head>
<body>
<center>
<!-- disabled="disabled" 禁用输入框 -->
<input type="" name="" id="showNum" value="0" disabled="disabled" />
<table bordercolor="blue" border="1" cellspacing="0" cellpadding="" height="600px" width="500px">
<tr>
<td id="clear">C</td>
<td id="del">退格</td>
<td>%</td>
<td class="ysf">/</td>
</tr>
<tr>
<td class="num">7</td>
<td class="num">8</td>
<td class="num">9</td>
<td class="ysf">*</td>
</tr>
<tr>
<td class="num">4</td>
<td class="num">5</td>
<td class="num">6</td>
<td class="ysf">-</td>
</tr>
<tr>
<td class="num">1</td>
<td class="num">2</td>
<td class="num">3</td>
<td class="ysf">+</td>
</tr>
<tr>
<td colspan="2" class="num">0</td>
<td class="num">.</td>
<td id="result">=</td>
</tr>
</table>
</center>
</body>
<script type="text/javascript">
//1.把所有的数字键归为一类 class="num"
//2.把是所有的运算符归为一类 class="ysf"
//3.其余的单独加id
//先考虑简单的运算,我先点一个数字,再点一个运算符,再点一个数字,然后再点等号算出结果
//我们得定义三个变量,来保存第一个数字,第二个数字和,运算符
var numValue1 = '';
var numValue2 = '';
var opr = '';
//获取显示结果的标签对象
var showResult = document.getElementById("showNum");
//获取所有的数字键,给他绑定点击事件
var nums = document.getElementsByClassName("num");
for (let i = 0; i < nums.length; i++) {
nums[i].onclick = function() {
//取出标签之间的内容,展示到显示框
numValue1 += this.innerText; //+= 追加
showResult.value = numValue1;
}
}
//简单的运算,我先点一个数字,再点一个运算符,再点一个数字,然后再点等号算出结果
//思路:当用点击了运算符,我把第一个数,给第二个数,把第一个数清空,让他接收下一个数。
//获取所有的运算符,给他绑定点击事件
var oprs = document.getElementsByClassName("ysf");
for (let i = 0; i < oprs.length; i++) {
oprs[i].onclick = function() {
if(numValue2==''){
//我把第一个数,给第二个数
numValue2 = numValue1;
//把第一个数清空,让他接收下一个数
numValue1 = '';
//保存运算符
opr = this.innerText;
}else{
//你点=号也行,点运算符也行、如果你继续点运算符,那就把上一次的结果算出来赋值给numValue2
//再把第一个数清空,让他接收下一个数。
resultFun();
//保存运算符
opr = this.innerText;
}
}
}
//归零键
document.getElementById("clear").onclick = function() {
numValue1 = '';
numValue2 = '';
opr = '';
showResult.value = '0';
}
//退格键
document.getElementById("del").onclick = function() {
if (numValue1.length > 1) {
numValue1 = numValue1.substring(0, numValue1.length - 1);
showResult.value = numValue1;
}
/* else if(numValue1.length==1){
numValue1='0';
showResult.value=numValue1;
} */
}
//点击=
document.getElementById("result").onclick = function() {
//抽取一个方法,因为我还要复用
resultFun();
}
//计算结果
function resultFun() {
//把接收到的两个字符串数字,转换成数字。
var one = Number(numValue2);
var two = Number(numValue1);
var r = null; //保存运算完的结果
switch (opr) {
case '+':
r = one + two;
break;
case '-':
r = one - two;
break;
case '*':
r = one * two;
break;
case '/':
//判断除数不能为0
if(two==0){
alert("除数不能为0!");
//重置变量
numValue1 = '';
numValue2 = '';
opr = '';
showResult.value = '0';
return;
}else{
r = one / two;
}
break;
}
numValue2=r;
numValue1='';
showResult.value =r.toFixed(5)*1;//保留小数点后面5位
}
</script>
</html>
7.轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 230px;
height: 320px;
border: 1px black solid;
/* 溢出层隐藏 */
overflow: hidden;
}
#content {
width: 920px;
height: 320px;
/* margin-left: -460px; */
/* 加个过渡动画 */
transition: margin-left 1s;
}
#d1 {
width: 230px;
height: 320px;
background-image: url(img/main02_centent_01.png);
float: left;
}
#d2 {
width: 230px;
height: 320px;
background-image: url(img/main02_centent_02.png);
float: left;
}
#d3 {
width: 230px;
height: 320px;
background-image: url(img/main02_centent_03.png);
float: left;
}
#d4 {
width: 230px;
height: 320px;
background-image: url(img/main02_centent_04.png);
float: left;
}
#dots {
position: absolute;
width: 230px;
margin-top: 300px;
margin-left: auto;
/* border: 1px black solid; */
display: flex;
justify-content:center;
}
.dot {
width: 14px;
height: 14px;
border-radius: 7px;
float: left;
margin-left: 10px;
font-size: 10px;
color: white;
background: grey;
text-align: center;
}
.dot:hover{
cursor: pointer;
}
</style>
</head>
<body>
<!-- 观察口,宽高和图片一样 -->
<div id="box" onmouseover="stopScorll()" onmouseout="startScorll()">
<!-- 小圆点,指示器 -->
<div id="dots">
<div id="dot1" class="dot">1</div>
<div id="dot2" class="dot">2</div>
<div id="dot3" class="dot">3</div>
<div id="dot4" class="dot">4</div>
</div>
<div id="content">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
</div>
</body>
<script type="text/javascript">
var timerID = null;
var content = document.getElementById("content");
//指示器
var dots=document.getElementsByClassName("dot");
//一进来第一个先变红
dots[0].style.background="red";
//滚动图片
//0 -230 -460 -690
var count = 0;
function lunBo() {
count++;
if (count >= 4) {
count = 0;
}
//排他思想,让当前选中的变红。
clearColor();
//设置当前的指示器
dots[count].style.background="red";
content.style.marginLeft = (-230 * count) + "px";
}
//循环定时器
timerID = setInterval(lunBo, 2000);
//鼠标移上,停止滚动
function stopScorll() {
clearInterval(timerID);
}
function startScorll() {
timerID = setInterval(lunBo, 2000);
}
//清除指示器的背景颜色
function clearColor() {
for(let i=0;i<dots.length;i++){
dots[i].style.background="grey";
}
}
</script>
</html>