javascript（二）

最新推荐文章于 2023-04-16 14:59:35 发布
最新推荐文章于 2023-04-16 14:59:35 发布
阅读量69 收藏
点赞数
原文链接：http://www.cnblogs.com/HHR-SUN/p/7043531.html
版权
1、新增输入框
   <script type="text/javascript">
         window.οnlοad=function(){
           var btn=  document.getElementById("btn");
           var ul=  document.getElementById("u");
            //点击事件
             btn.οnclick=function(){
                var li= document.createElement("li");//创建li标签
                var input= document.createElement("input"); //创建input标签
                 input.setAttribute("type","text");
                 input.setAttribute("placeholder","请输入内容");
                 li.appendChild(input);
                 ul.appendChild(li);
             }
         }
    </script>
2、Table对象
 <script type="text/javascript">
         window.οnlοad=function(){
           var table=  document.getElementById("myTable");
           var btn1=  document.getElementById("btn1");
           var btn2=  document.getElementById("btn2");
             //显示表格总行数
             btn1.οnclick= function () {
                 alert(table.rows.length);
             }
             //显示第2行第2列的单元格内容rows是一个数组 cells也是一个数组
             btn2.οnclick= function () {
                 alert(table.rows[1].cells[1].innerHTML);
             }
         }
    </script>
</head>
<body>
 <input  type="button" value="显示表格总行数" id="btn1">
 <input  type="button" value="显示第2行第2列的单元格内容" id="btn2">
<table id="myTable" border="1">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>
</table>
</body>
3、Table新增和删除
    <script type="text/javascript">
         window.οnlοad=function(){
           var table=  document.getElementById("myTable");
           var btn1=  document.getElementById("btn1");
           var btn2=  document.getElementById("btn2");
             //新增insertRow(index)
             btn1.οnclick= function () {
              var row=  table.insertRow(0);
                 //给行新增列   并且给列赋值
                 row.insertCell(0).innerHTML="新增行的列1";
                 row.insertCell(1).innerHTML="新增行的列2";
                 row.insertCell(2).innerHTML="新增行的列3";
             }
             //删除最后一行deleteRow(index)
             btn2.οnclick= function () {
              table.deleteRow(table.rows.length-1);
             }
         }
    </script>
4、String对象的使用
   <script type="text/javascript">
         window.οnlοad=function() {
            var   url="http://www.bdqn.cn?name=admin";
             //想要获取?之后的数据 并且把  admin 变成大写
            var index= url.indexOf("?");
             //alert(url.substring(index+1)); ？之后的数据
              index= url.indexOf("=");
             alert(url.substring(index+1).toUpperCase());
         }
    </script>
5、Date的使用
    <script type="text/javascript">
         window.οnlοad=function() {
            function getTime(){  //获取当前系统时间
                var  date=new Date();
                var  hours=date.getHours();
                var  mins=date.getMinutes();
                var  secs=date.getSeconds();
                document.getElementById("time").innerHTML=hours+":"+mins+":"+secs;
            }
             //定时函数
            setInterval(getTime,1000);
         }
    </script>
6、数组的使用
 <script type="text/javascript">
        //数组的声明
          var  arr=["aa","bb","cc"];  //3
          var  arr1=new Array();   //0
          var  arr2=new Array(20);  //20
          var  arr3=new Array("aa","bb","cc"); //3
     //遍历数组中的元素
        for(var i=0;i<arr3.length;i++){
            document.write(arr3[i]+"<br/>")
        }
        for(var x in arr3){
            document.write(x+"====>"+arr3[x]+"<br/>")
        }
 </script>
7、数组的属性和方法
  <script type="text/javascript">
        //数组的声明
          var  arr=["aa","cc","bb"];
        //数组的长度
        document.write("数组的长度是："+arr.length+"<br/>");
       //向数组中添加一个新元素  push()新增之后会返回一个数组新的长度
        document.write(arr.push("dd")+"<br/>") ;
        document.write(arr[3]+"<br/>");
 
        //把数组使用字符 "-" 连接起来   join()
        document.write(arr.join("-")+"<br/>");
        document.write(arr.sort()+"<br/>"); //字符abcd.....
 
        //创建一个新的数组
        var  arr2=[10,20,2,3,150,1,90];
        //如果说是数字排序 我们需要加入一个比较函数
        document.write(arr2.sort(function(a,b){
            return a-b;  // 如果想  降序 b-a
        }));
    </script>
8、打印等腰三角形
  <script type="text/javascript">
    window.οnlοad=function(){
         var arr=[];  //声明一个空的数组
         var  str="";
        for(var i=0;i<8;i++){
            str="*";
            for(var j=0;j<i;j++){
                str+="&nbsp;&nbsp;*"
            }
            arr.push(str);
        }
     document.getElementById("text").innerHTML=(arr.join("<br/>"));
    }
    </script>
9、style样式
    <script type="text/javascript">
    window.οnlοad=function(){
         var  dom= document.getElementById("text");
      /*
      alert(1);
        //改变
        dom.style.backgroundColor="pink";
        dom.style.marginLeft="200px";
        dom.style.display="none";*/
        dom.className="title";
    }
    </script>
10、Tab选项卡
 <style type="text/css">
        #tab{ width: 400px;}
        #tab ul{list-style: none;overflow:hidden;margin:0px;padding:0px;}
        #tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;}
        #tab ul li.cur{background-color: red}
        #tab .content{width:100%;border:1px solid #eeeeee;height: 100px;}
    </style>
    <script type="text/javascript">
        window.onload = function() {
            //获取li
           var  lis=document.getElementsByTagName("li");
            for(var  i=0;i<lis.length;i++){  //循环的是tab框
                lis[i].index=i;
                lis[i].οnmοusemοve=function(){
                    for(var  j=0;j<lis.length;j++){ //循环的是div的内容
                        document.getElementById("content-"+j).style.display="none";
                        lis[j].className="";
                    }
                    lis[this.index].className="cur";
                    document.getElementById("content-"+this.index).style.display="block";
                }
            }
        }
    </script>
</head>
<body>
<div id="tab">
    <ul>
        <li class="cur">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li>tab4</li>
    </ul>
    <div id="c-box">
        <div class="content" id="content-0">
            tab-1第一个容器的内容
        </div>
        <div class="content" id="content-1" style="display: none;">
            tab-2第二个容器的内容
        </div>
        <div class="content" id="content-2" style="display: none;">
            tab-3第3个容器的内容
        </div>
        <div class="content" id="content-3" style="display: none;">
            tab-4第4个容器的内容
        </div>
    </div>
</body>
-----使用jquery实现---
 <title>Tab切换</title>
    <!--先引入样式文件-->
  <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
  <!--引入jquery需要的脚本库-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.ui.tabs.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#myTabs").tabs({
                active:1, //默认选中的tab
                event:"mouseover" //触发的事件
            })
        })
    </script>
11、滚动距离
<style type="text/css">
        * { margin:0; padding: 0; }
        #box1 { height:200px;width: 200px;background:#eee;border:1px solid #000;overflow-y:scroll; }
        p { line-height:40px; }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var text=document.getElementById("text");
            var box1=document.getElementById("box1");
            box1.οnscrοll=function(){
                text.innerHTML="距离Top多少像素："+box1. scrollTop;
            }
        }
    </script>
12、漂浮图片
   <style type="text/css">
        *{margin:0;padding: 0;}
       #box{
            position: absolute;
           top: 0px;
           left: 0px;
       }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var box=document.getElementById("box");
            var time=null,x= 1,y= 1,speed=5;
            function go(){
              //水平方向
                if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){
                    x=-1;
                }
                if(box.offsetLeft<0){
                    x=1;
                }
                box.style.left=box.offsetLeft+x*speed+"px";
              //垂直方向
                if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){
                    y=-1;
                }
                if(box.offsetTop<0){
                    y=1;
                }
                box.style.top=box.offsetTop+x*speed+"px";
            }
            //定时函数
            time=setInterval(go,100);
            //鼠标移上去 停止
     box.οnmοusemοve=function(){
         if(time!=null){
             clearInterval(time);
         }
     }
            //鼠标离开  继续移动
     box.οnmοuseοut=function(){
         time=setInterval(go,100);
     }
        }
    </script>

转载于:https://www.cnblogs.com/HHR-SUN/p/7043531.html

weixin_30815469
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 高级五 let； const；解析赋值；箭头函数；剩余参数；Array的扩展方法；String的扩展方法；set 数据结构
m0_55170432的博客
03-27 183
ES6 简介 ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。 变量提升特性增加了程序运行时的不可预测性 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码 1.0 ES6 的新增语法 1.1 关键字 let ES6中新增的用于声明变量的关键字-------let。（let
javascript二维数组转置实例
10-24
主要介绍了javascript二维数组转置方法,实例分析了数组行列交换的转置技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javaScript实现增删改查
weixin_30433075的博客
08-05 165
自己写的一个html+javaScript实现增删改查小实例。下面是js代码​1. [代码][JavaScript]代码 //1.创建受捐单位数组var arrOrgData = [ { "Id": 1, "OrgName": "红十字会" }, { "Id": 2, "OrgName": "壹基金" }, { "Id": 3, "OrgName": "中华慈善总会" },...
JavaScript二级联动
jjjndk1314的博客
03-25 2万+
代码演示： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt
JavaScript-二维数组
Will_Season的博客
10-23 8997
javascript二维数组
javascript读写二进制
大猪的博客
01-04 8173
javascript里有两个内置对象，一个是ArrayBuffer；一个是DataView。 读写二进制数据都需要使用这两个对象。 ArrayBuffer：         ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer 不能直接操作，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些
JavaScript之二维数组
HNUYSY的博客
06-27 1万+
JavaScript本身只支持一维数组，不支持直接定义二维数组，但是我们可以间接地实现二维数组 将一维数组的每个元素又定义为一个数组，即为数组中的元素也是数组，就是二维数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
JavaScript基础大总结
热门推荐
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript实现二级联动下拉菜单
MistyWood的博客
09-19 9752
最近学习前端js，做了一个二级联动下拉菜单。二级下拉菜单的内容随着一级下拉菜单选项的更改而更改。菜单的内容是手动存在js的数组里的，随便写了几个数据。 效果图： 实现源码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> ...
JavaScript中的二维数组
KysonLai的博客
05-31 1万+
二维数组其实就是数组中的数组创建：①var a = [ [ 1,2 ], [ 3,4 ] ];②var a = new Array( new Array(1,2), new Array(3,4) );③var a = new Array(); //先声明一维数组 for(var i=0;i&lt;5;i++) { a[i] = new Array(i); //再声明二维数组 ...
Javascript 二维数组
10-29
Javascript二维数组的实现代码，需要的朋友可以参考下。
javascript 二进制运算技巧解析
10-27
javascript 中的二进制运算的一些技巧，晒出来和你们分享一下，希望可以帮助你们
javascript 二维数组的实现与应用
10-29
javascript没有二维数组.所有自定义了一个数组类，下面是实例代码，需要的朋友可以参考下。
binary-clock:简单的 Javascript 二进制时钟
07-13
这个"binary-clock:简单的 Javascript 二进制时钟"项目是用 JavaScript 编写的，JavaScript 是一种广泛用于网页和网络应用的编程语言，特别适合于交互式和实时更新的场景，如网页上的动态内容。 该项目可能包含以下...
javaScript简介
weixin_69252724的博客
04-16 3948
它是一种直译式的语言, 用来为网页添加各种各样的动态功能不需要编译直接通过浏览器直接运行, 通常javaScript脚本是通过嵌入HTML里来实现功能的。
从0到场均50万GMV，鞋服品牌的视频号直播打法3. 直播场次报表.xlsx
07-13
从0到场均50万GMV，鞋服品牌的视频号直播打法3. 直播场次报表.xlsx
Java语言基础入门教程 Java开发编程基础课程 第6章 字符串 共30页.pptx
07-13
【课程大纲】 第1、2、3章 Java简介 共15页.pptx 第4章 流程控制 共14页.pptx 第5章 数组 共8页.pptx 第6章 字符串 共30页.pptx 第7章 定义类 共10页.pptx 第8章 内部类和异常处理 共18页.pptx 第8章 生成对象 共18页.pptx 第9章 类的高级特性 共12页.pptx 第9章 深度了解变量和方法 共13页.pptx 第10章 理解包 共18页.pptx 第11章 继承、多态和接口 共21页.pptx 第12章 内部类和异常处理 共18页.pptx 第13章 图形用户界面 共31页.pptx 第14章 线程 共22页.pptx
大学生创业计划书(26)三篇文件.docx
最新发布
07-14
大学生创业计划书(26)三篇文件.docx
workbench javascript二次开发
06-30
### 回答1： Workbench是一个用于创建和自定义业务流程的工具。通过JavaScript的二次开发，可以为Workbench添加更多功能和定制化选项。 第一步是了解Workbench的基本架构和API。Workbench使用SoqlQuery语言查询数据库，并使用JavaScript、HTML和CSS构建用户界面。理解这个架构和API是进行二次开发的基础。 之后可以根据需求进行功能的开发和定制。比如，可以添加自定义的表单和字段，以满足特定的业务需求。也可以通过JavaScript添加逻辑和流程控制，使得系统更加智能和灵活。 另外，可以通过JavaScript进行一些数据处理和操作。比如，可以通过JavaScript计算字段值、验证用户输入、处理数据关联等。这样可以扩展和增强Workbench的数据处理能力。 在进行二次开发之前，需要先对Workbench进行配置和准备。可以通过Workbench的管理界面添加自定义对象、字段和布局，以及定义业务流程和权限控制等。 最后，测试和部署是二次开发过程中的重要环节。通过测试可以保证开发的功能和逻辑是正确的。部署则是将开发好的功能发布到正式环境，供用户使用。 总的来说，Workbench的JavaScript二次开发可以通过扩展和定制功能，增加系统的灵活性和可用性。通过了解和熟悉Workbench的架构和API，以及进行开发和部署，可以实现满足特定需求的定制化系统。 ### 回答2： workbench是一个用于开发和定制Salesforce平台的工具。它提供了许多功能，使开发人员能够创建和修改JavaScript代码以扩展Salesforce应用程序的功能。 在workbench中进行JavaScript二次开发，开发人员可以使用JavaScript语言来编写自定义代码，以满足特定业务需求。他们可以通过workbench的集成开发环境（IDE）编辑和调试JavaScript代码，并使用Salesforce平台的API来访问和操作数据。 通过workbench进行JavaScript二次开发，开发人员可以创建自定义按钮、自定义页面和验证规则等，以增强和定制Salesforce应用程序的功能。他们可以使用JavaScript来处理用户的输入和操作，并对数据进行验证和处理。通过使用workbench的开发工具，如代码编辑器和调试器，开发人员可以更轻松地编写和测试JavaScript代码，以确保其正确性和可靠性。 另外，workbench还提供了一些内置函数和库，用于简化JavaScript开发过程。这些函数和库提供了许多常见的功能和操作，如字符串处理、日期计算和数据转换等。开发人员可以利用这些功能来加快开发过程，并减少出错的可能性。 总而言之，workbench是一个强大的工具，可以支持JavaScript二次开发。通过使用它，开发人员可以使用JavaScript语言来编写和修改Salesforce应用程序的代码，以实现定制的业务需求。无论是创建自定义按钮、自定义页面还是验证规则，workbench都提供了一系列的功能和工具，帮助开发人员更轻松地开发和测试JavaScript代码。 ### 回答3： Workbench JavaScript二次开发是指在Workbench平台上使用JavaScript进行自定义开发的过程。Workbench平台是一个基于Web的集成开发环境，主要用于创建、编辑和管理业务流程和工作任务。 通过JavaScript的二次开发，我们可以根据实际需求对Workbench平台进行定制化的扩展和优化。以下是几个常见的二次开发场景： 1. 自定义表单：通过JavaScript可以对Workbench平台提供的默认表单进行修改和自定义，实现更符合业务需求的数据展示和填写方式。你可以调整表单的布局、样式，增加自定义的校验和计算逻辑，甚至可以集成其他第三方控件和工具。 2. 定制动作按钮：Workbench平台通常提供了一些默认的动作按钮，比如保存、提交、撤回等。通过JavaScript的二次开发，可以新增自定义的动作按钮，并在点击事件中实现特定的逻辑处理，比如调用其他系统接口、发送消息等。 3. 高级查询和筛选：Workbench平台的默认查询功能可能无法满足复杂的查询需求。通过JavaScript二次开发，可以实现更灵活的查询和筛选功能，比如添加条件组合、动态生成查询语句等。 4. 数据处理和计算：有时需要对Workbench平台上的数据进行进一步处理和计算。通过JavaScript的二次开发，可以编写脚本来实现这些需求，比如对数据进行加减乘除、日期计算等。 总而言之，Workbench JavaScript二次开发可以帮助我们对平台进行定制，以满足特定业务需求。在开发过程中，我们需要熟悉Workbench平台的API和事件机制，并结合JavaScript的语法和功能进行开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值