精华内容
下载资源
问答
  • 然后步骤条通过js动态渲染。最后一条数据的状态颜色状态为高亮状态。 直接上代码 html部分: <ul class="progress_box"> </ul> css部分: * { margin: 0; padding: 0; } ul { width: 360px; ...

    实现以下效果:
    在这里插入图片描述
    运用的知识点主要是html的伪元素。然后步骤条通过js动态渲染。最后一条数据的状态颜色状态为高亮状态。
    直接上代码
    html部分:

    <ul class="progress_box">
        </ul>
    

    css部分:

     * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            width: 360px;
            margin:100px auto;
        }
        
        li {
            position: relative;
            padding: 0 21px;
            list-style: none;
            height: 54px;
            border-left: 1px solid #4BACFD;
        }
        
        li:before {
            content: "";
            display: block;
            position: absolute;
            /* margin-left: -6px; */
            top: 0;
            left: -5px;
            width: 10px;
            height: 10px;
            /* line-height: 22px; */
            text-align: center;
            background: #4BACFD;
            /* color: #fff; */
            /* font-size: 14px; */
            border-radius: 50%;
        }
        .last_progress{
            border: none;
        }
        .last_progress::before{
            content: "●";
            display: table-cell;
            position: absolute;
            vertical-align: middle;
            /* margin-left: -6px; */
            /* top: 0; */
            left: -6px;
            width: 14px;
            height: 14px;
            line-height: 11.5px;
            text-align: center;
            background: rgba(75, 172, 253, .3);
            color: #4BACFD;
            font-size: 18px;
            border-radius: 50%;
        }
        .progress_content{
            position: absolute;
            top: -4px;
        }
        .progress_title{
            font-size: 15px;
            color: #222;
            font-weight: 600;
            margin-bottom: 3px;
        }
        .progress_time{
            color: #999999;
            font-size: 12px;
        }
        .active{
            color: #2BA0FF;
        }
    

    JS部分:

     var progressList = [
                {'progress_title':'无感支付签约成功','progress_time':'2020.06.10 09:00'},
                {'progress_title':'提额申请提交成功,银行审核中。','progress_time':'2020.06.10 10:00'},
                {'progress_title':'提额审核通过,提额额度xxxx元。','progress_time':'2020.06.10 10:05'},
                {'progress_title':'提额成功,当前可用额度为10000元','progress_time':'2020.06.10 10:05'}
            ]
            function renderProgress(progressList){
                var progressBox = document.querySelector('.progress_box');
                console.log(progressBox)
                console.log(progressList);
                var progressTemplate = ''
                for(var i = 0; i < progressList.length; i ++){
                   if(i == progressList.length - 1){
                    progressTemplate += "<li class='last_progress'><div class='progress_content'><p class='progress_title active'>"+progressList[i].progress_title+"</p><p class='progress_time'>"+progressList[i].progress_time+"</p> </div></li>"
                   }else{
                    progressTemplate += "<li><div class='progress_content'><p class='progress_title'>"+progressList[i].progress_title+"</p><p class='progress_time'>"+progressList[i].progress_time+"</p> </div></li>"
                   }
                }
                progressBox.innerHTML = progressTemplate
            }
            renderProgress(progressList)
    
    展开全文
  • 原生js的ajax数据渲染

    2021-08-08 03:52:14
    那么渲染之后的元素我们能用js去获取嘛? 答案是能!一定能。然后你可以对请求过来的元素进行各种操作,改样式,那些都是你的事了。 如果你的txt里面是一个类似json对象的字符串,那么你想要以json对象格式输出的话...

    ajax应用不只是页面功能的提升,也是性能优化的一种方式。

    兼容这块的话就是其ajax对象,在ie和其他浏览器的不同,那么现在基本上w3c已经给出了兼容的写法

    var xmlhttp;

    if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}

    else{xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');}

    然后就是发送,和 异步的填写

    xmlhttp.open("GET","ajax.txt",true);

    xmlhttp.send();

    然后基于返回的参数值来写事件

    if(xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    //这里面就是我们写的事件。

    }那么这个请求我们得到了什么?

    xmlhttp.responseText

    这个就是我们请求的东西,比如上面我们请求的对象是ajax.txt,那么我们的xmlhttp.resposeText就是请求的值。这个值就是整个txt所有的文字。如何这个text文件是一个html格式,我的意思不是说他是html文件,是里面的内容是一个html格式的字符串,那么直接插入到dom结构里面,那么浏览器会去渲染这个字符串,大到我们想要的效果。

    那么渲染之后的元素我们能用js去获取嘛?

    答案是能!一定能。然后你可以对请求过来的元素进行各种操作,改样式,那些都是你的事了。

    如果你的txt里面是一个类似json对象的字符串,那么你想要以json对象格式输出的话,直接赋值是不行的,这里需要用到eval函数。这个函数就是执行这个函数传过来的字符串,将传过来的值当做js去执行,那么我们就得到了一个json对象。

    当然jq对于ajax已经封装的很好了,各种参数已经满足了我们开发的需求,但是从进阶角度还是要看看这些值是如何转变的,况且,原生,速度快 。

    下面附上我测试的代码 。

    ajax

    22

    展开全文
  • 原生js渲染列表

    万次阅读 2018-09-29 10:07:23
    做了一个简单的原生循环渲染: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" ...

    做了一个简单的原生循环渲染:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title></title>
    
    		<style type="text/css">
    			.id-w {
    				width: 100%;
    				height: 60px;
    				border: 1px solid #ccc;
    				display: flex;
    				justify-content: space-around;
    				align-items: center;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="main">
    
    			<div id="" class="id-w">
    				<div id="">昵称</div>
    				<div id="">时间</div>
    			</div>
    
    		</div>
    
    		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    		<script type="text/javascript">
    			var list = [{
    					name: "小张",
    					time: "12:22"
    				},
    				{
    					name: "小刘",
    					time: "12:22"
    				},
    				{
    					name: "小李",
    					time: "12:22"
    				},
    				{
    					name: "小孙",
    					time: "12:22"
    				},
    				{
    					name: "小周",
    					time: "12:22"
    				},
    			]
    			var cent = document.getElementById("main");
    
    			console.log(cent);
    			for(var i = 0; i < list.length; i++) {
    				cent.innerHTML += "<div id='' class='id-w'>" +
    					"<div id=''> " + list[i].name + "</div>" +
    					"<div id=''>" + list[i].time + "</div></div>";
    			}
    		</script>
    	</body>
    
    </html>

     

    展开全文
  • 字符串模板 <div id="box"></div> var list = [{ id:'001', name:'iphone12 plugs', imgurl:'img/ip7.jpg', price:10000.00, sale:9999.00, color:'绿色' ... name:'iphone11'

    字符串模板

    <div id="box"></div>
    
    var list = [{
    	        id:'001',
    	        name:'iphone12 plugs',
    	        imgurl:'img/ip7.jpg',
    	        price:10000.00,
    	        sale:9999.00,
    	        color:'绿色'
    	    },{
    	        id:'002',
    	        name:'iphone11',
    	        imgurl:'img/ip11.jpg',
    	        price:6688.00,
    	        sale:6000.00,
    	        color:'黑色'
    	    },{
    	        id:'003',
    	        name:'荣耀7',
    	        imgurl:'img/honor7.jpg',
    	        price:2000.00,
    	        sale:1899.00,
    	        color:'白色'
    	    }];
    
       var content = `<ul>`;
    	    for(var i=0;i<list.length;i++){
    	    	content += `<li data-guid="${list[i].id}">
    				<img src="${list[i].imgurl}"/>
    				<h4>${list[i].name}</h4>
    				<p>颜色:${list[i].color}</p>
    				<p>原价:<del>${list[i].price.toFixed(2)}</del></p>
    				<p>现价:<span>${list[i].sale.toFixed(2)}</span></p>
    	    	</li>`;
    	    }
    	  content += `</ul>`;
    
    	    // 获取元素
    	    var box = document.getElementById('box');
    	    box.innerHTML = content;
    
    展开全文
  • 数据 var data=[]; $(".newbrand_box.ClearFix.mt40").each(function(index,item){ var obj={}; obj.titl4=$(item).find(".h2_top").text(); obj.src=$(item).find(".lazy").attr("src"); obj.src1=$(item).find(...
  • //使用原生代码将输入表单和下拉框合并,无兼容性问题但是存在样式问题需要调整 < div class = "wrap-box" v - if = "item.type == 'select'" > < el - select v - if = "item.value == '' || false" ...
  • 2.JS代码 源码内容:里面的参数,url 根据自己的需求填写 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ ...
  • <p style="text-align:center"><img alt="" src="https://img-ask.csdnimg.cn/upload/1622372096451.jpg" /></p>  </p>
  • 原生js动态生成表格 给定一个二维数组 自动生成一个带序号的表格 JavaScript function innerlist(arrs){ var tr1 = ''; var tr2 = ''; var td = ''; var ove=""; var num = 0; var arr = new Array(); for(i=...
  • js原生实现for循环渲染数组</title> <head> <style type="text/css"> #wrapper { background-color: pink; } #wrapper .row { border: 1px solid #000; } .row div{ border: 1px solid #000; ...
  • Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便。即使是复杂的 Json数组对象,也可以使用 多层嵌套的 v-for 实现,格式如下:&lt;div v-for="(item,index) ...
  • 关于数据渲染的知识点总结模板字符串捕获数据渲染数据 ->bindHTML()下拉刷新 ->window.oncroll = function(){}添加商品到购物车 ->addCart() 模板字符串 使用模板引擎可以帮助我们更加快速的渲染页面,需要...
  • 解决方法,1:在元素渲染完成后再 绑定shijian 2. 利用on()事件绑定 ($(ParentEle).on("click",".thisEle",function(){}) 转载于:https://www.cnblogs.com/kairos/p/10207794.html...
  • 实际需求如下图: ... 要求:原生js渲染,所以我们不能用v-for,只能用字符串拼接或者...如何去改变表格的内容,原生js没有vue那样的机制,数据改变重新渲染 我们针对以上三个方面来写我们的代码 图片需求有四个要...
  • ajax渲染页面原生.html

    2021-06-10 02:46:19
    Document 一键复制 编辑 Web IDE 原始数据 按行查看 历史
  • 点击提交 点击删除 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">... body.
  • function renderDom(str){ var _div = document.createElement('div'); _div.innerHTML = str; var dom_temp = _div....原生js快速渲染dom节点 转载于:https://www.cnblogs.com/Silababy/p/6030579.html
  • 原生js实现数据的双向绑定需要了解的属性是原色js的Object.definePrototype(obj,pop,descript);obj:被构造的对象pop:被构造的对象的属性,创建对象或修改已有的对象descript:修改的熟悉的描述canvas粒子烟雾{{test}}...
  • 主要为大家详细介绍了JS实现数据动态渲染的竖向步骤条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • javascript 动态渲染节点

    千次阅读 2019-07-30 18:56:16
    //动态渲染 //箭头函数 init = () => { let table = document.getElementById("table1"); initList.forEach(element => { let rows = table.rows.length; createDemo(rows, element, table); }); } ...
  • var data = {//模拟后端返回的json数据 "textArr":[ {"grade":'一等品',"mix":'20%',"number":'200'}, {"grade":'准一等品',"mix":'20%',"number":'200'}, {"grade":'二等品',"mix":'30%',...
  • ajax数据获取及渲染

    2018-03-21 11:46:28
    模拟ajax调接口,渲染数据。。。。。。。。。。。。。。。。
  • 视频演示: 资源下载:
  • js-批量渲染数据

    2021-10-15 19:08:58
    使用场景,淘宝京东的商品列表 思路:1.从后端拿到所有数据的列表 2.遍历 3.字符串模板将数据放到节点中 4.将节点放到页面中
  • 原生JS 将数组的数据循环遍历到HTML中

    万次阅读 多人点赞 2019-08-19 17:23:41
    下面是原生JS 将数组的数据循环遍历到HTML中的列子,是的,没有用框架的HTML里的循环是用JS将一串字符串标签丢给HTML的id中的。 JS: var forenoonStr = ""; var forenoonData = ["8:00", "8:30", "9:00", "9:30",...
  • 将数组里面的内容填充到表格之中,并将属性设置为表头 <!DOCTYPE html> <html lang=""> ...meta name="viewport" content="width=device-width, initial-scale=1.0">...style type="text/.
  • 原生select 动态渲染option,获取option的value值
  • js原生table渲染

    2021-09-24 09:29:33
    <div class='calendarTable'> <div class='calendarHeader'> <div class="td Time">Time</div> <div class="td Country">Country</div> <div class="td Event"&...div cl.
  • 但是原生js就会复杂一些了。特别是按钮事件的那个(“ )和 (’)特别让人脑瓜子疼。 最近做了一个功能,里面用的就是原生js实现。 写在js里面的代码:(用的ajax请求将文件保存到服务器,返回的数据遍历到table) 在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,857
精华内容 19,542
关键字:

原生js动态渲染数据