JavaScript事件与属性综合案例

2023-09-05 阅读 85 评论 0

摘要：文章目录基础介绍common.js案例：图册案例：二维码的指针悬浮显示与隐藏案例：搜索框模拟案例：获取与设置元素文本值基础介绍 https://blog.csdn.net/weixin_45525272/article/details/107671639 common.js function my$(id) {return document.get

文章目录

基础介绍
common.js
案例：图册
案例：二维码的指针悬浮显示与隐藏
案例：搜索框模拟
案例：获取与设置元素文本值

基础介绍

https://blog.csdn.net/weixin_45525272/article/details/107671639

common.js

function my$(id) {return document.getElementById(id);
}//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {//判断浏览器是否支持这个属性if(typeof element.textContent =="undefined"){//不支持element.innerText=text;}else{//支持这个属性element.textContent=text;}
}//获取任意标签中间的文本内容
function getInnerText(element) {if(typeof element.textContent=="undefined"){return element.innerText;}else{return element.textContent;}
}

案例：图册

在这里插入图片描述

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {font-family: "Helvetica", "Arial", serif;color: #333;background-color: #ccc;margin: 100px 20%;}h1  {color: #333;/*transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。*/background-color:transparent;font-weight: bold;text-decoration: none;}ul {padding: 0px;}li  {float: left;padding: 1em;list-style-type: none ;}#imagegallery {list-style: none;}#imagegallery li {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery li a img {border: 0;}</style></head>
<body>
<h2>我的画廊</h2>
<ul id="imagegallery"><li><a href="image/1.jpg" title=“照片1”><img src="image/1.jpg-small.jpg" alt="加载错误"  width="100"></a></li><li><a href="image/2.jpg" title=“照片2”><img src="image/2.jpg-small.jpg" alt="加载错误"  width="100"></a></li><li><a href="image/3.jpg" title=“照片3”><img src="image/3.jpg-small.jpg" alt="加载错误"  width="100"></a></li><li><a href="image/3.jpg" title=“照片4”><img src="image/3.jpg-small.jpg" alt="加载错误"  width="100"></a></li>
</ul>
<!--清除同行元素，不允许其bai它元素与之在一行内。-->
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p>
<script src="common.js"></script>
<script>//点击a标签,把a标签中的href的属性值给id为image的src属性//把a的title属性的值给id为des的p标签赋值// 获取所有a标签var aObjs=my$("imagegallery").getElementsByTagName("a");// 循环遍历for (var i=0;i<aObjs.length;i++){aObjs[i].οnclick=function (ev) {my$("image").src=this.href;//为p标签赋值my$("des").innerText=this.title;//阻止超链接默认的跳转return false;}}
</body>
</html>

案例：二维码的指针悬浮显示与隐藏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.nodeSmall {width: 50px;height: 50px;background: url(images/bgs.png) no-repeat -159px -51px;position: fixed;right: 10px;top: 10%;}.erweima {position: absolute;top: 0;left: -150px;}.nodeSmall a {display: block;width: 50px;height: 50px;}.hide {display: none;}.show {display: block;}</style></head>
<body>
<div class="nodeSmall" id="node_small"><a href="#"></a><!--锚定--><div class="erweima hide" id="er"><img src="images/456.png" alt=""/></div>
</div>
<script src="common.js"></script>
<script>//获取鼠标要进入的a标签//先获取最外面的divvar aObj=my$("node_small").getElementsByTagName("a")[0];//为a注册鼠标进入aObj.onmouseover=function () {my$("er").className="erweima show";};//为a注册鼠标离开aObj.onmouseout=function () {my$("er").className="erweima hide";};
</script></body>
</html>

案例：搜索框模拟

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>input {color: gray;}</style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script src="common.js"></script>
<script>//获取文本框//注册获取焦点的事件my$("txt").onfocus = function () {//判断文本框的内容是不是默认的内容if (this.value == "请输入搜索内容") {this.value = "";//清空文本框this.style.color = "black";}};//注册失去焦点的事件my$("txt").onblur = function () {if (this.value.length == 0) {this.value = "请输入搜索内容";this.style.color = "gray";}};</script>
</body>
</html>

案例：获取与设置元素文本值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<!--<input type="text" value="文本框" id="txt"/>--><input type="button" value="按钮" id="btn"/>
<p>这是p</p>
<script src="common.js"></script>
<script>my$("btn").onclick=function () {console.log(document.getElementsByTagName("p")[0].innerText);};//  my$("txt").οnblur=function () {
//    this.value="哈哈";
//    console.log(this.id);
//  };
</script>
</body>
</html>

原文链接：https://808629.com/905.html

发表评论: