Heim > Web-Frontend > CSS-Tutorial > Einführung in Kapselungsmethoden, die häufig in Web-Frontends verwendet werden (Codebeispiele)

Einführung in Kapselungsmethoden, die häufig in Web-Frontends verwendet werden (Codebeispiele)

不言
Freigeben: 2018-10-15 15:08:28
nach vorne
2784 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Einführung in Kapselungsmethoden (Codebeispiele), die häufig in Web-Frontends verwendet werden. Ich hoffe, dass er Ihnen als Referenz dienen wird.

1. Lupe

//页面加载完毕后执行
window.onload = function () {
var oDemo = document.getElementById('demo');
var oMark = document.getElementById('mark');
var FloatBox = document.getElementById('float-box');
var SmallBox = document.getElementById("small-box");
var bigBox = document.getElementById('big-box');
var bigImg = bigBox.getElementsByTagName('img')[0];
oMark.onmouseover = function (){
FloatBox.style.display = "block";
bigBox.style.display = "block";
}
oMark.onmouseout = function (){
FloatBox.style.display = "none";
bigBox.style.display = "none";
}
oMark.onmousemove = function (ev){
var ev = ev || window.event;
var left = ev.clientX - oDemo.offsetLeft - SmallBox.offsetLeft - FloatBox.offsetWidth / 2;
var top = ev.clientY - oDemo.offsetTop - SmallBox.offsetTop - FloatBox.offsetHeight / 2;
if(left < 10){
left = 0;

}else if(left >= oMark.offsetWidth - FloatBox.offsetWidth - 10){
left = oMark.offsetWidth - FloatBox.offsetWidth;
}
if(top < 10){
top = 0;
}else if(top >= oMark.offsetHeight - FloatBox.offsetHeight - 10){
top = oMark.offsetHeight - FloatBox.offsetHeight;
}
FloatBox.style.left = left + "px";
FloatBox.style.top = top + "px";
var scaleX = left / (oMark.offsetWidth - FloatBox.offsetWidth);
var scaleY = top / (oMark.offsetHeight - FloatBox.offsetHeight);
bigImg.style.left = -scaleX * (bigImg.offsetWidth - bigBox.offsetWidth) + "px";
bigImg.style.top = -scaleY * (bigImg.offsetHeight - bigBox.offsetHeight) + "px";

}
}
Nach dem Login kopieren

2. JSONP

function fn1(data){
var html = '';
var oUl = document.getElementsByTagName('ul')[0];
console.log(data);
if(data.total != -1){
for(var i=0; i<data.books.length; i++){
html += &#39;<li><h2>'+ data.books[i].title +'</h2> <span>'+ data.books[i].author_intro +'</span><img src="&#39;+ data.books[i].image +&#39;" /><p>'+ data.books[i].summary +'</p> <p><em>' + data.books[i].publisher + '</em></p></li>';}
oUl.innerHTML = html;
            }else{
                document.body.innerHTML+='<h2>亲~~ 没有数据哦~~~</h2>';
            }
            
        } 
window.onload = function (){
var oBtn = document.getElementById('btn');
var iNow = 0;
oBtn.onclick = function (){
//动态添加 script 标签   加载URL地址 后传入 callback=fn1 输出一个函数, 在上面则定义好这个函数, 接受一个data 就是资源  json类型,循环输出, 可先console.log(dara) 查看数据
var oScript = document.createElement('script');         
oScript.src="https://api.douban.com/v2/book/search?q=%E6%A0%A1%E5%9B%AD&count=10&start="+ iNow +"&callback=fn1";
document.head.appendChild(oScript);
// 点击一次+10,从多少开始获取
iNow += 10;       
}           
}
Nach dem Login kopieren

3 Bereich, einschließlich unterer und oberer Wert 6. Tiefe Kopie

function randomFrom(lowerValue,upperValue)
{
    return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
//如获取1-100之间的随机数
console.log(randomFrom(1,100));
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in Kapselungsmethoden, die häufig in Web-Frontends verwendet werden (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage