13分27秒 老师为啥 不封装函数之前获取url字符串的时候是用window.location.search,使用封装函数的时候,调用者要调用函数的时候传入参数为啥使用document.location.search?一样吗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义右键菜单案例</title> <style> *{ padding: 0; margin: 0; } ul{ width: 200px; background-color: papayawhip; position: absolute; display: none; list-style: none; } li{ height: 30px; line-height: 30px; padding: 5px; cursor: pointer; } li:hover{ background-color: pink; } </style> </head> <body> <pre> 提示框综合案例【自定义右键菜单】 要求: (1)菜单选项一、弹出alert提示框,内容自拟 (2)菜单选项二、提示用户是否离开本页面。 (3)菜单选项三、跳转至百度搜索【页面中选中的内容】 (4)菜单选项四、弹出提示框,用户【在提示框中输入内容】然后跳转至百度进行搜索 </pre> <ul> <li>弹出alert提示框</li> <li>离开本页面</li> <li>在百度搜索选中内容</li> <li>输入内容并跳转百度搜索</li> </ul> <textarea cols="30" rows="10"></textarea> <script> //系统右键菜单禁止事件【contextmenu】 document.oncontextmenu = function (eve) { return false; //return false表示事件禁用 }; //获取ul var ul = document.querySelector("ul"); //当鼠标放开时 document.onmouseup = function (eve) { //eve.button能够判断鼠标用的是哪个按钮 // console.log(eve.button); //当右键点击页面时,右键菜单显示 if (eve.button==2){ ul.style.display='block'; //位置为鼠标位置 ul.style.left = eve.clientX + 'px'; ul.style.top = eve.clientY + 'px'; //点击其他位置隐藏 }else { ul.style.display='none'; } }; //事件委托,分别点击每个li,发生不同事件 ul.onclick = function (eve) { if (eve.target.innerHTML =='弹出alert提示框'){ alert('提示框'); }else if(eve.target.innerHTML =='离开本页面'){ if (confirm('是否离开本页面')){ close(); } }else if(eve.target.innerHTML =='在百度搜索选中内容'){ //获取选中内容,并转成字符串 var result = document.getSelection().toString(); console.log(result); // window.open('https://www.baidu.com/s?wd='+result); } } </script> </body> </html>
老师,这里是不是应该打印的是选中的内容?
我这里点击后,为什么显示的是个空字符串呢?正常不是应该输出的是‘跳转至百度’这几个字吗?是代码哪里有问题吗?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //输入一个数字打印对应的星期 var day=prompt('请输入星期'); switch (day) { case 1:{ alert('monday'); } break; case 2:{ alert('tuseday'); } break; case 3:{ alert('wednesday'); } break; case 4:{ alert('Thursday'); } break; case 5:{ alert('Friday'); } break; case 6:{ alert('Saturday'); } break; case 7:{ alert('Sunday'); } break; default:{alert('啥也不是') } } </script> </body> </html>
老师,这个为什么不能用prompt输入数值,之后进行语句选择呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="search">
<script>
var search = document.getElementById("search");
search.oninput = function(e){
console.log(e.target.value);//value是获取输入框中数据的
}
</script>
</body>
</html>
报错: Uncaught TypeError: Cannot set properties of null (setting 'oninput') at 表单事件.html:16:24
封装cookie应用场景是什么
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var arr = ['首页', '军事', '论坛', '视频']; //创建、设置ul元素 var u = document.createElement('ul'); var u_css = document.createAttribute('style'); u_css.value = 'list-style:none;margin:0;padding:0'; u.setAttributeNode(u_css) //创建li a元素 并设置元素 for (var i = 0; i <= arr.length - 1; i++) { var li = document.createElement('li'); var li_css = document.createAttribute('style'); li_css.value = 'display:inine-block;widht:100px;height:30px;line-height=30px;background=skyblue;aligin=center'; li.setAttributeNode(li_css); var a = document.createElement('a'); var a_css = document.createAttribute('style'); a_css.value = 'text-decoration: none;'; a.innerHTML = arr[i]; a.setAttributeNode(a_css); console.log(a.innerHTML); li.appendChild(a); u.appendChild(li); } document.body.appendChild(u); </script> </body> </html>
老师为啥我 li的css出不来
老师,视频中对于function (eve){},什么时候这个事件event必须写,什么时候可以不写,之前大部分例子都不写,是因为用到了鼠标事件吗?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义右击菜单案例</title> <style> *{padding: 0;margin: 0} ul{ list-style: none; background-color: darkgray; min-width: 220px; display: inline-block; position: absolute; display: none; } ul li{ height: 30px; line-height: 30px; padding:5px 20px; cursor: pointer; transition: 0.3s; } ul li:hover{ background-color: olivedrab; color: #fff; } </style> </head> <body> <ul> <li>北京尚学堂</li> <li>欢迎你</li> <li>去百度搜索页面中选中的内容</li> <li>赚大钱</li> </ul> <textarea cols="80" rows="20"></textarea> <script> var ul=document.querySelector("ul"); document.oncontextmenu=function (eve) { return false;//表示事件禁用 } document.onmouseup=function (eve) { //eve.button能够判断鼠标用的是哪个按钮 //0左键 1滑轮 2邮件 if (eve.button==2){ ul.style.display="inline-block"; //设置鼠标点击的位置 ul.style.left=eve.clientX+"px"; ul.style.top=eve.clientY+"px"; }else { //关闭菜单 ul.style.display="none"; } } //点击某一菜单选项时触发的事件(事件委托) ul.onmousedown=function (eve) { if (eve.target.innerHTML=='北京尚学堂'){ alert("那就去吧"); }else if (eve.target.innerHTML=='欢迎你') { if (confirm('欢迎你?')) { window.close();} }else if (eve.target.innerHTML=='去百度搜索页面中选中的内容'){ var result=document.getSelection().toString(); window.open('http://www.baidu.com/s?wd='+result); }else { var result=prompt("输入内容然后去百度"); window.open('http://www.baidu.com/s?wd='+result); } } </script> </body> </html>
老师我写的这个怎么不跳转百度?为什么要变成字符串的形式?
Node节点removeChild这一章的通过for循环遍历删除ul*4li的所有节点。
里面讲到i< list.childNodes.lenth 及[i]的使用技巧和思维方式,有没有强化这种思维方式的训练办法啊,老师您不分析,完全不知道是怎么处理的?
最后的居中问题,是不是可以理解为让子元素脱离文档流,无视了border带来的影响,他眼里只有自己的父元素哈哈哈
无法访问商店啊
问题一:obj[document]='sxt';中document为什么不加单引号。
问题二:第二张图正常的键值对不就是 划线的那个吗,怎么还就错了,后面未划线的那个对在哪里
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var div1=document.getElementById("#div1"); var div2=document.getElementById("#div2"); var div3=document.getElementById("#div3"); div1.onclick=function(){alert("div1被点击")}; div2.onclick=function(){alert("div2被点击")}; div3.onclick=function(){alert("div3被点击")}; } </script> </head> <body> <div id="div1" style="width: 300px;height: 300px;background-color: red"> <div id="div2" style="width: 200px;height: 200px;background-color: blue"> <div id="div3" style="width: 100px;height: 100px;background-color: green"></div> </div> </div> </body> </html>
var a='hello friend'; console.log(a.length)
老师:视频的讲课老师都喜欢打多一个变量来整合,我打的代码不整合直接输出有什么差别吗?
/* 瀑布流效果 1、第二行的第一张图片,应该放在每列的高度最矮的图片下面 */ // 1、动态设置页面居中 window.onload = function(){ waterFlow(); } function waterFlow(){ // 获取父级容器 var parentContainer = document.getElementById("container"); // 获取子元素 var allChild = document.getElementsByClassName("box"); // 获取屏幕 var screenWidth = document.documentElement.clientWidth; // 获取一个图片容器的宽度 var childWidth = allChild[0].offsetWidth; // 计算屏幕水平方向最多能摆放的图片个数 var rowsNum = Math.floor(screenWidth / childWidth) - 1; // 向下取整,预留一张作为空白区 // 让页面左右居中 parentContainer.style.cssText = "width:" + rowsNum * childWidth + "px;margin:0 auto;"; getMinHeightOfCols(allChild,rowsNum); } // 2、动态设置图片位置 function getMinHeightOfCols(allChild,rowsNum){ // 数组存储每列的高度 var colsHeightArr = []; for(var i = 0;i < allChild.length;i++){ // 判断取出第一行的图片,获取图片对应的高度,放入到数组中 if(i < rowsNum){ // i=6 // 获取当前图片的高度 colsHeightArr[i] = allChild[i].offsetHeight; }else{ // 获取一列高度最小的值 var minHeightOfCols = Math.min.apply(null,colsHeightArr); // 获取最小值对应的下标((位置) var minHeightOfIndex = colsHeightArr.indexOf(minHeightOfCols); // 摆放第二张图片的位置 allChild[i].style.position = "absolate"; allChild[i].style.top = minHeightOfCols+"px"; allChild[i].style.left = allChild[minHeightOfIndex].offsetLeft+"px"; //高度的合并 colsHeightArr[minHeightOfIndex]=colsHeightArr[minHeightOfIndex]+allChild[i].offsetHeight; } } }
找了好几遍,不知道为什么,总是有那个空隙?
非常抱歉给您带来不好的体验!为了更深入的了解您的学习情况以及遇到的问题,您可以直接拨打投诉热线:
我们将在第一时间处理好您的问题!
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护:百战汇智(北京)科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证:京B2-20212637