精华内容
下载资源
问答
  • JS动态进度条

    千次阅读 2019-07-08 09:26:11
    JS动态进度条 下面我们使用Visual Studio这个软件来写一个JS的代码,我们可以用JS的代码写一个简单的方法,就是实现一个JS的动态进度条的效果。 那么这个代码要怎么写呢,首先我们需要先在界面上写一下的Html的代码...

    JS动态进度条

    下面我们使用Visual Studio这个软件来写一个JS的代码,我们可以用JS的代码写一个简单的方法,就是实现一个JS的动态进度条的效果。
    那么这个代码要怎么写呢,首先我们需要先在界面上写一下的Html的代码,我们来看一下界面的代码是什么,看以下截图:

    在这里插入图片描述

    在截图中我们可以看到界面的代码就是,先用一个属性为H3的标签文字嵌套一个Loading…然后用一个div里面嵌套着一个div给他们都弄一个类为Kuang和JinDuTiao的名字,然后我们就需要去给他设置一下他的一些属性效果,接下来看一下属性代码的截图:

    在这里插入图片描述

    定义好界面的属性代码我们接着就需要写一下JS的代码。然后实现出动态进度条滚动的JS代码的内容,见截图:

    在这里插入图片描述

    我们通过第45行。先声明width等于0,然后声明一下timer,他这个没有等于0的意思就是声明变量为默认值,默认值就是undefined。然后setInterval的方法就是可以按照指定的周期来调用函数或者计算表达式。然后接着就是宽度每次+等于5,然后判断width>150的话就执行getElementsByClassName的方法让他返回文档中所有指定类名的元素集合,接着给他style属性颜色改为#cd4c49,然后接着也是一样判断他width大于350,当他达到350的时候就更改背景颜色,然后当width大于等于490的时候就不改变颜色了。直接+px。最后给他一个定时器时间的效果。接下来看一下他实现的结果:

    在这里插入图片描述

    这样就可以实现出动态滚动条的一个实现效果了。

    展开全文
  • JS动态添加标签

    千次阅读 2019-08-16 14:05:39
    JS动态添加标签 如代码示例,使用jquery,动态的增加标签: function addDiv(serial) { //最外层父div var div = document.createElement("div"); document.getElementById("form").appendChild(div); ...

     JS动态添加标签

    如代码示例,使用jquery,动态的增加标签:

    function addDiv(serial) {
            //最外层父div
            var div = document.createElement("div");  
            document.getElementById("form").appendChild(div);
    
    
            var childDiv1 = document.createElement("div");
            document.getElementById(div.id).appendChild(childDiv1);
    
            var label1 = document.createElement("label");
            document.getElementById(childDiv1.id).appendChild(label1);
    
            var childDiv1_1 = document.createElement("div");
            document.getElementById(childDiv1.id).appendChild(childDiv1_1);
    
            var input1 = document.createElement("input");
            document.getElementById(childDiv1_1.id).appendChild(input1);
    
        }

     

    展开全文
  • js动态计算高度

    2019-09-11 11:08:30
    js动态计算高度 // 动态计算竖线高度 window.onload = function () { if ($(window).width() > 100) { var len = $(".faq-box").length; for (var i = 0; i <...

     

    js动态计算高度

     

     // 动态计算竖线高度
            window.onload = function () {
                if ($(window).width() > 100) {
                    var len = $(".faq-box").length;
                    for (var i = 0; i < len; i++) {
                        var kh = $(".faq-box").eq(i).find(".faq-w").height() + $(".faq-box").eq(i).find(".faq-a")
                            .height() -
                            28;
                        var oh = $(".faq-box").eq(i).find(".faq-a").height() - 47;
                        $(".faq-box").eq(i).find(".su1").height(kh);
                        $(".faq-box").eq(i).find(".su2").height(oh);
                        $(window).resize(function () {
                            var skh = $(".faq-box ").eq(i).find(".faq-w").height() + $(".faq-box ").eq(i).find(
                                    ".faq-a")
                                .height() - 28;
                            var soh = $(".faq-box").eq(i).find(".faq-a").height() - 47;
                            $(".faq-box").eq(i).find(".su1").height(skh);
                            $(".faq-box").eq(i).find(".su2").height(soh);
                        });
                    }
    
                }
            }
    
        window.onload = function () {
            if ($(window).width() > 767) {
                var kh = $(".sec1-left").height();
                var oh = (kh - 4) / 4;
                $(".sec1 .box .sec1-right .item").height(oh);
                $(window).resize(function () {
                    var skh = $(".sec1-left").height();
                    var soh = (skh - 4) / 4;
                    $(".sec1 .box .sec1-right .item").height(soh);
                });
            }
        }
    展开全文
  • js动态调用方法

    千次阅读 2019-10-29 23:53:14
    js 动态方法调用经验分享 html代码 <tr> <td>用户名:</td> <td><input class="easyui-textbox" type="text" name="username" data-options="required:true,...

    js 动态方法调用经验分享

    html代码

    
    <tr>
                        <td>用户名:</td>
                        <td><input class="easyui-textbox" type="text" name="username" data-options="required:true,validType:['length[5,10]','checkName']"></input></td>
                    </tr>
    

    js代码

     //给所有a标签都注册一个事件
    $("a").on("click", function () {
         //动态获取data-method属性对应的值
         var method = $(this).data("method");
         //method不能为空
         if(method){
            //动态触发事件
            cdebai[method]();
         }
    });
    
    cdebai= {
            //高级查询   easyui 高级查询
            "search": function () {
                //把form表单元素,直接封装成一个json对象
                var jsonObj = $("#searchForm").serializeObject();
                //加载datagrid
                dg.datagrid('load', jsonObj);
            },
            //删除
            "delete": function () {
                //获取选中的行
                var rows = dg.datagrid("getSelections");
                //在js中认为false的值:0  false ""  null NaN  undefined
                if (!rows.length) {
                    $.messager.alert('操作错误', '亲!请选中数据进行删除!', 'error');
                    return;
                }
                //定义一个数组,该数组把所有的id都给装进来
                var ids = [];
                //循环数组中的所有数据
                $.each(rows, function (i, o) {
                    //把id装进数组中
                    ids.push(o.id);
                });
                $.messager.confirm('确认', '你确定要离我而去吗?', function (r) {
                    if (r) {
                        $.get("/employee/delete", {"ids": ids.toString()}, function (result) {
                            if (result.success) {
                                //刷新界面
                                dg.datagrid("reload");
                            } else {
                                $.messager.alert('失败', result.msg, 'error');
                            }
                        });
                    }
                });
    
            },
            //添加按钮,弹出窗体
            "add": function () {
                //显示密码框
                $("tr[data-password]").show();
                //清空form表单中所有的值
                ff.form("clear");
                //启用密码框的验证
                $("#password").textbox("enableValidation");
                $("#configPassword").textbox("enableValidation");
                //弹出窗体,居中,并且设置标题,动态修改高度
                dlg.dialog("open").dialog("center").dialog("setTitle", "添加员工").dialog("resize", {
                    height: 350
                });
            },
            //修改按钮,弹出窗体
            "edit": function () {
                //获取即将要修改的数据(单个对象)
                var row = dg.datagrid("getSelected");
                //没有选中就会返回null
                if (!row) {
                    $.messager.alert('操作错误', '亲!请选中数据进行修改!', 'error');
                    return;
                }
                //隐藏密码框
                $("tr[data-password]").hide();
    
                //清空form表单
                ff.form("clear");
                //动态添加属性
                if (row.department) {
                    row["department.id"] = row.department.id;
                }
                //回显操作
                ff.form('load', row);
                //禁用密码框的验证
                $("#password").textbox("disableValidation");
                $("#configPassword").textbox("disableValidation");
                //弹出窗体,居中,设置标题  动态修改它的宽度和高度
                dlg.dialog("open").dialog("center").dialog("setTitle", "修改员工").dialog("resize", {
                    height: 270
                });
            },
            //保存数据
            "saveData": function () {
                var url = "/employee/save";
                if ($("#eid").val()) {
                    url = "/employee/update?cmd=update";
                }
                //提交form表单
                ff.form('submit', {
                    url: url,
                    onSubmit: function () {//提交之前先做验证
                        return ff.form("validate");//验证通过之后才返回true,否则返回false,false它会阻止你提交
                    },
                    success: function (data) {
                        try{
                            //把json字符串转为对象
                            var result = $.parseJSON(data);
                            if (result.success) {
                                //关闭窗体
                                dlg.dialog("close");
                                //刷新界面
                                dg.datagrid("reload");
                            } else {
                                $.messager.alert('操作错误', result.msg, 'error');
                            }
                        }catch(e){
                            $.messager.alert('操作错误', "对不起你没有对应的权限!!!", 'error');
                        }
                    }
                });
            }
        }
    
    展开全文
  • js动态生成canvas

    千次阅读 2019-05-23 16:07:00
    最近看代码发现一个小现象,就是用js动态生成的canvas在浏览器审查元素的时候,发现它没有结束标签,但是不会影响canvas上图形的绘制,同时还有一点就是在动态设置canvas宽度和高度的时候,不要出于习惯,写成oCvs....
  • js动态添加渲染图片

    千次阅读 2019-05-07 21:05:49
    今天使用js动态加载图片时遇上的问题,明明图片路径格式都没有问题,可是图片突然报错404 在这里我的图片是js动态添加的 var Content = '<img src="~/Content/images/' + model.UserPhoto + '" class="layui-nav...
  • js动态修改表格数据

    千次阅读 2019-11-28 18:16:32
    js动态修改表格数据 使用js在白鸥个内进行动态修改,需要再点击每一个td的时候在每个td里动态的添加一个input文本框 然后把input的样式设计一下与td的宽度和高度一致去掉input的内外边框和outline <!DOCTYPE ...
  • js动态加载js文件并执行js文件的代码,用document.write("./file.js"); script.src方式赋值可以加载文件但不 会执行js文件中的代码;因为document.write()方式直接输出文本,浏览器会自动执行文本的数据。 ...
  • JS动态生成二维码

    千次阅读 2019-01-03 11:15:50
    JS动态生成二维码 &amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt; &...
  • js动态修改浏览器title

    2019-08-13 15:41:13
    js动态修改浏览器titleJS方法修改代码如下 JS方法修改 script标签依据浏览框的失焦获焦进行函数操作 代码如下 // An highlighted block window.onfocus = function () { document.title = '恢复正常了,嘻嘻~'; // ...
  • js动态修改ClassName;(兼容IE8及以上) html代码: &amp;amp;amp;lt;div id=&amp;amp;quot;user_name&amp;amp;quot; class=&amp;amp;quot;input_box autoDiv&amp;amp;quot; &amp;...
  • js动态修改class属性

    千次阅读 2020-06-18 10:34:07
    js动态修改class属性 在前端界面,希望通过点击修改class属性,实现代码如下: $(function(){ $("#selected li").click(function() { $(this).siblings('li').removeClass('active'); // 删除其他li元素的样式 $...
  • JS动态创建HTML标签

    千次阅读 2016-04-08 21:40:48
    JS动态创建HTML标签
  • js动态添加和移除disabled属性和style

    万次阅读 2018-08-26 10:56:12
    1. js动态添加和移除disabled属性 js操作: function disableTest(element,val){ document.getElementById(element).disabled=val; } document.getElementById("uid").disabled="";  ...
  • HTML+JS动态获取当前时间

    千次阅读 2019-03-28 23:06:09
    HTML+JS动态获取当前时间 效果图: 说明: JavaScript 中 Date 对象 创建 Date 对象的语法: var myDate=new Date() 常用 Date 对象方法: 方法 描述 Date() 返回当日的日期和时间 ...
  • js动态设置元素的宽高

    万次阅读 2017-06-01 23:12:57
    js动态设置元素的宽高
  • js动态添加svg

    千次阅读 2017-03-08 22:35:39
    js动态添加svg今天在做一个基于bpmnjs的项目时候,想在任务节点内部的标签对中添加一个显示出来,即给任务节点添加名字。刚开始时是用jQuery找到text,然后直接append,加入自己要加的内容进去,但是发现虽然加进去了...
  • 使用js动态修改图片src路径的方法代码 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("qipa250Image").src="hackanm.gif"; } </script> ...
  • JS动态获取div的宽度、高度

    万次阅读 2018-01-10 10:45:58
    JS动态获取div的宽度var o = document.getElementById("div1");var w = o.clientWidth||o.offsetWidth;alert("Div1" width is "+w);JS动态获取div的高度同理:var o = document.getElementById("div1");var h = o....
  • 【Python爬虫5】提取JS动态网页数据

    万次阅读 2017-02-17 13:12:20
    动态网页示例 对加载内容进行逆向工程 1通过开发者工具的逆向工程 2通过墨盒测试的逆向工程 21搜索条件为空时 22用号匹配时 ...本篇将介绍两种提取基于JS动态网页的数据。 JavaScript逆向工程 渲染Ja
  • js动态显示实时时间

    万次阅读 2017-04-08 10:52:41
    利用js动态显示实时时间<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv
  • js动态交互实现方式

    千次阅读 2016-10-11 18:49:31
    js动态交互方式: 简单版:先把h5吐到页面,然后操作DOM进行渲染; 复杂版:动态生成DOM并操作DOM进行渲染;
  • js动态的合并table的单元格

    千次阅读 2017-12-03 15:17:07
    利用js动态合并table单元格
  • 微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定。或者用removeClassaddClass 来修改样式。 以下是一种动态修改样式的方法,原理是绑定数据,然后动...
  • js动态修改页面标题

    千次阅读 2017-09-21 15:14:51
    原生js 动态修改页面标题,窗口获得焦点时显示正常的标题,失去焦点显示指定的标题,效果预览: 代码如下: // window.onload = function () { let hour = new Date().getHours() let str = '' if ...
  • 使用JS动态设置下拉框默认值

    千次阅读 2020-04-28 20:31:14
    现在通过讲讲他开发时遇到的小问题来讲一下如何使用JS动态设置下拉框默认值。 1、获取下拉框标签 获取下拉框标签:document.getElementById("id")[a],这里的a表示的是数字0、1、2、3……,不是value值。 图1 ...
  • JS动态创建from表单

    万次阅读 2016-12-04 16:31:44
    //js动态创建form 提交表单 function formSubmit(elementValue) {  var turnForm = document.createElement("form");   //一定要加入到body中!!   document.body.appendChild(turnForm);  turnForm....
  • js动态添加页面的icon图标

    千次阅读 2019-04-02 15:24:59
    js动态添加页面的icon图标 (function() { var link = document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = '/images/366/favicon.ico'; document.get...
  • js动态生成html表格

    万次阅读 2017-01-03 20:15:11
    刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写...如果想在table里面加其他的可以随便加(如加一个表头等等),只需要知道等会js动态
  • Js动态生成多层表头的表格

    千次阅读 2019-04-13 00:06:46
    Js动态生成「纵向」多层表头的表格前言需求代码htmlJs 前言 菜鸟来记录下自己工作中或者学习中遇到的问题和一些想法,各位看官也可以来指点一下,分享观点。 这是第一次写个人博客,之前也知道写技术博客对个人...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,235
精华内容 18,494
关键字:

js动态