javascript常见用法

最新推荐文章于 2024-08-04 10:58:32 发布
最新推荐文章于 2024-08-04 10:58:32 发布
阅读量569 收藏
点赞数
分类专栏： javascript javascript 常用 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmmv390/article/details/26482345
版权

js解码和编码.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>javascript的编码和解码</title>
    <script type="text/javascript">

        function gel(id) {
            return document.getElementById(id);
        }

        window.onload = function() {
            //alert(document.getElementById("span1").innerHTML
            gel("btn1").onclick = function() {
                alert(encodeURI(gel("span1").innerHTML));
            };

            gel("btn2").onclick = function() {
                alert(decodeURI(gel("span1").innerHTML));
            };
        };
    </script>
</head>
<body>
    <span id="span1">疯汉三雄起了!</span>
    <input type="button" id="btn1" value="编码后" />
    <input type="button" id="btn2" value="解码后" />
</body>
</html>

js中setInterval和setTimeout的使用.html 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>js中setInterval和setTimeout的使用</title>
    <script type="text/javascript">
        var time = 10;
        var id = 0;
        function gel(id) {
            return document.getElementById(id);
        }

        function dectime() {
            if (time > 0) {
                time--;
                gel("timespan").innerHTML = time;
            } else {
                //清除时针
                clearInterval(id);
            }
        }

        window.onload = function() {
            id = setInterval(dectime, 1000);
        };
    </script>
</head>
<body>
    <span >倒计时<span id="timespan"  style="color: red;"></span>秒</span>
</body>
</html>

js检查输入是否为数字.html 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>js检查输入是否为数字</title>
    <script type="text/javascript">

        

        window.οnlοad= function() {
            document.getElementById("btn1").onclick = function() {
                var i = prompt("输入要判断的值");
                //window.alert(i);
                if (!isNaN(i)) {
                    window.alert("是数字");
                } else {
                    window.alert("不是数字");
                }
            };
        }
    </script>
</head>
<body>
    <input type="button" id="btn1" value="判断数字" />
</body>
</html>

js动态获取、创建和删除节点.html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js动态获取、创建和删除节点</title>
    <script type="text/javascript">
        function gel(id) { return document.getElementById(id); }

        window.onload = function () {
            gel("btnProAdd").onclick = function () {
                //在proList下面增加子节点
                var linew = document.createElement("li");
                linew.innerHTML = prompt("输入要新增的省份");
                gel("proList").appendChild(linew);
                //重新绑定所有的点击删除事件
                DelLiOnClick();
            };

            //双击li子节点，删除它

            function DelLiOnClick() {
                //1.首先得到所有的子节点
                var liNodes = gel("proList").childNodes;

                for (var i = 0; i < liNodes.length; i++) {
                    liNodes[i].onclick = function () {
                        //alert(liNodes[i]).innerHTML;//因为onclick绑定的是匿名函数，所以i到这里永远只会是7
                        //下面是正确的删除方法, 使用this.因为触发onclick事件的永远是你选中的li
                        this.parentNode.removeChild(this);
                    };
                }
            }

            
        };
    </script>
</head>
<body>
    <ul id="proList">
        <li>山西</li>
        <li>河南</li>
        <li>北京</li>
    </ul>

    <input type="button" value="新增省份" id="btnProAdd" />
</body>
</html>

js中setInterval和setTimeout的使用.html 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>js中setInterval和setTimeout的使用</title>
    <script type="text/javascript">
        var time = 10;
        var id = 0;
        function gel(id) {
            return document.getElementById(id);
        }

        function dectime() {
            if (time > 0) {
                time--;
                gel("timespan").innerHTML = time;
            } else {
                //清除时针
                clearInterval(id);
            }
        }

        window.onload = function() {
            id = setInterval(dectime, 1000);
        };
    </script>
</head>
<body>
    <span >倒计时<span id="timespan"  style="color: red;"></span>秒</span>
</body>
</html>

js动态添加表格数据.html 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动态添加表格数据</title>

    <script type="text/javascript">

        var mailArr = [
             { "title": "一个c#问题", "name": "张三", "date": "2014-03-21" },
             { "title": "一个javascript问题", "name": "李四", "date": "2014-03-21" },
             { "title": "一个c问题", "name": "五五", "date": "2014-03-21" },
             { "title": "一个c++问题", "name": "赵六", "date": "2014-03-21" }
        ];

        window.onload = function () {
            var tab = document.getElementById("tb");
            //把mailArr循环遍历方式以tr的方式加入表格中
            for (var rowindex = 0; rowindex < mailArr.length; rowindex++) {
                var tr = document.createElement("tr");
                var th1 = document.createElement("th");
                var th2 = document.createElement("th");
                var th3 = document.createElement("th");
                var th4 = document.createElement("th");
                th1.innerHTML = "<input type='checkbox'/>";
                th2.innerHTML = mailArr[rowindex].title;
                th3.innerHTML = mailArr[rowindex].name;
                th4.innerHTML = mailArr[rowindex].date;

                tr.appendChild(th1);
                tr.appendChild(th2);
                tr.appendChild(th3);
                tr.appendChild(th4);

                tab.appendChild(tr);
            }
            

        };
    </script>

</head>
<body>
    <table id="tb" border="1px;" style="border-collapse: collapse;">
        <tr>
            <th>序列</th>
            <th>标题</th>
            <th>发邮人</th>
            <th>发件时间</th>
        </tr>
        <!-- 循环增加 -->
    </table>
</body>
</html>


疯汉三
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript常见用法总结
10-25
以下是对标题和描述中提到的JavaScript常见用法的详细说明： 1. **编码解码**： JavaScript提供了`encodeURI()`和`decodeURI()`函数来对字符串进行编码和解码。`encodeURI()`函数用于编码一个URI（统一资源标识符...
JavaScript常见用法整理
Vaynepentakill
06-24 527
JavaScript嵌入页面的方式1、行间事件（主要用于事件）&lt;input type="button" name="" onclick="alert('ok！');"&gt; 2、页面script标签嵌入&lt;script type="text/javascript"&gt; var a = '你好！'; alert(a); &lt;/script&
JavaScript常见用法积累
weixin_34038652的博客
05-03 53
1、<body 仅仅在<body>和<frameset>元素中有效。 onload表示文档被载入时执行里面的脚本。 2、 type="button" class="btn" value="Modify"onClick="goModifyIPPool('${hostLink.hlinkID}');"/> 表示当点击按钮时执...
收藏 | JavaScript常见使用方法大全详细整理
黑夜开发者的博客
06-13 1014
String常用方法： 1.substring(start, end) 用于提取字符串中介于两个指定下标之间的字符 var str="Hello world!" document.write(str.substring(3)); //lo world! 2.charAt(index) 返回指定索引处的字符串 Var str= ”abc8ABCabc”; str.charAt(1); // b 3.concat 连接多个字符串，返回连接后的字符串的副本 var str1 = ”aaa
Web前端-JavaScript--常见本地存储三种方式
yanghainan0318的博客
05-30 1673
前端的本地存储方式有多种多样: 最常用的有三种: localStorage sessionStorage cookie IndexedDB(面试问) localStorage使用: localStorage.setItem("键","值"); 根据键存储值 localStorage.getItem("键"); 根据键取值 ...
10个JavaScript难点
weixin_33976072的博客
07-18 392
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript用法
wsdhy_的博客
04-02 741
JavaSript程序，要写在HTML页中，运行页面的时候，这个页面上的JS也就一起运行了。也就是说，js的运行必须有宿主环境，最最常见的宿主面环境，就是浏览器。 JS写在<script>标签对儿里面，type属性就是类型，text/javascript就是纯文本的javascript；注意，这个type必须写准确，可以不写，但是要写，一定要写准确，否则失效。 注意： 1）HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 2）脚本
JavaScript基础——Date日期对象常见的用法
最新发布
weixin_64294248的博客
08-04 1380
对象的“时间戳”来实现。例如，创建两个Date的实例对象date1和date2，分别代表不同的日期和时间，然后通过比较它们的时间戳time1和time2，我们可以确定它们的先后顺序：如果time1大于time2，则date1确定是在date2之后；在控制台可以看见对应的输出，需要注意的是，这个时间是当前的时间，我当前的时间是2024年8月4号的10:22分，随着时间的不同，结果是不同的。在创建了当前Date的实例对象的基础上，我们获取当前日期的各个部分，包括年、月、星期、日、小时、分钟、秒和毫秒、时间戳。
点击事件常见用法
weixin_52236586的博客
05-09 887
需要注意的是，这种方式需要等待DOM元素加载完成后才能获取button元素，否则可能会导致获取不到元素。需要注意的是，onclick属性中的处理函数需要在页面的全局作用域中定义，否则会导致无法执行。这种方式需要引入jQuery库，但可以使用jQuery提供的便捷操作来实现事件处理，比较适合对于jQuery有一定了解的开发者使用。使用jQuery库提供的click方法为button元素添加点击事件处理函数。直接在button标签中添加onclick属性，设置点击事件的处理函数。
javascript的常见运算符用法与功能（一）
CShouziwangDN的博客
09-26 612
javascript的常见运算符用法与功能 js中常见的运算符包括： 1.+ 加号 运算符 不必多说 2.- 减号 运算符 不必多说 3.* 乘号 运算符 不必多说 4./ 除号 运算符 不必多说 5.% 取余 运算符 下面 我们一起来看看这些运算符的用法 来看一下取余吧 % var a=100; var b=30; alert(a%b); //余数为10 就是数学里的余数。 好 那么++是什么意思呢？下面我们在重点说一下++ ++的意思代表自增每次自增都+1 var a=1;//把1赋给a a+
JavaScript数组各种常见用法实例分析
10-23
下面将详细解析JavaScript数组的常见用法，包括数组的添加、删除、替换、还原等技巧。 首先，数组的添加操作，最常见的方法是使用unshift和push。unshift方法用于在数组的开头添加元素，而push方法则是在数组的末尾...
JavaScript lodash常见用法系列小结
10-21
5. 使用条件运算符替代if语句：这是对JavaScript条件运算符（也称为三元运算符）的一个实践用法，它可以在一行代码内完成简单的条件判断和赋值操作。例如，通过activities.length ? 1 : 0来替代冗长的if...else语句...
javascript 动态修改Li的值
mmmv390的专栏
05-22 2323
修改Li的值 function gel(id) { return document.getElementById(id); } //全局的input输入控制 var inpt = document.createElement("input"); inpt.setAtt
js动态添加表格,全选和删除
mmmv390的专栏
05-21 1488
效果图: 代码:
js案例-捐赠管理
mmmv390的专栏
05-24 1322
index.html css.css
js动态修改整个页面样式（换肤）
mmmv390的专栏
05-22 1186
js动态修改整个html页面样式(换肤).html
交换li的值.html
mmmv390的专栏
05-21 1036
交接li的值.html 交换Li的值 window.onload= function() { var lis = document.getElementById("ulList").childNodes; for (var i = 0; i < lis.length; i++) {
js+css tab菜单切换效果
mmmv390的专栏
05-22 777
css\index.css * { margin: 0px; padding: 0px; } body { width: 600px; margin: 0 auto; background-color: silver; } #contanier { background-color: yellow; width: 600px;height
javascript map用法
10-22
JavaScript中的Map是一种基于键值对的数据结构，可以用于存储和处理数据。常见的Map用法包括： 1. 创建Map：可以使用new Map()来创建一个空的Map，也可以在创建时传入一个数组，数组中每个元素都是一个键值对。 2. 添加元素：可以使用set()方法向Map中添加一个键值对，其中第一个参数为键，第二个参数为值。 3. 获取元素：可以使用get()方法获取指定键对应的值。 4. 删除元素：可以使用delete()方法删除指定键对应的键值对。 5. 判断元素是否存在：可以使用has()方法判断Map中是否包含某个键，使用includes()方法判断Map中是否包含某个值。 举个例子，可以按照以下方式使用Map： ``` const myMap = new Map(); myMap.set('key1', 'value1'); myMap.set('key2', 'value2'); console.log(myMap.get('key1')); // 输出value1 console.log(myMap.has('key2')); // 输出true myMap.delete('key1'); console.log(myMap.has('key1')); // 输出false ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值