前端JavaScripts基础知识点
2024-05-09 11:39:25
1放大镜
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女战士$</title><style>.smallBox {position: relative;width: 400px;height: 250px;margin-left: 100px;margin-top: 100px;float: left;}.smallBox img {width: 400px;}.bigBox {position: relative;width: 800px;height: 500px;margin-left: 50px;margin-top: 100px;float: left;border: 1px solid #ccc ;overflow: hidden;}.move {position: absolute;left:0;top:0;width: 120px;height: 120px;background-color: rgba(234,23,56,0.4);}#bigPic {position: absolute;left: 0;top:0;}</style>
</head>
<body>
<!--小盒子-->
<div class="smallBox"><img src="data:images/2-small.jpg" alt="" id="smallPic"><div class="move"></div>
</div>
<div class="bigBox"><img src="data:images/2-big.jpg" alt="" id="bigPic">
</div><script>window.onload = function () {/** 1:阴影块随着鼠标动---》获取鼠标位置** */console.log(document.body)var img = document.getElementsByClassName('move')[0]var bigBox = document.getElementById('bigPic')console.log(img.offsetWidth);document.function(e){}document.onmousemove = function (e) {//获取鼠标坐标 事件对象 e 保存着事件的具体信息img.style.left = e.clientX-100 -img.offsetWidth/2+'px' ;img.style.top = e.clientY-100-img.offsetHeight/2+'px';// alert(img.style.left,img.style.top)if (parseInt(img.style.left)<0){img.style.left=0}if (parseInt(img.style.left)>280){img.style.left=280+'px'}if (parseInt(img.style.top)<0){img.style.top=0}if (parseInt(img.style.top)>130){img.style.top=130+'px'}bigBox.style.left=-parseInt(img.style.left)*(480/280)+'px'bigBox.style.top=-parseInt(img.style.top)*(250/130)+'px'console.log(e.clientX,e.clientY)}}</script>
</body>
</html>
2样式操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女战士$</title><style>.smallBox {position: relative;width: 400px;height: 250px;margin-left: 100px;margin-top: 100px;float: left;}.smallBox img {width: 400px;}.bigBox {position: relative;width: 800px;height: 500px;margin-left: 50px;margin-top: 100px;float: left;border: 1px solid #ccc ;overflow: hidden;}.move {position: absolute;left:0;top:0;width: 120px;height: 120px;background-color: rgba(234,23,56,0.4);}#bigPic {position: absolute;left: 0;top:0;}</style>
</head>
<body>
<!--小盒子-->
<div class="smallBox"><img src="data:images/2-small.jpg" alt="" id="smallPic"><div class="move"></div>
</div>
<div class="bigBox"><img src="data:images/2-big.jpg" alt="" id="bigPic">
</div><script>window.onload = function () {/** 1:阴影块随着鼠标动---》获取鼠标位置** */console.log(document.body)var img = document.getElementsByClassName('move')[0]var bigBox = document.getElementById('bigPic')console.log(img.offsetWidth);document.function(e){}document.onmousemove = function (e) {//获取鼠标坐标 事件对象 e 保存着事件的具体信息img.style.left = e.clientX-100 -img.offsetWidth/2+'px' ;img.style.top = e.clientY-100-img.offsetHeight/2+'px';// alert(img.style.left,img.style.top)if (parseInt(img.style.left)<0){img.style.left=0}if (parseInt(img.style.left)>280){img.style.left=280+'px'}if (parseInt(img.style.top)<0){img.style.top=0}if (parseInt(img.style.top)>130){img.style.top=130+'px'}bigBox.style.left=-parseInt(img.style.left)*(480/280)+'px'bigBox.style.top=-parseInt(img.style.top)*(250/130)+'px'console.log(e.clientX,e.clientY)}}</script>
</body>
</html>
3、省市联动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女战士$</title>
</head>
<body><select name="province" id="province"><option value="0">北京</option><option value="1">河南省</option><option value="2">河北省</option><option value="3">广东省</option>
</select><select name="city" id="city">//不能提前写好
</select>
<script src="获取元素.js"></script>
<script>window.onload = function () {//1:下拉列表改变 onchange 给你要改变那个列表加
//下拉列表改变onchange给你要改变那个列表加//2:数据 城市数组var str = ''; //空串var cities = [['朝阳区','海淀区','大兴区'],['洛阳市','开封市','郑州市'],['张家口市','石家庄市','保定市'],['东莞市','珠海市','深圳市'] ];my$('#province').onchange = function () {//在改变之后 str清空// onchange改变时下拉列表改变时str = '';//1:遍历对应的市 ---文字/*得到被选中的元素 检测那个元素有selected属性 *///seleccted选中的默认被选中selected默认被选中selectedfor(var i =0;i<this.options.length;i++){if(this.options[i].selected){var index = this.options[i].value}// options选择期权 options选择期权options选择}console.log(index)for(var i = 0;i<cities.length;i++){if(i == index ){ //?var cs = cities[index]/* console.log(cities[index])*///遍历每一个城市 装到option标签里for(var j= 0;j<cities[index].length;j++){//拼接字符串str+="<option value="+ j+">"+ cities[index][j]+" </option>"}console.log(str)}}my$('#city').innerHTML = str;for(var i=0;i<cities.length;i++){if(i==index){var cs=cities[index]for ( var j=0;j<cities[index].length;j++){str+='<option value'}}}//2:option标签//3:追加到name=city的下拉列表里}//初始化函数function init() {for (var i=0;i<cities[0].length;i++){var o=document.createElement('option')o.innerText=cities[0][i];my$('#city').appendChild(o)}}init();
}
</script>
</body>
</html>
4、插入节点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女战士$</title>
</head>
<body>
<button id="btn">删除节点</button>
<div class="fa"><span class="gege"></span><!--<p></p>--><span class="last"></span>
</div>
<script src="获取元素.js"></script>
<script>//插入节点 兄弟关系 之前 之后var myp = document.createElement('p')myp.innerText = '我是p元素'//起了类名myp.setAttribute('class','myp')
//insertBefore(创建的节点,参考节点)my$('.fa').insertBefore(myp,my$('.last'));my$('#btn').onclick = function () {//移除元素 父元素.removeChild('子元素')my$('.fa').removeChild( my$('.myp'))}
</script>
</body>
</html>
5、节点添加操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女战士$</title>
</head>
<body>
<button id="btn">删除节点</button>
<div class="fa"><span class="gege"></span><!--<p></p>--><span class="last"></span>
</div>
<script src="获取元素.js"></script>
<script>//插入节点 兄弟关系 之前 之后var myp = document.createElement('p')myp.innerText = '我是p元素'//起了类名myp.setAttribute('class','myp')
//insertBefore(创建的节点,参考节点)my$('.fa').insertBefore(myp,my$('.last'));my$('#btn').onclick = function () {//移除元素 父元素.removeChild('子元素')my$('.fa').removeChild( my$('.myp'))}
</script>
</body>
</html>
6、定时器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$美少女战士$</title>
</head>
<body>
<script>//1:永久定时 返回 定时器标识 整数//window.setInterval(function(){// 每隔多长时间执行的代码// }, 1000(ms))//2: 一次性定时 返回 定时器标识 整数/** setTimeout(function(){1s之后执行一次},1000)*** */var i =0;/* var timer1 = window.setInterval(function () {i++;console.log(i)if(i===10){//清除定时器 clearInterval(标识)clearInterval(timer1)}},1000)
*/var timer2 = window.setTimeout(function () {console.log('我是一次性定时器 ，执行一次')//clearTimeout(timer2)},2000)/* var timer2 = window.setInterval(function () {i++;console.log(i)if(i===10){//清除定时器 clearInterval(标识)}},1000)*/</script>
</body>
</html>
前端JavaScripts基础知识点相关推荐
- 前端JavaScripts基础知识点轮播图
1.index.html <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- 前端javascripts基础知识点猴子吃桃
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 前端JavaScripts基础知识点讲义代码
js day01 数据类型 基本数据类型 引用数据类型 数据类型转换 其他类型 ->数值类型 string boolean null undefined --->number #1: 转换 ...
- 前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理 文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
- 前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持 特点 设置opacity的元素的所有后代会一起具 ...
- 前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧 把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
- 开发工程师必备————【Day17】前端HTML基础知识点
今日内容简介 前端简介 HTTP超文本传输协议 HTML简介 head内常见标签 body内常见标签 前端简介 1.前端与后端 (1) 前端 与用户直接打交道的操作界面都可以称之为是前端 (2)后端( ...
- 前端JavaScript基础知识点
JavaScript基础 阶段说明 JavaScript基础 Web API JavaScript高级 ##第一天重点内容 变量的声明及使用 数据类型 类型转换 运算符 JavaScript的组成 E ...
- web前端工程师基础知识点
看了一个web培训的大纲,感觉这些确实涵盖了在开发过程当中的一些知识点,特此总结了一下.同时也是第一次尝试了使用markdown这个编辑器,感觉不错. 特此推荐一下 HTMLXHTML Dreamwe ...
最新文章
- Struts权威著作
- 发送广播BroadcastReceiver
- python 图像分析 边框_Python 去除图片纯色边框（qbit）
- mysql poolsize_thread_pool_size的调整
- 换种思维看互联网公司分配时间！
- 谈谈数字货币交易系统的发展
- 水下通信方式以及WSN(无线传感器网络
- shell中用grep查找并且不输出_grep无法查找shell传过来的变量？先注意一下文本格式吧！...
- codeforces C. Multiples of Length
- 清华大学计算机学院院庆,清华计算机系2014年校庆系列活动
- divgrad怎么求_请问高等数学中div(grad u)中的div是什么意思？
- STM32自动生成精美图案
- 苹果cmsV10韩剧TV简约影视网站源码电脑和手机模板自适应
- 项目中，你们如何进行需求评审？
- 闭环思维拉开人生差距
- JavaWeb新闻项目（查询阅读主题维护）
- 投影仪服务器注册商标属于哪类,投影仪商标注册第几类？附：好听的投影仪商标名字...
- 影响产品质量的6方面因素：人、机、料、法、环、测
- 计算机网络和电信网络融合趋势,网络的发展趋势
- 详解：二极管M7和A7的区别
热门文章
- 【概率论与数理统计】如何理解自由度n？
- Leet Code OJ 110. Balanced Binary Tree [Difficulty: Easy]
- webpack 打包第三方库_webpack打包分离第三方库和业务代码
- jsp Request获取url信息的各种方法比较
- 蓝桥杯 ALGO-11 算法训练 瓷砖铺放
- mysql 记录所有操作_mysql 的一些记录的操作
- Mybatis逆向生成报错：文档根元素 “project“ 必须匹配 DOCTYPE 根 “null“。
- linux 性能教程,Linux系统下常见性能分析工具的使用
- 迁移pg_PG奥斯卡！云数据库专属集群MyBase荣获2020 PG亚洲大会“年度最佳产品奖”...
- oracle 单表查询 详细图文