一些值得收藏的JavaScript经典实例-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

一些值得收藏的JavaScript经典实例

尚

Jun 17, 2020 pm 04:27 PM

javascript

JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，本文就来为大家提供一些JavaScript经典实例，希望对大家有一定的帮助。

一些值得收藏的JavaScript经典实例

跨浏览器事件

跨浏览器添加事件

//跨浏览器添加事件
    function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }else if(obj.attachEvent){//IE
            obj.attchEvent(&#39;on&#39;+type,fn);
        }
    }

跨浏览器移除事件

//跨浏览器移除事件
function removeEvent(obj,type,fn){
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,false);
    }else if(obj.detachEvent){//兼容IE
        obj.detachEvent(&#39;on&#39;+type,fn);
    }
}

跨浏览器阻止默认行为

//跨浏览器阻止默认行为
    function preDef(ev){
        var e = ev || window.event;
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue =false;
        }
    }

跨浏览器获取目标对象

//跨浏览器获取目标对象
function getTarget(ev){
    if(ev.target){//w3c
        return ev.target;
    }else if(window.event.srcElement){//IE
        return window.event.srcElement;
    }
}

跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置，sp == scroll position
    function getSP(){
        return{
            top: document.documentElement.scrollTop || document.body.scrollTop,
            left : document.documentElement.scrollLeft || document.body.scrollLeft;
        }
    }

跨浏览器获取可视窗口大小

 //跨浏览器获取可视窗口大小
          function  getWindow () {
            if(typeof window.innerWidth !=&#39;undefined&#39;) {
                return{
                    width : window.innerWidth,
                    height : window.innerHeight
                }

            } else{
                return {
                    width : document.documentElement.clientWidth,
                    height : document.documentElement.clientHeight
                }
            }
        },

js 对象冒充

<script type = &#39;text/javascript&#39;>

    function Person(name , age){
        this.name = name ;
        this.age = age ;
        this.say = function (){
            return "name : "+ this.name + " age: "+this.age ;
        } ;
    }

    var o = new Object() ;//可以简化为Object()
    Person.call(o , "zhangsan" , 20) ;
    console.log(o.say() );//name : zhangsan age: 20
</script>

js 异步加载和同步加载

异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。
在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了：

(function() {
    var s = document.createElement(&#39;script&#39;);
    s.type = &#39;text/javascript&#39;;
    s.async = true;
    s.src = &#39;http://yourdomain.com/script.js&#39;;
    var x = document.getElementsByTagName(&#39;script&#39;)[0];
     x.parentNode.insertBefore(s, x);
})();

同步加载

平常默认用的都是同步加载。如：

<script src="http://yourdomain.com/script.js"></script>

同步模式又称阻塞模式，会阻止流览器的后续处理。停止了后续的文件的解析，执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。

通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。同步加载流程是瀑布模型，异步加载流程是并发模型。

js获取屏幕坐标

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <meta name="auther" content="fq" />
    <title>获取鼠标坐标</title>
</head>
<body>
<script type="text/javascript">
    function mousePosition(ev){
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop - document.body.clientTop
        };
    }
    function mouseMove(ev){
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        document.getElementById(&#39;xxx&#39;).value = mousePos.x;
        document.getElementById(&#39;yyy&#39;).value = mousePos.y;
    }
    document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>

注释：
1、documentElement 属性可返回文档的根节点。

2、scrollTop() 为滚动条向下移动的距离

3、document.documentElement.scrollTop 指的是滚动条的垂直坐标

4、document.documentElement.clientHeight 指的是浏览器可见区域高度

DTD已声明的情况下：

189f857547afbf737a6cbb41178b2b34

如果在页面中添加这行标记的话

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Firefox

document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop ==> 浏览器滚动部分高度
document.body.scrollTop ==>始终为0
document.documentElement.clientHeight ==>浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度

Chrome

document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop==> 始终为0
document.body.scrollTop==>浏览器滚动部分高度
document.documentElement.clientHeight ==> 浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度

js拖拽效果

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        #login{
            height: 100px;
            width: 100px;
            border: 1px solid black;
            position: relative;
            top:200px;
            left: 200px;
            background: red;
        }
</style>
</head>
<body>
<div id="login"></div>
<script type="text/javascript">
    var oDiv = document.getElementById("login");
    oDiv.onmousedown = function(e){
        var e = e || window.event;
        //window.event兼容IE,当事件发生时有效

        var diffX = e.clientX - oDiv.offsetLeft;
        //获取鼠标点击的位置到所选对象的边框的水平距离
        var diffY = e.clientY - oDiv.offsetTop;

        document.onmousemove = function(e){ 
        //需设为document对象才能作用于整个文档
            var e = e||window.event;
            oDiv.style.left = e.clientX - diffX + &#39;px&#39;;
            //style.left表示所选对象的边框到浏览器左侧距离
            oDiv.style.top = e.clientY -diffY + &#39;px&#39;;
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            //清除鼠标释放时的对象移动方法
            document.onmouseup = null;
        }
    }
</script>
</body> 
</html>

offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

js获取图片原始大小尺寸

var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("&lt;img/&gt;") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

js循环遍历数组

<script>  
       //循环遍历数组
       var animals = ["cat",&#39;dog&#39;,&#39;human&#39;,&#39;whale&#39;,&#39;seal&#39;];
       var animalString = "";
       for(var i = 0;i<animals.length;i++){
           animalString += animals[i] + " ";
       }
       alert(animalString);  //输出数组里的每个项
</script>

遍历二维数组

  <script>
        var arr=[[0,0,0,0,0,0],[0,0,1,0,0,0],[0,2,0,3,0,0],[0,0,0,0,0,0]];
        for(var i=0;i<arr.length;i++){
         //遍历每一个具体的值
         for(var j=0;j<arr[i].length;j++){
                    document.writeln(arr[i][j]+" ");
              }
            document.writeln("<br/>");
         }
</script>

阻止表单重复提交

有两种方法可以解决：一是提交之后，立刻禁用点击按钮；第二种就是提交之后取消后续的表单提交操作。

document.getElementById("btn").disabled = true;//第一次提交后，将按钮禁用

这种方式只能用于通过提交按钮防止重复提交，还可以使用如下方式：

var flag = false;//设置一个监听变量
if(flag ==true)return;//退出事件
flag = true;//表示提交过一次了

字符串部分

在字符串中查找子字符串

<script type="text/javascript">
    var test = &#39;Welcome to my blog!&#39;;
    var value = &#39;blog&#39;;
    var subValue = test.indexOf(value);
    console.log(subValue);//14,子字符串的索引
</script>

Number和Math部分

数字可以是一个直接量，也可以是一个对象，但是Math对象不同，他没有构造函数，并且其所有的属性和方法都是直接通过这个对象来访问的

把十进制转化为一个十六进制值

var num = 255;
console.log(num.toString(16));//ff

js中，十进制数字以0x开头，八进制数字总是以0开头

随机产生颜色

<script type="text/javascript">
    function randomVal(val){
        return Math.floor(Math.random()*(val + 1));
    }

    function randomColor(){
        return &#39;rgb(&#39; + randomVal(255) + &#39;,&#39; + randomVal(255) + &#39;,&#39; + randomVal(255) + &#39;)&#39;;
    }
</script>

目前，所有浏览器都支持RGB表示法和十六进制表示法，除了IE7，它只支持十六进制表示法

在角度和弧度之间转换

var rad = degrees*(Math.PI/180);
var degrees = rad*(180/Math.PI);

数组部分

创建多维数组

<script type="text/javascript">
    var arrayLength = 3;//设置数组长度

    //创建数组
    var multiArray = new Array(arrayLength);
    for(var i =0;i<multiArray.length;i++){
        multiArray[i] = new Array(arrayLength);
    }

    //给第一个数组索引添加项
    multiArray[0][0] = &#39;phone&#39;;
    multiArray[0][1] = &#39;book&#39;;
    multiArray[0][2] = &#39;TV&#39;;

    //第二个
    multiArray[1][0] = 2;
    multiArray[1][1] = 1;
    multiArray[1][2] = 98;

    //第三个
    multiArray[2][0] = [&#39;java&#39;,&#39;python&#39;];
    multiArray[2][1] = [&#39;js&#39;,&#39;C++&#39;];
    multiArray[2][2] = [&#39;Haskell&#39;,&#39;php&#39;];
</script>

排序数组

<script type="text/javascript">
     var fruits = [&#39;banana&#39;,&#39;apple&#39;,&#39;orange&#39;,&#39;strawberry&#39;];
    console.log(fruits.sort());//Array [ "apple", "banana", "orange", "strawberry" ]

    var num = [32,43,2,5,-23,0,4];
    console.log(num.sort());//Array [ -23, 0, 2, 32, 4, 43, 5 ]
</script>
Array对象的sort方法会按照字母顺序来排序数组元素。对于数字，是按照字符编码的顺序进行排序

function compare(a,b){
    return a-b;
}
var num = [32,43,2,5,-23,0,4];
console.log(num.sort(compare));//Array [ -23, 0, 2, 4, 5, 32, 43 ]

Date日期时间部分

js计算时间差

var date1=new Date();  //开始时间，当前时间

var date2=new Date(); //结束时间，需传入时间参数
var date3=date2.getTime()-date1.getTime();  //时间差的毫秒数

//计算出相差天数
var days=Math.floor(date3/(24*3600*1000));

//计算出小时数
var leave1=date3%(24*3600*1000);    //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000);        //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));


//计算相差秒数
var leave3=leave2%(60*1000);      //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000);

console.log(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒");

正则部分

js实现千分位分隔

<script type="text/javascript">
    function cc(s){
        if(/[^0-9\.]/.test(s)) return "invalid value";
        s=s.replace(/^(\d*)$/,"$1.");
        s=(s+"00").replace(/(\d*\.\d\d)\d*/,"$1");
        s=s.replace(".",",");
        var re=/(\d)(\d{3},)/;
        while(re.test(s))
            s=s.replace(re,"$1,$2");
        s=s.replace(/,(\d\d)$/,".$1");
        return "￥" + s.replace(/^\./,"0.")
    }
</script>
<input onchange="this.value=cc(this.value)" />

js判断传入参数是否为质数

function fn(input) {
  input = parseInt(input,10);
  return isPrime(input) ? &#39;is prime&#39; : &#39;not prime&#39;;
}

function isPrime(input) {
  if (input < 2) {
    return false;
  } else {
    for (var i = 2; i <= Math.sqrt(input); i++) {
      if (input % i == 0) {
        return false;
      }
    }
  }
  return true;
}

js判断字符串出现最多的字符，并统计次数

//js实现一个函数，来判断一个字符串出现次数最多的字符，并统计这个次数

    function countStr(str){
        var obj = {};
        for(var i = 0, l = str.length,k; i < l ;i++){
            k = str.charAt(i);
            if(obj[k]){
                obj[k]++;
            }else{
                obj[k] = 1;
            }
        }
        var m = 0,i=null;
        for(var k in obj){
            if(obj[k] > m){
                m = obj[k];
                i = k;
            }
        }
        return i + &#39;:&#39; + m;
    }

更多JavaScript知识请关注JavaScript视频教程

Atas ialah kandungan terperinci 一些值得收藏的JavaScript经典实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Artikel ini dikembalikan pada:博客园. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AM

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AM

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan

JavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AM

JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.

Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AM

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Demystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AM

Python lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang laluByDDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver Mac版

Alat pembangunan web visual

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7478

Tutorial CakePHP

1377

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi