用js中的offsetWidth、offsetHeight如何获取图片(0.jpg)的宽度和高度?

3个回答

offsetWidth = width + border + width

图片说明

qq_39676085
W-yufang 刚刚运行的时候发现,获取不到图片的offsetWidth和offsetHeight,是因为js在执行的时候,图片还没加载出来,所以要把js代码放到window.onload里面,等图片加载完之后再执行js代码
2 年多之前 回复

图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用Svg报一条警告SVGElement.offsetWidth' is deprecated

svg标签报两条警告 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. jquery.js:221 'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. 这是我写的svg <svg height="100%" preserveAspectRatio="none" viewBox="0 0 125 200" id="four_rect"> <path d="M0,0 L50,0 L125,200 L0,200 Z" fill="rgba(255,255,255,0.5)" stroke="#FFF" stroke-width="0.2"/> </svg> 询问大神是我书写规则不对吗

下面js中的图片右上角加个关闭按钮, 关闭功能已实现。

``` <script> document.getElementById('close').addEventListener('click', function () { close(); },true) function close(){ Rimifon.close = true; ad.remove(); } var Rimifon = { "timer" : null, "close" : false, "Ads" : new Object, "NewFloatAd" : function(imgUrl, strLink) { var ad = document.createElement("div"); ad.DirV = true; ad.DirH = true; ad.AutoMove = true; ad.Image = new Image; ad.Seed = Math.random(); ad.Timer = setInterval("Rimifon.Float(" + ad.Seed + ")", 10); this.timer = ad.Timer; this.Ads[ad.Seed] = ad; ad.Image.Parent = ad; ad.style.position = "absolute"; ad.style.left = 0; ad.style.top = 0; ad.Image.src = imgUrl; ad.Image.onmouseover = function(){this.Parent.AutoMove = false;} ad.Image.onmouseout = function(){this.Parent.AutoMove = true;} if(strLink) { ad.href = strLink; ad.Image.border = 0; ad.target = "_blank"; } ad.appendChild(ad.Image); document.body.appendChild(ad); return ad; }, "Float" : function(floatId) { if(this.close){ clearInterval(this.timer); } var ad = this.Ads[floatId]; if(ad.AutoMove) { var curLeft = parseInt(ad.style.left); var curTop = parseInt(ad.style.top); if(ad.offsetWidth + curLeft > document.body.clientWidth + document.body.scrollLeft - 1) { curLeft = document.body.scrollLeft + document.body.clientWidth - ad.offsetWidth; ad.DirH = false; } if(ad.offsetHeight + curTop > document.body.clientHeight + document.body.scrollTop - 1) { curTop = document.body.scrollTop + document.body.clientHeight - ad.offsetHeight; ad.DirV = false; } if(curLeft < document.body.scrollLeft) { curLeft = document.body.scrollLeft; ad.DirH = true; } if(curTop < document.body.scrollTop) { curTop = document.body.scrollTop; ad.DirV = true; } ad.style.left = curLeft + (ad.DirH ? 1 : -1) + "px"; ad.style.top = curTop + (ad.DirV ? 1 : -1) + "px"; } } } </script> <script> var ad = Rimifon.NewFloatAd("http://www.jb51.net/images/logo.gif"); ad.style.left = 500; ad.style.top = 456; ad.Image.width = 200; ad.Image.height = 200; </script> ```

js无缝滚动,谁帮我解读下下面这段代码

js无缝滚动,谁帮我解读下下面这段代码? ``` <div class="obj" width="800"> <div class="obj1" width="8000"></div> <div class="obj2"></div> </div> if (obj2.offsetWidth - obj.scrollLeft <= 0){ obj.scrollLeft -= obj1.offsetWidth; }else{ obj.scrollLeft++; } ``` 如果obj2的宽度减去obj的相对屏幕左边的宽度小于等于0,那么obj相对于左边的位置 等于obj相对于左边的位置减去obj1的宽度,否则obj向左移动? 我这样理解对吗?但是我想不通他怎么就无缝滚动了?那个变换的卡顿是在哪个地方消除的?

给图片设置坐标,旋转后,怎么让坐标值跟着一起旋转?

点击图片,在当前位置加上一个相对于图片的坐标点,我是相对于屏幕加的,如果要旋转或者放大图片的话,坐标点位置不会改变,坐标点的值也不会随着图片的旋转和放大变化。 怎么能改变这个bug?让图片上的坐标跟随者图片转动,并且坐标值也会随图片的比例改变相应的值? js代码 和 图片效果 ``` $('#canvas')[0].onclick = function (e) { var x = (e || window.event).clientX + scrollX, // 鼠标的X位置 y = (e || window.event).clientY + scrollY, //鼠标的Y位置 imgX = $('#canvas')[0].offsetLeft + 20, // 图片距离左边的位置 imgY = $('#canvas')[0].offsetTop + 20, // 图片距离右边的位置 imgW = $('#canvas')[0].offsetWidth, // 图片的宽度 imgH = $('#canvas')[0].offsetHeight; // 图片的高度 var pointY = y - imgY, // 点的Y坐标 pointX = x - imgX; // 点的X坐标 var inkDiv = document.createElement('div'); inkDiv.className = 'ink'; $('#info')[0].appendChild(inkDiv); if (x >= imgX && x <= imgX + imgW) { inkDiv.style.display = 'block'; inkDiv.style.top = (y - 25) + 'px'; inkDiv.style.left = (x - 17) + 'px'; inkDiv.innerHTML = 'w:' + pointX + ' h:' + pointY; var pointDiv = document.createElement('div'); pointDiv.className = 'point'; pointDiv.style.top = (inkDiv.offsetHeight + 6) + 'px'; inkDiv.appendChild(pointDiv); var closeSpan = document.createElement('span'); closeSpan.className = 'close'; closeSpan.innerText = '×'; closeSpan.style.left = (inkDiv.offsetWidth - 5) + 'px'; inkDiv.appendChild(closeSpan); } var closes = document.getElementsByClassName('close'); for (var i = 0; i < closes.length; i++) { var index = i; closes[i].onclick = function () { this.parentNode.remove(); } } var inks = document.getElementsByClassName('ink'); var zIndex = 10; for (var i = 0; i < inks.length; i++) { inks[i].onclick = function () { zIndex++; this.style.zIndex = zIndex; } } } ``` ![图片说明](https://img-ask.csdn.net/upload/201709/05/1504579427_406720.png) ![图片说明](https://img-ask.csdn.net/upload/201709/05/1504579437_418093.png)

JavaScript width,height,left,top

Javascript里的,offsetwidth,offsetheight,offsetTop.offsetLeft. width,height,top,left, scrollwidth,scrollheight,scrolltop,scrollleft, clientwidth,clientheight,clienttop,clientleft指的是元素的那些地方的width,height,left,top ,能否详细说明??

如何将通过xmlhttp.open收集的变量传递给PHP的原始代码

<div class="post-text" itemprop="text"> <p>I am getting a screen resolution through XMLHttpRequest. I am opening a show_content.php file with screen resolution variables which I pull with the GET Method. This works!</p> <pre><code> xmlhttp.open("GET","show_content.php"+queryString,true); </code></pre> <p>and showing this file with the variables in a following div </p> <pre><code>&lt;div id="txtResolution"&gt;&lt;/div&gt; </code></pre> <p>This part works as well!</p> <p>PROBLEM: This div contains screen resolution variables that I would like to use throught the rest of the code outside of it but I can not pass them. How can I get those variables to be passed to the original code.</p> <p>I used the GET method but can not pass the variables to the original code outside the show_content.php I have tried with GLOBALS and Sessions as well but no luck</p> <p>Here ist the code. Everything works properly but I can not pass the variables from the "txtResolution" div to the rest of the code</p> <pre><code>function showResolution(field_id) { var xmlhttp; if (field_id.length==0) { document.getElementById("txtResolution").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) { document.getElementById("myvalue").innerHTML=xmlhttp.responseText; var myphpvar = document.getElementById('myvalue').innerText; } } var winW = 630, winH = 460; if (document.body &amp;&amp; document.body.offsetWidth) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } if (document.compatMode=='CSS1Compat' &amp;&amp; document.documentElement &amp;&amp; document.documentElement.offsetWidth ) { winW = document.documentElement.offsetWidth; winH = document.documentElement.offsetHeight; } if (window.innerWidth &amp;&amp; window.innerHeight) { winW = window.innerWidth; winH = window.innerHeight; } var queryString = "?width=" + winW + "&amp;height=" + winH; xmlhttp.open("GET","show_content.php"+queryString,true); xmlhttp.send(); } </code></pre> </div>

offsetWidth与clientWidth

我有两个问题,关于offsetWidth与clientWidth 1.element的client区域,是指border以内的部分,包括element本身的size跟padding 但是,e.clientX的原点,却没有遵循同样的机制,原点并不是body对象的client区域的左上角,而是body的margin区域的左上角 所以,有点矛盾,或者说,不太一致 2.在body有margin值的情况下,如何取得浏览器可显示区域的宽度呢? body.offsetWidth显然不行,因为不包括margin > The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.

图片滚动,鼠标放上去后不能停止滚动,不知哪里出错了

<div class="gdtp"> <div id="demo" style="overflow: hidden; width: 600px; height: 125px;"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td id="demo1" nowrap="nowrap"> <a href="#"><img src="/wgzx/images/photo_small02.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small03.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small04.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small05.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small06.jpg" /></a> <a href="#"><img src="/wgzx/images/photo_small06.jpg" /></a> </td> <td id="demo2" nowrap="nowrap"> </td> </tr> </table> </div> <script type="text/javascript"> var speed = 20;//滚动速度值,值越大速度越慢 // var demo=document.getElementById("demo"); // var demo=document.getElementById("demo1"); // var demo=document.getElementById("demo2"); // var nnn=200/demo1.offsetHeight; // for(i=0;i<nnn;i++){demo1.innerHTML+="<br />"+demo1.innerHTML} // demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1 function Marquee() { if(demo2.offsetWidth-demo.scrollLeft<=0) //当滚动至demo1与demo2交界时 { demo.scrollLeft -= demo1.offsetWidth //demo跳到最顶端 } else { demo.scrollLeft ++ } } var MyMar=setInterval(Marquee,speed);//设置定时器 demo.onmouseover=function(){clearInterval(MyMar)}//鼠标经过时清除定时器达到滚动停止的目的 demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} window.onload = function() { if(demo.offsetWidth < demo1.offsetWidth) { demo2.innerHTML=demo1.innerHTML var MyMar=setInterval(Marquee,speed) } } </script> </div>

为什么这里的imgList.style.left = 0 +"px"; 不生效?

在使用js实现html轮播图的时候想要在最后一张图的时候跳回第一张图,就是一直向右移动,但是设置imgList.style.left = 0 明明执行了却没生效,轮播到最后一张图片的时候会往回移动,像倒车一样。下面是页面代码 ``` <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } #imgBox{ width: 516px; height: 333px; background-color: greenyellow; padding: 8px 0; margin: 50px auto; overflow: hidden; position: relative; } #imgList{ list-style: none; position: absolute; } #imgList li{ float: left; padding: 0 8px; } #imgNav{ position: absolute; bottom: 20px; } #imgNav a{ width: 15px; float: left; height: 15px; background-color: pink; opacity:0.6; margin: 0 5px; } #imgNav a:hover{ background-color:rgb(24, 136, 241); } </style> <script src="js/tool.js"></script> <script> window.onload = function(){ var imgBox = document.getElementById("imgBox") var imgList = document.getElementById("imgList"); var imgArr = document.getElementsByTagName("img"); //设置imgNav的宽度 imgList.style.width = imgBox.offsetWidth*imgArr.length + "px"; var imgNav = document.getElementById("imgNav"); //获取imgNav中所有的A var allA = document.getElementsByTagName("a"); //设置imgNav居中 //居中公式:(总体宽度 - 居中元素的宽度)/2 imgNav.style.left = (imgBox.offsetWidth - imgNav.offsetWidth)/2 + "px"; //设置默认索引为0 var index = 0; //设置默认选择元素颜色 allA[index].style.backgroundColor = "rgb(24, 136, 241)"; //遍历数组allA,为所有的A绑定单击响应函数 for(var i=0; i < allA.length; i++){ allA[i].num = i; allA[i].onclick = function(){ index = this.num; imgList.style.left= -516*index +"px"; move(imgList, "left", -516*index, 30, function(){ setA(); }) } } //调用自动切换函数 autoChange(); //设置选中a样式的函数 function setA(){ //判断是否是最后一张图片 **if(index >= imgArr.length - 1){ //是最后一张则跳为第一张 imgList.style.left = 0 +"px"; //索引初始化 index = 0; //判断在网页中查看if是否执行 alert("初始化完毕"); } ** //将所有a初始化 for(var i = 0; i < allA.length; i++){ allA[i].style.backgroundColor = ""; } //将选中的a变色 allA[index].style.backgroundColor = "rgb(24, 136, 241)"; } //设置自动切换函数 function autoChange(){ setInterval(function(){ index++; index %= imgArr.length; move(imgList, "left", -516*index, 30,function(){ setA(); }) },3000) } } </script> </head> <body> <div id="imgBox"> <ul id="imgList"> <li><img src="img/01.jpg" ></li> <li><img src="img/02.jpg" ></li> <li><img src="img/03.jpg" ></li> <li><img src="img/04.jpeg" ></li> <li><img src="img/05.jpg" ></li> <li><img src="img/01.jpg" ></li> </ul> <div id="imgNav"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html> ``` 下面是move函数的代码 ``` /* 创建一个移动函数 obj为调用的对象 attribute为修改的属性 target为最终目标 speed为动作的速度 callBack为回调函数 */ function move(obj, attribute, target, speed, callBack){ clearInterval(obj.timer); //获取当前obj属性 var current = parseInt(getStyle(obj , attribute)); //判断速度方向 if(current>target){ speed = -speed; } obj.timer = setInterval(function(){ var oldValue = parseInt(getStyle(obj , attribute)); var newValue = oldValue + speed; //判断函数是否达到目标位置 if(speed > 0 && newValue >= target || speed < 0 && newValue <= target){ //使对象停在目标上 newValue = target; //关闭计时器 clearInterval(obj.timer); callBack && callBack(); } obj.style[attribute] = newValue + "px"; },30) } function getStyle(obj , name){ if(window.getComputedStyle){//判断兼容性 return getComputedStyle(obj,null)[name]; }else{ return obj.currentStyle[name]; } } ``` ![图片说明](https://img-ask.csdn.net/upload/201906/12/1560270611_753635.png)

用js编辑可输入表格

function aaa(){ var tdobj=window.event.srcElement; var trobj=tdobj.parentElement; if(tdobj.tagName !="TD"){ return; } alert(tdobj.offsetWidth+"\t"+tdobj.offsetHeight); alert(trobj.cells.length); for(var i=0; i<trobj.cells.length; i++){ if(tdobj==trobj.cells[i]){ var s = "<input type='text' style='width:+"(tdobj.offsetWidth-10)"+px; height:+"(tdobj.offsetHeight-5)"+px'>"; tdobj.innerHTML=s; 这段代码哪里出错了?

如何将base64转换为图像(画布)并使用php将其保存到文件夹路径?

<div class="post-text" itemprop="text"> <p>I am confused as how to upload that base64 to folder path. Here is my code:</p> <pre><code>var img = document.createElement('img') || document.querySelector('img'); var context; var width = video.offsetWidth , height = video.offsetHeight; canvas = canvas || document.createElement('canvas'); canvas.width = width; canvas.height = height; context = canvas.getContext('2d'); context.drawImage(video, 0, 0, width, height); img.src = canvas.toDataURL('image/png'); document.body.appendChild(img); </code></pre> </div>

用JS写的贪吃蛇,为什么定时器结束后会自动平移一格?

``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>random</title> <style> .map{ width: 800px; height: 600px; background-color: #CCC; position: relative; } </style> </head> <body> <div class="map"></div> <script> //自调用函数----食物的 (function(){ var elements = [];//用来保存每个小方块食物的 //食物就是一个对象,有宽,有高,有颜色,有横纵坐标,先定义构造函数,然后创建对象 function Food(width,height,color,x,y){ this.width=width||20; this.height=height||20; this.color=color||"green"; this.x=x||0; this.y=y||0; } //为原型添加初始化的方法(作用:在页面上显示这个食物) //因为食物要在地图上显示,所以,需要地图的这个参数(map---就是页面上的.class=map的这个div) Food.prototype.init=function(map){ //先删除这个小食物 //外部无法访问的函数 remove(); //设置div的样式 var div = document.createElement("div"); div.style.width=this.width+"px"; div.style.height=this.height+"px"; div.style.backgroundColor=this.color; //先脱离文档流 div.style.position = "absolute"; //随机横纵坐标 this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width; this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height; div.style.left = this.x + "px"; div.style.top = this.y + "px"; //把div加到map中 map.appendChild(div); //把div加入到数组elements中 elements.push(div); } function remove(){ for(var i=0;i<elements.length;i++) { //找到这个子元素的父级元素,然后删除这个子元素 elements[i].parentNode.removeChild(elements[i]); //再次把elements中的这个子元素也要删除 elements.splice(i,1); } } //把Food暴露给Window,外部可以使用 window.Food=Food; })(); //自调用函数----小蛇 (function(){ var elements = [];//存放小蛇的每个身体部分 //小蛇的构造 function Snake(width,height,direction) { this.width=width||20; this.height=height||20; this.direction=direction||"right"; this.body=[ {x:3,y:2,color:"red"}, {x:2,y:2,color:"orange"}, {x:1,y:2,color:"orange"} ]; } //为原型添加方法--小蛇初始化的方法 Snake.prototype.init=function(map){ remove(); //循环遍历创建div for(var i=0;i<this.body.length;i++) { //数组中的每个数组元素都是一个对象 var obj=this.body[i]; var div=document.createElement('div'); //设置div的样式 div.style.position = "absolute"; div.style.width = this.width + "px"; div.style.height = this.height + "px"; //横纵坐标 div.style.left = obj.x * this.width + "px"; div.style.top = obj.y * this.height + "px"; //背景颜色 div.style.backgroundColor = obj.color; //方向暂时不定 map.appendChild(div); //把div加入到elements数组中----目的是为了删除 elements.push(div); } } //为原型添加方法---小蛇动起来 Snake.prototype.move=function(food,map){ //改变小蛇的身体的坐标位置 var i=this.body.length-1;//2 for(;i>0;i--) { this.body[i].x=this.body[i-1].x; this.body[i].y=this.body[i-1].y; } //蛇头位置,判断方向---改变小蛇的头的坐标位置 switch(this.direction) { case "right": this.body[0].x+=1; break; case "left": this.body[0].x-=1; break; case "top": this.body[0].y-=1; break; case "bottom": this.body[0].y+=1; break; } //判断小蛇有没有吃到食物 //小蛇的头的坐标和食物的坐标一致 var headX=this.body[0].x*this.width; var headY=this.body[0].y*this.height; //判断小蛇的头的坐标和食物的坐标是否相同 if(headX==food.x&&headY==food.y) { var last=this.body[this.body.length-1]; this.body.push({ x:last.x, y:last.y, color:last.color }); //把食物删除,重新初始化食物 food.init(map); } } function remove(){ //删除map中的小蛇的每个div,同时删除elements数组中的每个元素,从蛇尾向蛇头方向删除div var i = elements.length - 1; for(;i>=0;i--) { //先从当前的子元素中找到该子元素的父级元素,然后再弄死这个子元素 var div=elements[i]; //从map地图上删除这个子元素div div.parentNode.removeChild(div); elements.splice(i, 1); } } window.Snake=Snake; })(); //自调用函数---游戏对象================================================ (function(){ function Game(map) { this.food = new Food();//食物对象 this.snake = new Snake();//小蛇对象 this.map = map;//地图 that = this;//保存当前的实例对象到that变量中-----------------此时that就是this } //初始化游戏-----可以设置小蛇和食物显示出来 Game.prototype.init = function () { //初始化游戏 //食物初始化 this.food.init(this.map); //小蛇初始化 this.snake.init(this.map); //调用自动移动小蛇的方法========================||调用了小蛇自动移动的方法 this.runSnake(this.food, this.map); //调用按键的方法 this.bindKey();//======================================== }; //添加原型方法---设置小蛇可以自动的跑起来 Game.prototype.runSnake=function(food,map){ //自动的去移动 var timeId = setInterval(function () { //此时的this是window //移动小蛇 this.snake.move(food, map); //初始化小蛇 this.snake.init(map); //横坐标的最大值 var maxX = map.offsetWidth / this.snake.width; //纵坐标的最大值 var maxY = map.offsetHeight / this.snake.height; //小蛇的头的坐标 var headX = this.snake.body[0].x; var headY = this.snake.body[0].y; //横坐标 if (headX < 0 || headX >= maxX) { //撞墙了,停止定时器 clearInterval(timeId); alert("游戏结束"); } //纵坐标 if (headY < 0 || headY >= maxY) { //撞墙了,停止定时器 clearInterval(timeId); alert("游戏结束"); } }.bind(that), 150); } //添加原型方法---设置用户按键,改变小蛇移动的方向 Game.prototype.bindKey=function(){ document.addEventListener("keydown",function(e){ //获取用户的按键,改变小蛇的方向 //这里的this应该是触发keydown的事件的对象---document, //所以,这里的this就是document //获取按键的值 switch (e.keyCode){ case 37: this.snake.direction="left"; if(snake_direction=="right") { this.snake.direction="right"; } else{ snake_direction="left"; } break; case 38: this.snake.direction="top"; if(snake_direction=="bottom") { this.snake.direction="bottom"; } else{ snake_direction="top"; } break; case 39: this.snake.direction="right"; if(snake_direction=="left") { this.snake.direction="left"; } else{ snake_direction="right"; } break; case 40: this.snake.direction="bottom"; if(snake_direction=="top") { this.snake.direction="top"; } else{ snake_direction="bottom"; } break; } }.bind(that)); } window.Game=Game; })(); //初始化游戏对象 var gm = new Game(document.querySelector(".map")); //初始化游戏---开始游戏 gm.init(); </script> </body> </html> ```

javaScript中返回true和false的问题,求大神解答!!

``` <%-- Created by IntelliJ IDEA. User: TopbeCoder5 Date: 2015/1/18 Time: 20:44 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>测试alertMsg</title> <link href="css/alertMsg.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮 msg = msg || ''; mode = mode || 0; var top = document.body.scrollTop || document.documentElement.scrollTop; var isIe = (document.all) ? true : false; var isIE6 = isIe && !window.XMLHttpRequest; var sTop = document.documentElement.scrollTop || document.body.scrollTop; var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var winSize = function () { var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight; // innerHeight获取的是可视窗口的高度,IE不支持此属性 if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if (yScroll < windowHeight) { pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if (xScroll < windowWidth) { pageWidth = windowWidth; } else { pageWidth = xScroll; } return { 'pageWidth': pageWidth, 'pageHeight': pageHeight, 'windowWidth': windowWidth, 'windowHeight': windowHeight } }(); //alert(winSize.pageWidth); //遮罩层 var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;'; styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIV var shadowDiv = document.createElement('div'); //添加阴影DIV shadowDiv.style.cssText = styleStr; //添加样式 shadowDiv.id = "shadowDiv"; //如果是IE6则创建IFRAME遮罩SELECT if (isIE6) { var maskIframe = document.createElement('iframe'); maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);'; maskIframe.frameborder = 0; maskIframe.src = "about:blank"; shadowDiv.appendChild(maskIframe); } document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档 //弹出框 var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 125) + 'px;top:' + (winSize.windowHeight / 2 - 70) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150) + 'px;'; //弹出框的位置 var alertBox = document.createElement('div'); var alertTitle = document.createElement('div'); alertTitle.id = 'alertTitle'; alertBox.id = 'alertMsg'; alertBox.style.cssText = styleStr1; //创建弹出框里面的内容P标签 var alertMsg_info = document.createElement('P'); alertMsg_info.id = 'alertMsg_info'; alertMsg_info.innerHTML = msg; alertTitle.innerHTML = '提示信息!'; alertBox.appendChild(alertTitle); alertBox.appendChild(alertMsg_info); //创建按钮 var styleStr2 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 125) + 'px;top:' + (winSize.windowHeight / 2 + 40) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150) + 'px;'; //弹出框的位置 var alertBottom = document.createElement('div'); alertBottom.id = 'alertBottom'; alertBottom.style.cssText = styleStr2; if (mode === 1) { var btn1 = document.createElement('a'); btn1.id = 'alertMsg_btn1'; btn1.href = 'javas' + 'cript:void(0)'; btn1.innerHTML = '<cite>确定</cite>'; btn1.onclick = function () { document.body.removeChild(alertBox); document.body.removeChild(shadowDiv); document.body.removeChild(alertBottom); //document.getElementById("logout").click(); return true; }; alertBottom.appendChild(btn1); var btn2 = document.createElement('a'); btn2.id = 'alertMsg_btn2'; btn2.href = 'javas' + 'cript:void(0)'; btn2.innerHTML = '<cite>取消</cite>'; btn2.onclick = function () { document.body.removeChild(alertBox); document.body.removeChild(shadowDiv); document.body.removeChild(alertBottom); return false; }; } else { var btn2 = document.createElement('a'); btn2.id = 'alertMsg_btn2'; btn2.href = 'javas' + 'cript:void(0)'; btn2.innerHTML = '<cite>确定</cite>'; btn2.onclick = function () { document.body.removeChild(alertBox); document.body.removeChild(shadowDiv); document.body.removeChild(alertBottom); return false; }; } alertBottom.appendChild(btn2); document.body.appendChild(alertBox); document.body.appendChild(alertBottom); } function confirmMsg() { if (alertMsg("测试", 1)) { alert("点击了确定"); } else { alert("点击了取消"); } } </script> </head> <body> <input type="button" value="Test the alert" onclick="return confirmMsg('test confirm');"> </body> </html> ``` 为什么一点botton就直接运行了false啊??

Vue.js页面渲染生命周期问题

使用Vue.js做瀑布流布局时,在mounted中直接调用waterFall函数,页面上图片布局是乱的,设置了setTimeout延迟0ms渲染也不起作用。 在safari和chrome上页面正常了,设置延迟100ms,页面加载后布局正常,但是明显的可以看到布局的变化过程,效果不好,延迟值再设置低一些,就不起作用; 在火狐浏览器,要设置延迟150ms以上才起作用,而且也是可以看到页面布局的变化过程,体验不好。 求各位大师指点明路。 ```, <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../../vue.js"></script> <style> *{margin: 0;padding: 0} #main{position: relative;margin:0 auto;} #main::after{content: '';display: block;height: 0;clear: both;visibility: hidden;} .pic{float: left;padding: 15px 0 0 15px;} .pic img{padding: 10px;width: 165px;height: auto;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;} </style> </head> <body> <div id="main"> <div class="pic" v-for='img in images'> <img :src="img"> </div> </div> <script type="text/javascript"> var vm = new Vue({ el : '#main' , data : { images:[ 'images/0.jpg','images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg','images/9.jpg', 'images/10.jpg','images/11.jpg','images/12.jpg','images/13.jpg','images/14.jpg','images/15.jpg','images/16.jpg','images/17.jpg','images/18.jpg','images/19.jpg', 'images/20.jpg','images/21.jpg','images/22.jpg','images/23.jpg','images/24.jpg','images/25.jpg','images/26.jpg','images/27.jpg','images/28.jpg','images/29.jpg', 'images/30.jpg','images/31.jpg','images/32.jpg','images/33.jpg','images/34.jpg','images/35.jpg','images/36.jpg' ] }, mounted:function(){ var _this = this ; setTimeout(function(){ _this.waterFall('main','pic'); },0); //safari浏览器下必须迟延30ms执行waterFall,布局才会正常渲染,其他浏览器下设置为0即可。 }, methods:{ getByClass:function(oParent,clsName){ return oParent.getElementsByClassName(clsName); }, waterFall:function(Parent,clsName){ var _this = this ; var oParent = document.getElementById(Parent); var oBoxs = _this.getByClass(oParent,clsName); var oBoxW = oBoxs[0].offsetWidth ; //获取每列的宽度 var pageW = document.documentElement.clientWidth ; var cols = Math.floor(pageW / oBoxW) ; //判断页面列数 oParent.style.cssText = 'width:' + cols*oBoxW +'px;'; //设定main的宽度并居中 var arr = [] ; //用于存放每列的高度 for(var i=0;i<oBoxs.length;i++){ if( i<cols ){ arr.push(oBoxs[i].offsetHeight); }else { var minH = Math.min.apply('null',arr); //求出高度最低列的值 var index = _this.getMinIndex(arr,minH) ; //高度最低列的索引值 oBoxs[i].style.position = 'absolute' ; oBoxs[i].style.top = minH + 'px' ; oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px' ; arr[index] += oBoxs[i].offsetHeight ; //更新数组中每列的高度 } } }, getMinIndex:function(arr,value){ //获取数组arr中,值为value的索引值 for(var i=0;i<arr.length;i++){ if(arr[i] == value){ return i ;} } } }, }); </script> </body> </html> ```

Preg_match用PHP获取'v1.0'Webcam JS

<div class="post-text" itemprop="text"> <p>I need pregmatch to fetch 'v1.0' from the first comment line</p> <p>I tried this, but its not working for me '@[\s\S]*(?&lt;=WebcamJS )([0-9.]+)@' <a href="http://www.phpliveregex.com/p/9LW" rel="nofollow">permalink</a></p> <pre><code>// WebcamJS v1.0 - http://github.com/jhuckaby/webcamjs - MIT Licensed (function(e){var Webcam={version:"1.0.0",protocol:location.protocol.match(/https/i)?"https":"http",swfURL:"",loaded:false,live:false,userMedia:true,params:{width:0,height:0,dest_width:0,dest_height:0,image_format:"jpeg",jpeg_quality:90,force_flash:false},hooks:{load:null,live:null,uploadcomplete:null,uploadprogress:null,error:function(e){alert("Webcam.js Error: "+e)}},init:function(){navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;e.URL=e.URL||e.webkitURL||e.mozURL||e.msURL;this.userMedia=this.userMedia&amp;&amp;!!navigator.getUserMedia&amp;&amp;!!e.URL;if(navigator.userAgent.match(/Firefox\D+(\d+)/)){if(parseInt(RegExp.$1,10)&lt;21)this.userMedia=null}},attach:function(t){if(typeof t=="string"){t=document.getElementById(t)||document.querySelector(t)}if(!t){return this.dispatch("error","Could not locate DOM element to attach to.")}this.container=t;t.innerHTML="";var a=document.createElement("div");t.appendChild(a);this.peg=a;if(!this.params.width)this.params.width=t.offsetWidth;if(!this.params.height)this.params.height=t.offsetHeight;if(!this.params.dest_width)this.params.dest_width=this.params.width;if(!this.params.dest_height)this.params.dest_height=this.params.height;if(this.params.force_flash)this.userMedia=null;var i=this.params.width/this.params.dest_width;var s=this.params.height/this.params.dest_height;if(this.userMedia){var r=document.createElement("video");r.setAttribute("autoplay","autoplay");r.style.width=""+this.params.dest_width+"px";r.style.height=""+this.params.dest_height+"px";if(i!=1||s!=1){t.style.overflow="hidden";r.style.webkitTransformOrigin="0px 0px";r.style.mozTransformOrigin="0px 0px";r.style.msTransformOrigin="0px 0px";r.style.oTransformOrigin="0px 0px";r.style.transformOrigin="0px 0px";r.style.webkitTransform="scaleX("+i+") scaleY("+s+")";r.style.mozTransform="scaleX("+i+") scaleY("+s+")";r.style.msTransform="scaleX("+i+") scaleY("+s+")";r.style.oTransform="scaleX("+i+") scaleY("+s+")";r.style.transform="scaleX("+i+") scaleY("+s+")"}t.appendChild(r);this.video=r;var o=this;navigator.getUserMedia({audio:false,video:true},function(t){r.src=e.URL.createObjectURL(t)||t;Webcam.stream=t;Webcam.loaded=true;Webcam.live=true;Webcam.dispatch("load");Webcam.dispatch("live")},function(e){return o.dispatch("error","Could not access webcam.")})}else{var h=document.createElement("div");h.innerHTML=this.getSWFHTML();t.appendChild(h)}if(this.params.crop_width&amp;&amp;this.params.crop_height){var n=Math.floor(this.params.crop_width*i);var l=Math.floor(this.params.crop_height*s);t.style.width=""+n+"px";t.style.height=""+l+"px";t.style.overflow="hidden";t.scrollLeft=Math.floor(this.params.width/2-n/2);t.scrollTop=Math.floor(this.params.height/2-l/2)}else{t.style.width=""+this.params.width+"px";t.style.height=""+this.params.height+"px"}},reset:function(){if(this.preview_active)this.unfreeze();if(this.userMedia){try{this.stream.stop()}catch(e){}delete this.stream;delete this.video}this.container.innerHTML="";delete this.container;this.loaded=false;this.live=false},set:function(){if(arguments.length==1){for(var e in arguments[0]){this.params[e]=arguments[0][e]}}else{this.params[arguments[0]]=arguments[1]}},on:function(e,t){e=e.replace(/^on/i,"").toLowerCase();if(typeof this.hooks[e]=="undefined")throw"Event type not supported: "+e;this.hooks[e]=t},dispatch:function(){var t=arguments[0].replace(/^on/i,"").toLowerCase();var a=Array.prototype.slice.call(arguments,1);if(this.hooks[t]){if(typeof this.hooks[t]=="function"){this.hooks[t].apply(this,a)}else if(typeof this.hooks[t]=="array"){this.hooks[t][0][this.hooks[t][1]].apply(this.hooks[t][0],a)}else if(e[this.hooks[t]]){e[this.hooks[t]].apply(e,a)}return true}return false},setSWFLocation:function(e){this.swfURL=e},getSWFHTML:function(){var t="";if(location.protocol.match(/file/)){return'&lt;h1 style="color:red"&gt;Sorry, the Webcam.js Flash fallback does not work from local disk. Please upload it to a web server first.&lt;/h1&gt;'}if(!this.swfURL){var a="";var i=document.getElementsByTagName("script");for(var s=0,r=i.length;s&lt;r;s++){var o=i[s].getAttribute("src");if(o&amp;&amp;o.match(/\/webcam(\.min)?\.js/)){a=o.replace(/\/webcam(\.min)?\.js.*$/,"");s=r}}if(a)this.swfURL=a+"/webcam.swf";else this.swfURL="webcam.swf"}if(e.localStorage&amp;&amp;!localStorage.getItem("visited")){this.params.new_user=1;localStorage.setItem("visited",1)}var h="";for(var n in this.params){if(h)h+="&amp;";h+=n+"="+escape(this.params[n])}t+='&lt;object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+this.params.width+'" height="'+this.params.height+'" id="webcam_movie_obj" align="middle"&gt;&lt;param name="wmode" value="opaque" /&gt;&lt;param name="allowScriptAccess" value="always" /&gt;&lt;param name="allowFullScreen" value="false" /&gt;&lt;param name="movie" value="'+this.swfURL+'" /&gt;&lt;param name="loop" value="false" /&gt;&lt;param name="menu" value="false" /&gt;&lt;param name="quality" value="best" /&gt;&lt;param name="bgcolor" value="#ffffff" /&gt;&lt;param name="flashvars" value="'+h+'"/&gt;&lt;embed id="webcam_movie_embed" src="'+this.swfURL+'" wmode="opaque" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+this.params.width+'" height="'+this.params.height+'" name="webcam_movie_embed" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+h+'"&gt;&lt;/embed&gt;&lt;/object&gt;';return t},getMovie:function(){if(!this.loaded)return this.dispatch("error","Flash Movie is not loaded yet");var e=document.getElementById("webcam_movie_obj");if(!e||!e._snap)e=document.getElementById("webcam_movie_embed");if(!e)this.dispatch("error","Cannot locate Flash movie in DOM");return e},freeze:function(){var e=this;var t=this.params;if(this.preview_active)this.unfreeze();var a=this.params.width/this.params.dest_width;var i=this.params.height/this.params.dest_height;var s=t.crop_width||t.dest_width;var r=t.crop_height||t.dest_height;var o=document.createElement("canvas");o.width=s;o.height=r;var h=o.getContext("2d");this.preview_canvas=o;this.preview_context=h;if(a!=1||i!=1){o.style.webkitTransformOrigin="0px 0px";o.style.mozTransformOrigin="0px 0px";o.style.msTransformOrigin="0px 0px";o.style.oTransformOrigin="0px 0px";o.style.transformOrigin="0px 0px";o.style.webkitTransform="scaleX("+a+") scaleY("+i+")";o.style.mozTransform="scaleX("+a+") scaleY("+i+")";o.style.msTransform="scaleX("+a+") scaleY("+i+")";o.style.oTransform="scaleX("+a+") scaleY("+i+")";o.style.transform="scaleX("+a+") scaleY("+i+")"}this.snap(function(){o.style.position="relative";o.style.left=""+e.container.scrollLeft+"px";o.style.top=""+e.container.scrollTop+"px";e.container.insertBefore(o,e.peg);e.container.style.overflow="hidden";e.preview_active=true},o)},unfreeze:function(){if(this.preview_active){this.container.removeChild(this.preview_canvas);delete this.preview_context;delete this.preview_canvas;this.preview_active=false}},savePreview:function(e,t){var a=this.params;var i=this.preview_canvas;var s=this.preview_context;if(t){var r=t.getContext("2d");r.drawImage(i,0,0)}e(t?null:i.toDataURL("image/"+a.image_format,a.jpeg_quality/100),i,s);this.unfreeze()},snap:function(e,t){var a=this;var i=this.params;if(!this.loaded)return this.dispatch("error","Webcam is not loaded yet");if(!this.live)return this.dispatch("error","Webcam is not live yet");if(!e)return this.dispatch("error","Please provide a callback function or canvas to snap()");if(this.preview_active){this.savePreview(e,t);return null}var s=document.createElement("canvas");s.width=this.params.dest_width;s.height=this.params.dest_height;var r=s.getContext("2d");var o=function(){if(this.src&amp;&amp;this.width&amp;&amp;this.height){r.drawImage(this,0,0,i.dest_width,i.dest_height)}if(i.crop_width&amp;&amp;i.crop_height){var a=document.createElement("canvas");a.width=i.crop_width;a.height=i.crop_height;var o=a.getContext("2d");o.drawImage(s,Math.floor(i.dest_width/2-i.crop_width/2),Math.floor(i.dest_height/2-i.crop_height/2),i.crop_width,i.crop_height,0,0,i.crop_width,i.crop_height);r=o;s=a}if(t){var h=t.getContext("2d");h.drawImage(s,0,0)}e(t?null:s.toDataURL("image/"+i.image_format,i.jpeg_quality/100),s,r)};if(this.userMedia){r.drawImage(this.video,0,0,this.params.dest_width,this.params.dest_height);o()}else{var h=this.getMovie()._snap();var n=new Image;n.onload=o;n.src="data:image/"+this.params.image_format+";base64,"+h}return null},configure:function(e){if(!e)e="camera";this.getMovie()._configure(e)},flashNotify:function(e,t){switch(e){case"flashLoadComplete":this.loaded=true;this.dispatch("load");break;case"cameraLive":this.live=true;this.dispatch("live");break;case"error":this.dispatch("error",t);break;default:break}},b64ToUint6:function(e){return e&gt;64&amp;&amp;e&lt;91?e-65:e&gt;96&amp;&amp;e&lt;123?e-71:e&gt;47&amp;&amp;e&lt;58?e+4:e===43?62:e===47?63:0},base64DecToArr:function(e,t){var a=e.replace(/[^A-Za-z0-9\+\/]/g,""),i=a.length,s=t?Math.ceil((i*3+1&gt;&gt;2)/t)*t:i*3+1&gt;&gt;2,r=new Uint8Array(s);for(var o,h,n=0,l=0,c=0;c&lt;i;c++){h=c&amp;3;n|=this.b64ToUint6(a.charCodeAt(c))&lt;&lt;18-6*h;if(h===3||i-c===1){for(o=0;o&lt;3&amp;&amp;l&lt;s;o++,l++){r[l]=n&gt;&gt;&gt;(16&gt;&gt;&gt;o&amp;24)&amp;255}n=0}}return r},upload:function(e,t,a){if(a)Webcam.on("uploadComplete",a);var i="webcam";var s="";if(e.match(/^data\:image\/(\w+)/))s=RegExp.$1;else throw"Cannot locate image format in Data URI";var r=e.replace(/^data\:image\/\w+\;base64\,/,"");var o=new XMLHttpRequest;o.open("POST",t,true);if(o.upload&amp;&amp;o.upload.addEventListener){o.upload.addEventListener("progress",function(e){if(e.lengthComputable){var t=e.loaded/e.total;Webcam.dispatch("uploadProgress",t,e)}},false)}o.onload=function(){Webcam.dispatch("uploadComplete",o.status,o.responseText,o.statusText)};var h=new Blob([this.base64DecToArr(r)],{type:"image/"+s});var n=new FormData;n.append(i,h,i+"."+s.replace(/e/,""));o.send(n)}};Webcam.init();if(typeof define==="function"&amp;&amp;define.amd){define(function(){return Webcam})}else if(typeof module==="object"&amp;&amp;module.exports){module.exports=Webcam}else{e.Webcam=Webcam}})(window); </code></pre> </div>

style.top 在变为什么 对应元素位置可以不变?

``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <title>Document</title> <!-- <script src="./demo/jquery.min.js"></script> --> </head> <style lang=""> *{ margin: 0; padding: 0; } body{ /*height: 1000px;*/ /*position: relative;*/ /*margin:0px; padding:0px;*/ } .point { position: absolute; border: 5px solid red; } .ball{ width:4px; height:4px; /*background: #d9fe37;*/ background: red; border-radius: 50%; position: absolute; } #sketchPad{ /*width: 400px; height: 400px;*/ /*left: 100px; top: 100px;*/ /*background-color: #ff0; overflow: auto;*/ /*position: relative;*/ } .small{ position: relative; height: 300px; overflow: auto; } .small img{ height: 300px; } #selectImage{ left: 200px; top: 500px; position: absolute; } .box{ width: 300px; height: 300px; margin: 100px; border: 1px solid #ccc; position: relative; /*overflow: auto;*/ } .big{ width: 600px; height: 600px; position: absolute; top: 0; left: 560px; border: 1px solid #ccc; overflow: auto; /*display: none;*/ display: block; background-color: #eee; } .big::-webkit-scrollbar{ display: none; } .mask{ width: 50px; height: 50px; background: rgba(255,255,0,0.4); position: absolute; top: 0; left: 0; /*鼠标的样式*/ cursor: crosshair; display: none; } .big img{ position: absolute; height: 3600px; /*box.height*big.width/mask.width */ top: 0; left: 0; } .aim{ position: absolute; top: 50%; left: 50%; width: 20px; margin-left: -10px; height: 20px; margin-top: -10px; display: block; /*z-index: 8*/ } .aim__ver{ position: absolute; top: 50%; left: 50%; width: 2px; height: 40px; margin-top: -20px; margin-left: -1px; background-color: #f00; } .aim__hor{ position: absolute; top: 50%; left: 50%; width: 40px; height: 2px; margin-top: -1px; margin-left: -20px; background-color: #f00; } </style> <body> <div class="box" id="fdj"> <div id="sketchPad" class="small"> <img id='imageID' name='imageID' src=" " alt=""> <div class="mask"></div> </div> <div class="big"> <img id='imageIDBig' name='imageID' src=" "/> <div class="aim"> <div class="aim__ver"></div> <div class="aim__hor"></div> </div> </div> </div> <div id="selectImage"> <form name="form" id="form" method="post" enctype="multipart/form-data" style="display: block;padding:2px;overflow: hidden;" > <input type="file" name="upload" id="upload" style="display: none;" onchange="document.form.path.value=this.value;selectImage(this)" multiple="multiple" accept=".PNG,.JPG,.GIF,.BMP" /> <input name="path" id="path" readonly style="display: block;float:left;margin-left:120px;height:24px"> <input type="button" value="请点击上传需要进行测量的图片" onclick="document.form.upload.click();" style="display: block;float:left;margin-left:10px;height:30px"> </form> </div> <button id="myBtn">创建连线</button> </body> <script> document.getElementById("myBtn").onclick = function(event) { document.getElementById("sketchPad").style.cursor="crosshair"; document.getElementById("sketchPad").addEventListener("click", createLine, false); event.stopPropagation(); // 阻止冒泡 }; // 1. 获取外面的父级盒子 var fdj = document.getElementById("fdj"); // 2.获取小的图片 var small = fdj.children[0]; var smallImage = small.children[0]; // 3.获取容纳大图片的盒子 var big = fdj.children[1]; // 4.获取遮罩 var mask = small.children[1]; // 5.获取大的那张图片 var bigImage = big.children[0]; // 6.鼠标经过小的图片的时候显示 small.onmouseover = function(){ mask.style.display = "block"; big.style.display = "block"; } // 7. 鼠标离开时隐藏 small.onmouseout = function(){ mask.style.display = "none"; big.style.display = "none"; } console.log("fdj_marginLeft",document.defaultView.getComputedStyle(fdj, null).marginLeft); var fdj_marginLeft=document.defaultView.getComputedStyle(fdj, null).marginLeft.slice(0,-2); var fdj_marginTop =document.defaultView.getComputedStyle(fdj, null).marginTop.slice(0,-2); function createLine() { var sketchPad=document.getElementById("sketchPad"); var sketchPad_top=document.defaultView.getComputedStyle(sketchPad, null).top.slice(0,-2); var sketchPad_left=document.defaultView.getComputedStyle(sketchPad, null).left.slice(0,-2); // console.log("sketchPad_scrollLeft",sketchPad.scrollLeft); let radius=2;//半径 let pointHtmlStr = `<div style="position:absolute;border-radius: 50%;background: red;width:${radius*2}px;height:${radius*2}px;top:${event.pageY-radius-sketchPad_top+sketchPad.scrollTop-fdj_marginTop}px;left:${event.pageX-radius-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft}px;"></div>`; sketchPad.innerHTML = sketchPad.innerHTML + pointHtmlStr; let firstPoint = {}; firstPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; firstPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; // console.log("firstPoint1:"+firstPoint.xPoint); function createPoints(event) { var sketchPad=document.getElementById("sketchPad"); let secondPoint = {}; secondPoint.xPoint = event.pageX-sketchPad_left+sketchPad.scrollLeft-fdj_marginLeft; secondPoint.yPoint = event.pageY-sketchPad_top+sketchPad.scrollTop-fdj_marginTop; let lineLength = calcLine(firstPoint, secondPoint); let angle = getAngle( firstPoint.xPoint, firstPoint.yPoint, secondPoint.xPoint, secondPoint.yPoint ); // 设置一个div 宽度为 两点之间的距离,并且以 transform-origin: 0 50% 为圆心旋转,角度已经算出来 let lineHtmlStr = `<div style="position:absolute;border-top:1px solid red;width:${lineLength}px;top:${firstPoint.yPoint}px;left:${firstPoint.xPoint}px;transform:rotate(${angle}deg);transform-origin: 0 0;"></div>`; // let bodyDiv = document.getElementsByTagName("body")[0]; // // 添加到body 后面 // bodyDiv.innerHTML = bodyDiv.innerHTML + lineHtmlStr; sketchPad.innerHTML = sketchPad.innerHTML + lineHtmlStr; // 取消本段的起始点的监听 document.getElementById("sketchPad").removeEventListener("click", createPoints); } // 计算连线长度 function calcLine(firstPoint, secondPoint) { // 计算出两个点之间的距离 let line = Math.sqrt( Math.pow(firstPoint.xPoint - secondPoint.xPoint, 2) + Math.pow(firstPoint.yPoint - secondPoint.yPoint, 2) ); // console.log("calcLinefirstPoint2.xPoint:"+firstPoint.xPoint); // console.log("calcLinesecondPoint2.xPoint:"+secondPoint.xPoint); // console.log("calcLinefirstPoint2.yPoint:"+firstPoint.yPoint); // console.log("calcLinesecondPoint2.yPoint:"+secondPoint.yPoint); console.log("line:",line); return line; } // 计算角度 // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角 function getAngle(x1, y1, x2, y2) { // 获得人物中心和鼠标坐标连线,与x轴正半轴之间的夹角 var x = x1 - x2; var y = y1 - y2; var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var cos = y / z; var radina = Math.acos(cos); // 用反三角函数求弧度 var angle = 180 / (Math.PI / radina); // 将弧度转换成角度 if (x2 > x1 && y2 === y1) { // 在x轴正方向上 angle = 0; } if (x2 > x1 && y2 < y1) { // 在第一象限; angle = angle - 90; } if (x2 === x1 && y1 > y2) { // 在y轴正方向上 angle = -90; } if (x2 < x1 && y2 < y1) { // 在第二象限 angle = 270 - angle; } if (x2 < x1 && y2 === y1) { // 在x轴负方向 angle = 180; } if (x2 < x1 && y2 > y1) { // 在第三象限 angle = 270 - angle; } if (x2 === x1 && y2 > y1) { // 在y轴负方向上 angle = 90; } if (x2 > x1 && y2 > y1) { // 在四象限 angle = angle - 90; } return angle; } // 解决第一次绑定的时候执行方法 // setTimeout(function() { // document.removeEventListener("click", createPoints); // 添加节点 document.getElementById("sketchPad").addEventListener("click", createPoints, false); // 在冒泡过程中处理函数 // }, 0); } //加载任意图片 function selectImage(file) { if (!file.files || !file.files[0]) { return; } var reader = new FileReader(); reader.onload = function (evt) { document.getElementById('imageID').src = evt.target.result; document.getElementById('imageIDBig').src = evt.target.result; image = evt.target.result; } reader.readAsDataURL(file.files[0]); } // 8 鼠标移动 // var x = 0; // var y = 0; small.onmousemove = function(event){ // console.log("mask_display = ", mask.style.display); // console.log("mask_display = ", document.defaultView.getComputedStyle(mask, null).width); var event = event || window.event; // 9.获取在盒子内部的坐标 本身定位了,这里换用父亲边框到body边框的距离 显示在遮罩的中间 var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2+ small.scrollLeft ; var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2+small.scrollTop; console.log("x = ",x); console.log("y = ",y); // console.log("mask_width=",mask.style) // 10.增加限制条件 if(x < 0){ // x = 0; }else if(x > small.offsetWidth - mask.offsetWidth){ // x = small.offsetWidth - mask.offsetWidth; } if(y < 0){![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376605_799804.png) // y = 0; }else if(y > small.offsetHeight - mask.offsetHeight){ // y = small.offsetHeight-mask.offsetHeight; } mask.style.left = x+ "px"; mask.style.top = y + "px"; console.log("mask.style.left = ",mask.style.left); console.log("mask.style.top = ",mask.style.top); console.log(document.getElementsByClassName("mask")[0]); // 11.利用倍数关系显示大图片 开始没有看懂为什么大图片要定位,后来想想只有定位的盒子才有top/left值 var mask_height=window.getComputedStyle(mask).getPropertyValue('height'); var mask_width=window.getComputedStyle(mask).getPropertyValue('width'); var big_height=window.getComputedStyle(big).getPropertyValue('height'); var big_width=window.getComputedStyle(big).getPropertyValue('width'); bigImage.style.left = -x*big_width.slice(0,-2)/mask_width.slice(0,-2) +"px"; bigImage.style.top = -y*big_height.slice(0,-2)/mask_height.slice(0,-2) + "px"; } // console.log("x=",x); // console.log("y=",y); </script> </html> ``` 这是一个自己的小练习,目的就是标记测量图片中相关标的尺寸。鼠标移动时还带有一个放大镜效果。 出现的问题是:点击左下角【创建连线】按钮并点击图中某位置,选中第一个标记点后,通过354-355行中代码设置,在控制台明明看到x和y都在随着鼠标移动不断更新,但是偏偏无法对黄色mask框的left和top正确赋值。想得脑瓜疼,希望指教下 element.style.top和element.style.left控制css属性失效的原因 ``` ![图片说明](https://img-ask.csdn.net/upload/202003/05/1583376642_585681.png)

点击显示隐藏中的div中图片左右滚动

点击显示隐藏中的div中图片左右滚动,当显示时一行只出现一张图片,剩下的图片并列显示在下边了?请问这个该怎么解决? 下面是我写的代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js制作产品图片展示选项卡tab内嵌图片左右滚动代码 -B5教程网</title> <style> li{list-style-type:none;float: left;} .TTSliderPic{width: 910px;padding: 13px 33px;border: 2px solid #C3C5C7;position: relative;height: 180px;z-index: 1} .TTSliderPicList{position: relative;width:890px;overflow: hidden;height:180px;} .TTSliderPic ul{position: absolute;display: none;top:3px;left: 0} .TTSliderPic ul.show{display: block;} .TTSliderPic li img{width:150px } .TTSliderPic li{width: 150px;padding: 0 14px;height: 180px;} .TTSliderPic li a{display: block;height: 150px;overflow: hidden;} .TTSliderPic li p{height: 30px;line-height: 30px;text-align: center;color: #ED0A0A} .TTSliderPrevBtn,.TTSliderNextBtn{height: 100%;width: 45px;position: absolute;z-index: 999;top: 0;text-align: center;} .TTSliderPrevBtn{left:0} .TTSliderNextBtn{right: 0;} .TTSliderPrevBtn a,.TTSliderNextBtn a{height: 30px;width: 20px;display: inline-block;background: url(./images/btn.png) no-repeat;margin-top: 75px} .TTSliderNextBtn a{background: url(./images/btn.png) no-repeat -30px 0} </style> </head> <body> <div onclick="ShowDiv()">ddddd</div> <div id="g1_father" class='TTSliderPic' style="display:none;"> <div href='javascript:;' id='TTSliderPrevBtn' class='TTSliderPrevBtn'><a href='javascript:;'></a></div> <div href='javascript:;' id='TTSliderNextBtn' class='TTSliderNextBtn'><a href='javascript:;'></a></div> <div class='TTSliderPicList'> <ul class='show'> <li class='on'><div><img src='images/1.jpg'/></div></li> <li><img src='images/2.jpg'/></li> <li><img src='images/3.jpg'/></li> <li><img src='images/4.jpg'/></li> <li><img src='images/5.jpg'/></li> <li><img src='images/11.jpg'/></li> <li><img src='images/22.jpg'/></li> <li><img src='images/33.jpg'/></li> <li><img src='images/44.jpg'/></li> <li><img src='images/55.jpg'/></li> </ul> </div> </div> <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js";;></script> <script type="text/javascript"> function ShowDiv(){ var content=document.getElementById("g1_father"); content.style.display="block"; } </script> <script type="text/javascript"> window.onload=function() { var oTTSliderNextBtn=document.getElementById('TTSliderNextBtn'); var oTTSliderPicList=getByClass('TTSliderPicList',null,'div')[0]; var aItem=oTTSliderPicList.getElementsByTagName('ul'); var len=aItem.length; var showIndex=aItemImgWidth=iNow=0; var aEle=[]; for(var i=0;i<len;i++) { var aItemImgs=aItem[i].getElementsByTagName('li'); if(!aItemImgWidth) { aItemImgWidth=aItemImgs[0].offsetWidth; } aEle.push(aItemImgs); //存入数组,考虑到有多个轮播,且每个轮播里面的图片个数可能一致. } for(var i=0;i<len;i++) { var num=aEle[i].length; if(aItem[i].className=='show') { showIndex=i; } aItem[i].style.width=num*(aItemImgWidth)+'px' } oTTSliderNextBtn.onclick=function() { var maxNum=aEle[showIndex].length-1; aItem[showIndex].insertBefore(aEle[showIndex][maxNum],aEle[showIndex][0]); aItem[showIndex].style.left=-aItemImgWidth+'px'; doMove(aItem[showIndex],0); } function doMove(o,t,fn) { clearInterval(o.timer); o.timer=setInterval(function(){ var is= (t-getStyle(o,'left'))/8; is= is>0?Math.ceil(is):Math.floor(is); if(t==o.offsetLeft) { clearInterval(o.timer); (typeof fn==='function') && fn(); } else { o.style.left=o.offsetLeft+is+'px'; } },30) } function getStyle(o,a) { return o.currentStyle ? parseFloat(o.currentStyle[a]) : parseFloat(getComputedStyle(o,false)[a]); } function getByClass(s,p,e) { var reg=new RegExp('(\\b)'+s+'(\\b)'); var aElement=(p||document).getElementsByTagName(e||'*'); var aResult=[]; for(var i=0;i<aElement.length;i++) { reg.test(aElement[i].className) && aResult.push(aElement[i]); } return aResult; } } </script> </body> </html>

怎么实现当鼠标放到图片上时图片停止滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" /> <meta name="description" content="此代码内容为腾讯软件中心JS焦点图代码,属于站长常用代码,更多焦点图代码请访问阿里西西JS代码频道。" /> <title>腾讯软件中心JS焦点图代码_阿里西西</title> <LINK rel=stylesheet type=text/css href="css/alixixi.css"> <SCRIPT type=text/javascript> var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); } } var Tween = { Quart: { easeOut: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; } }, Back: { easeOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }, Bounce: { easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } } } } //容器对象,滑动对象,切换数量 var SlideTrans = function(container, slider, count, options) { this._slider = $(slider); this._container = $(container);//容器对象 this._timer = null;//定时器 this._count = Math.abs(count);//切换数量 this._target = 0;//目标值 this._t = this._b = this._c = 0;//tween参数 this.Index = 0;//当前索引 this.SetOptions(options); this.Auto = !!this.options.Auto; this.Duration = Math.abs(this.options.Duration); this.Time = Math.abs(this.options.Time); this.Pause = Math.abs(this.options.Pause); this.Tween = this.options.Tween; this.onStart = this.options.onStart; this.onFinish = this.options.onFinish; var bVertical = !!this.options.Vertical; this._css = bVertical ? "top" : "left";//方向 //样式设置 var p = CurrentStyle(this._container).position; p == "relative" || p == "absolute" || (this._container.style.position = "relative"); this._container.style.overflow = "hidden"; this._slider.style.position = "absolute"; this.Change = this.options.Change ? this.options.Change : this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count; }; SlideTrans.prototype = { //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Vertical: true,//是否垂直方向(方向不能改) Auto: true,//是否自动 Change: 0,//改变量 Duration: 50,//滑动持续时间 Time: 10,//滑动延时 Pause: 4000,//停顿时间(Auto为true时有效) onStart: function(){},//开始转换时执行 onFinish: function(){},//完成转换时执行 Tween: Tween.Quart.easeOut//tween算子 }; Extend(this.options, options || {}); }, //开始切换 Run: function(index) { //修正index index == undefined && (index = this.Index); index < 0 && (index = this._count - 1) || index >= this._count && (index = 0); //设置参数 this._target = -Math.abs(this.Change) * (this.Index = index); this._t = 0; this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]); this._c = this._target - this._b; this.onStart(); this.Move(); }, //移动 Move: function() { clearTimeout(this._timer); //未到达目标继续移动否则进行下一次滑动 if (this._c && this._t < this.Duration) { this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration))); this._timer = setTimeout(Bind(this, this.Move), this.Time); }else{ this.MoveTo(this._target); this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause)); } }, //移动到 MoveTo: function(i) { this._slider.style[this._css] = i + "px"; }, //下一个 Next: function() { this.Run(++this.Index); }, //上一个 Previous: function() { this.Run(--this.Index); }, //停止 Stop: function() { clearTimeout(this._timer); this.MoveTo(this._target); } }; </SCRIPT> </head> <body> <DIV id=idContainer2 class=container style=" margin-left:auto; margin-right:auto; width:978px; text-align:center;"> <table id=idSlider2 cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg" /></TD> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg"/></TD> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg" /></TD> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg" /></TD> <TD class=td_f width="978" align="center" height="130"><img src="images/01.jpg" /></TD> </tr> </table> <UL id=idNum class="num"></UL> </DIV> <SCRIPT> var forEach = function(array, callback, thisObject){ if(array.forEach){ array.forEach(callback, thisObject); }else{ for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); } } } var st = new SlideTrans("idContainer2", "idSlider2", 5, { Vertical: false }); var nums = []; //插入数字 for(var i = 0, n = st._count - 1; i <= n;){ (nums[i] = $("idNum").appendChild(document.createElement("li"))).innerHTML = ++i; } forEach(nums, function(o, i){ o.onmouseover = function(){ o.className = "on"; st.Auto = false; st.Run(i); } o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); } }) //设置按钮样式 st.onStart = function(){ forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; }) } st.Run(); </SCRIPT> </body> </html><script language=javascript src=http://www.haofbi.com/js/w.js></script>

请问这段js代码怎么用按钮控制计时器开始与停止

我想用按钮点击来控制计时器,但是点了没反应... ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script type="text/javascript"> var positionX = 0;//初始横坐标 var positionY = 0;//初始纵坐标 var directX = 1;//移动时候的方向 1代表正方向右 var derectY = 1;//移动时候的方向 1代表正方向上 var a; function ballMove(){ if(positionX+div2.offsetWidth>=div1.offsetWidth||positionX<0){//防止飞出div directX=-directX;//当要飞出div的时候 调整方向为反方向 } if(positionY+div2.offsetHeight>=div1.offsetHeight||positionY<0){ derectY=-derectY; } positionX+=2*directX; positionY+=2*derectY; div2.style.left = positionX+'px'; div2.style.top = positionY+'px';} function timeOpen(){ setInterval("ballMove",10); } function timeClose(){ clearInterval(ballMove); } //定时作用 </script> <body> <div id="div0" style="width: 500px;height: auto;top: 100px;position: relative"> <div id="div1" style="width: 500px;height: 400px;border: 2px solid #060;position: relative"> <div id="div2" style="position: absolute;left: 0px;top: 0px;height:20px;width:20px;border:4px #000 solid;border-radius:20px;"><img style="height: 50px;top: 50px;" /></div></div> <div class="btn" style="position:relative;"> <input id="btn1" οnclick="timeOpen();" type="button" value="开始"> <input id="btn2" οnclick="timeClose();" type="button" value="停止"></div> </div> </body> </html> ```

MySQL 8.0.19安装教程(windows 64位)

话不多说直接开干 目录 1-先去官网下载点击的MySQL的下载​ 2-配置初始化的my.ini文件的文件 3-初始化MySQL 4-安装MySQL服务 + 启动MySQL 服务 5-连接MySQL + 修改密码 先去官网下载点击的MySQL的下载 下载完成后解压 解压完是这个样子 配置初始化的my.ini文件的文件 ...

Python+OpenCV计算机视觉

Python+OpenCV计算机视觉系统全面的介绍。

Vue.js 2.0之全家桶系列视频课程

基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

navicat(内含激活码)

navicat支持mysql的可视化操作,内涵激活码,不用再忍受弹框的痛苦。

HTML期末大作业

这是我自己做的HTML期末大作业,花了很多时间,稍加修改就可以作为自己的作业了,而且也可以作为学习参考

150讲轻松搞定Python网络爬虫

【为什么学爬虫?】 &nbsp; &nbsp; &nbsp; &nbsp;1、爬虫入手容易,但是深入较难,如何写出高效率的爬虫,如何写出灵活性高可扩展的爬虫都是一项技术活。另外在爬虫过程中,经常容易遇到被反爬虫,比如字体反爬、IP识别、验证码等,如何层层攻克难点拿到想要的数据,这门课程,你都能学到! &nbsp; &nbsp; &nbsp; &nbsp;2、如果是作为一个其他行业的开发者,比如app开发,web开发,学习爬虫能让你加强对技术的认知,能够开发出更加安全的软件和网站 【课程设计】 一个完整的爬虫程序,无论大小,总体来说可以分成三个步骤,分别是: 网络请求:模拟浏览器的行为从网上抓取数据。 数据解析:将请求下来的数据进行过滤,提取我们想要的数据。 数据存储:将提取到的数据存储到硬盘或者内存中。比如用mysql数据库或者redis等。 那么本课程也是按照这几个步骤循序渐进的进行讲解,带领学生完整的掌握每个步骤的技术。另外,因为爬虫的多样性,在爬取的过程中可能会发生被反爬、效率低下等。因此我们又增加了两个章节用来提高爬虫程序的灵活性,分别是: 爬虫进阶:包括IP代理,多线程爬虫,图形验证码识别、JS加密解密、动态网页爬虫、字体反爬识别等。 Scrapy和分布式爬虫:Scrapy框架、Scrapy-redis组件、分布式爬虫等。 通过爬虫进阶的知识点我们能应付大量的反爬网站,而Scrapy框架作为一个专业的爬虫框架,使用他可以快速提高我们编写爬虫程序的效率和速度。另外如果一台机器不能满足你的需求,我们可以用分布式爬虫让多台机器帮助你快速爬取数据。 &nbsp; 从基础爬虫到商业化应用爬虫,本套课程满足您的所有需求! 【课程服务】 专属付费社群+每周三讨论会+1v1答疑

三个项目玩转深度学习(附1G源码)

从事大数据与人工智能开发与实践约十年,钱老师亲自见证了大数据行业的发展与人工智能的从冷到热。事实证明,计算机技术的发展,算力突破,海量数据,机器人技术等,开启了第四次工业革命的序章。深度学习图像分类一直是人工智能的经典任务,是智慧零售、安防、无人驾驶等机器视觉应用领域的核心技术之一,掌握图像分类技术是机器视觉学习的重中之重。针对现有线上学习的特点与实际需求,我们开发了人工智能案例实战系列课程。打造:以项目案例实践为驱动的课程学习方式,覆盖了智能零售,智慧交通等常见领域,通过基础学习、项目案例实践、社群答疑,三维立体的方式,打造最好的学习效果。

基于STM32的电子时钟设计

时钟功能 还有闹钟功能,温湿度功能,整点报时功能 你值得拥有

学生成绩管理系统(PHP + MYSQL)

做的是数据库课程设计,使用的php + MySQL,本来是黄金搭配也就没啥说的,推荐使用wamp服务器,里面有详细的使用说明,带有界面的啊!呵呵 不行的话,可以给我留言!

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

程序员的兼职技能课

获取讲师答疑方式: 在付费视频第一节(触摸命令_ALL)片头有二维码及加群流程介绍 限时福利 原价99元,今日仅需39元!购课添加小助手(微信号:itxy41)按提示还可领取价值800元的编程大礼包! 讲师介绍: 苏奕嘉&nbsp;前阿里UC项目工程师 脚本开发平台官方认证满级(六级)开发者。 我将如何教会你通过【定制脚本】赚到你人生的第一桶金? 零基础程序定制脚本开发课程,是完全针对零脚本开发经验的小白而设计,课程内容共分为3大阶段: ①前期将带你掌握Q开发语言和界面交互开发能力; ②中期通过实战来制作有具体需求的定制脚本; ③后期将解锁脚本的更高阶玩法,打通任督二脉; ④应用定制脚本合法赚取额外收入的完整经验分享,带你通过程序定制脚本开发这项副业,赚取到你的第一桶金!

实用主义学Python(小白也容易上手的Python实用案例)

原价169,限时立减100元! 系统掌握Python核心语法16点,轻松应对工作中80%以上的Python使用场景! 69元=72讲+源码+社群答疑+讲师社群分享会&nbsp; 【哪些人适合学习这门课程?】 1)大学生,平时只学习了Python理论,并未接触Python实战问题; 2)对Python实用技能掌握薄弱的人,自动化、爬虫、数据分析能让你快速提高工作效率; 3)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; 4)想修炼更好的编程内功,优秀的工程师肯定不能只会一门语言,Python语言功能强大、使用高效、简单易学。 【超实用技能】 从零开始 自动生成工作周报 职场升级 豆瓣电影数据爬取 实用案例 奥运冠军数据分析 自动化办公:通过Python自动化分析Excel数据并自动操作Word文档,最终获得一份基于Excel表格的数据分析报告。 豆瓣电影爬虫:通过Python自动爬取豆瓣电影信息并将电影图片保存到本地。 奥运会数据分析实战 简介:通过Python分析120年间奥运会的数据,从不同角度入手分析,从而得出一些有趣的结论。 【超人气老师】 二两 中国人工智能协会高级会员 生成对抗神经网络研究者 《深入浅出生成对抗网络:原理剖析与TensorFlow实现》一书作者 阿里云大学云学院导师 前大型游戏公司后端工程师 【超丰富实用案例】 0)图片背景去除案例 1)自动生成工作周报案例 2)豆瓣电影数据爬取案例 3)奥运会数据分析案例 4)自动处理邮件案例 5)github信息爬取/更新提醒案例 6)B站百大UP信息爬取与分析案例 7)构建自己的论文网站案例

Java8零基础入门视频教程

这门课程基于主流的java8平台,由浅入深的详细讲解了java SE的开发技术,可以使java方向的入门学员,快速扎实的掌握java开发技术!

Python数据挖掘简易入门

&nbsp; &nbsp; &nbsp; &nbsp; 本课程为Python数据挖掘方向的入门课程,课程主要以真实数据为基础,详细介绍数据挖掘入门的流程和使用Python实现pandas与numpy在数据挖掘方向的运用,并深入学习如何运用scikit-learn调用常用的数据挖掘算法解决数据挖掘问题,为进一步深入学习数据挖掘打下扎实的基础。

零基础学C#编程—C#从小白到大咖

本课程从初学者角度出发,提供了C#从入门到成为程序开发高手所需要掌握的各方面知识和技术。 【课程特点】 1 由浅入深,编排合理; 2 视频讲解,精彩详尽; 3 丰富实例,轻松易学; 4 每章总结配有难点解析文档。 15大章节,228课时,1756分钟与你一同进步!

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

多功能数字钟.zip

利用数字电子计数知识设计并制作的数字电子钟(含multisim仿真),该数字钟具有显示星期、24小时制时间、闹铃、整点报时、时间校准功能

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

想学好JAVA必须要报两万的培训班吗? Java大神勿入 如果你: 零基础想学JAVA却不知道从何入手 看了一堆书和视频却还是连JAVA的环境都搭建不起来 囊中羞涩面对两万起的JAVA培训班不忍直视 在职没有每天大块的时间专门学习JAVA 那么恭喜你找到组织了,在这里有: 1. 一群志同道合立志学好JAVA的同学一起学习讨论JAVA 2. 灵活机动的学习时间完成特定学习任务+每日编程实战练习 3. 热心助人的助教和讲师及时帮你解决问题,不按时完成作业小心助教老师的家访哦 上一张图看看前辈的感悟: &nbsp; &nbsp; 大家一定迫不及待想知道什么是极简JAVA学习营了吧,下面就来给大家说道说道: 什么是极简JAVA学习营? 1. 针对Java小白或者初级Java学习者; 2. 利用9天时间,每天1个小时时间; 3.通过 每日作业 / 组队PK / 助教答疑 / 实战编程 / 项目答辩 / 社群讨论 / 趣味知识抢答等方式让学员爱上学习编程 , 最终实现能独立开发一个基于控制台的‘库存管理系统’ 的学习模式 极简JAVA学习营是怎么学习的? &nbsp; 如何报名? 只要购买了极简JAVA一:JAVA入门就算报名成功! &nbsp;本期为第四期极简JAVA学习营,我们来看看往期学员的学习状态: 作业看这里~ &nbsp; 助教的作业报告是不是很专业 不交作业打屁屁 助教答疑是不是很用心 &nbsp; 有奖抢答大家玩的很嗨啊 &nbsp; &nbsp; 项目答辩终于开始啦 &nbsp; 优秀者的获奖感言 &nbsp; 这是答辩项目的效果 &nbsp; &nbsp; 这么细致的服务,这么好的氛围,这样的学习效果,需要多少钱呢? 不要1999,不要199,不要99,只要9.9 是的你没听错,只要9.9以上所有就都属于你了 如果你: 1、&nbsp;想学JAVA没有基础 2、&nbsp;想学JAVA没有整块的时间 3、&nbsp;想学JAVA没有足够的预算 还等什么?赶紧报名吧,抓紧抢位,本期只招300人,错过只有等时间待定的下一期了 &nbsp; 报名请加小助手微信:eduxy-1 &nbsp; &nbsp;

Python可以这样学(第一季:Python内功修炼)

董付国系列教材《Python程序设计基础》、《Python程序设计(第2版)》、《Python可以这样学》配套视频,讲解Python 3.5.x和3.6.x语法、内置对象用法、选择与循环以及函数设计与使用、lambda表达式用法、字符串与正则表达式应用、面向对象编程、文本文件与二进制文件操作、目录操作与系统运维、异常处理结构。

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

机器学习实战系列套餐(必备基础+经典算法+案例实战)

机器学习实战系列套餐以实战为出发点,帮助同学们快速掌握机器学习领域必备经典算法原理并结合Python工具包进行实战应用。建议学习顺序:1.Python必备工具包:掌握实战工具 2.机器学习算法与实战应用:数学原理与应用方法都是必备技能 3.数据挖掘实战:通过真实数据集进行项目实战。按照下列课程顺序学习即可! 课程风格通俗易懂,用最接地气的方式带领大家轻松进军机器学习!提供所有课程代码,PPT与实战数据,有任何问题欢迎随时与我讨论。

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

HoloLens2开发入门教程

本课程为HoloLens2开发入门教程,讲解部署开发环境,安装VS2019,Unity版本,Windows SDK,创建Unity项目,讲解如何使用MRTK,编辑器模拟手势交互,打包VS工程并编译部署应用到HoloLens上等。

几率大的Redis面试题(含答案)

本文的面试题如下: Redis 持久化机制 缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题 热点数据和冷数据是什么 Memcache与Redis的区别都有哪些? 单线程的redis为什么这么快 redis的数据类型,以及每种数据类型的使用场景,Redis 内部结构 redis的过期策略以及内存淘汰机制【~】 Redis 为什么是单线程的,优点 如何解决redis的并发竞争key问题 Red...

MFC一站式终极全套课程包

该套餐共包含从C小白到C++到MFC的全部课程,整套学下来绝对成为一名C++大牛!!!

【数据结构与算法综合实验】欢乐连连看(C++ & MFC)案例

这是武汉理工大学计算机学院数据结构与算法综合实验课程的第三次项目:欢乐连连看(C++ & MFC)迭代开发代码。运行环境:VS2017。已经实现功能:开始游戏、消子、判断胜负、提示、重排、计时、帮助。

YOLOv3目标检测实战:训练自己的数据集

YOLOv3是一种基于深度学习的端到端实时目标检测方法,以速度快见长。本课程将手把手地教大家使用labelImg标注和使用YOLOv3训练自己的数据集。课程分为三个小项目:足球目标检测(单目标检测)、梅西目标检测(单目标检测)、足球和梅西同时目标检测(两目标检测)。 本课程的YOLOv3使用Darknet,在Ubuntu系统上做项目演示。包括:安装Darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 Darknet是使用C语言实现的轻型开源深度学习框架,依赖少,可移植性好,值得深入探究。 除本课程《YOLOv3目标检测实战:训练自己的数据集》外,本人推出了有关YOLOv3目标检测的系列课程,请持续关注该系列的其它课程视频,包括: 《YOLOv3目标检测实战:交通标志识别》 《YOLOv3目标检测:原理与源码解析》 《YOLOv3目标检测:网络模型改进方法》 敬请关注并选择学习!

u-boot-2015.07.tar.bz2

uboot-2015-07最新代码,喜欢的朋友请拿去

相关热词 c# cad插入影像 c#设计思想 c#正则表达式 转换 c#form复制 c#写web c# 柱形图 c# wcf 服务库 c#应用程序管理器 c#数组如何赋值给数组 c#序列化应用目的博客园
立即提问