js渲染案例，无需其他文件源，持续更新中

最新推荐文章于 2023-03-11 00:33:36 发布
最新推荐文章于 2023-03-11 00:33:36 发布
阅读量402 收藏 1
点赞数
分类专栏： python django从入坑到爬出来 文章标签： js html python jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mostermoonsky/article/details/108650184
版权

js案例

鼠标光标异动不同数字，窗口内容翻页

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>testing</title>
    <style type="text/css">
             .wrapper {
            width: 50px;
            height: 50px;
            border: 1px solid pink;
            overflow: hidden;  // 把多余溢出窗口的内容隐藏掉
        }
    </style>

    <script src="jquery-3.5.1.min.js"></script>

    <script>
        $(function () {
            $("div h5").mouseover(function () {
            var index = $(this).index();
            console.log(index);
            $(".wrapper p").eq(index).show().siblings().hide();
            });
        })
    </script>

</head>
<div class="wrapper">
<p>test1</p>
<p>test2</p>
<p>test3</p>
</div>

<div>
<h5>1</h5> //鼠标在 1 2 3上切换，js脚本会获取每个标签的index，来决定显示哪条。淘宝橱窗应用此技术
<h5>2</h5>
<h5>3</h5>
</div>

</html>

给超链接添加背景以及鼠标悬浮背景切换，css组合

      #left li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: white;
        }

        #left li a:hover {
            background-image: url(images/abg.gif);
        }

空格和 “>”

E > F 表示选择E元素的所有子F元素，与E F的区别在于，E F选择所有后代元素，>只选择一代

标题选中切换显示不同内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        li{
           list-style-type: none;
        }
        .tab{
            width: 978px;
            margin: 100px auto;
        }
        .tab_list{
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        .tab_list li{  /*标题的li标签依次左右排列起来*/
            float: left;
            padding: 0 20px;
            line-height: 39px;
            text-align: center;
            cursor: pointer;
        }
        .tab_con{
            border: 1px solid turquoise;
        }
        .item{
            display: none;  //默认不显示
        }
        .tab_list .current{
            background-color: #c81623;
            color: white;   /*这是字体颜色*/
        }
    </style>
</head>
<body>
<div class="tab">
    <div class="tab_list">
        <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
        </ul>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block">
            商品介绍模块内容
        </div>
        <div class="item">
            规格与包装模块内容
        </div>
        <div class="item">
            售后保障模块内容
        </div>
        <div class="item">
            商品评价（50000）模块内容
        </div>
        <div class="item">
             手机社区模块内容
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".tab_list li").click(
            function () {
                $(this).addClass("current").siblings().removeClass("current");
                var index = $(this).index();
                console.log(index);
                $(".tab_con .item").eq(index).show().siblings().hide();
            }
        );
    });
</script>

</body>
</html>

高亮显示

(图片自行找个长条图就行)

<!doctype html>
<html lang="en">
<head>
    <title>
        index
    </title>
    <meta charset="UTF-8">
    <script src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style-type: none;
        }
        body{
            background-color: black;
        }
        .wrapper{
            margin: 100px auto 0; /*左右auto 会居中对齐*/
            width: 630px;
            height: 330px;
            border: white 1px solid;
            padding: 10px 0 0 15px;
             overflow: hidden;
        }
        .wrapper li img{
            float: left;
            height: 55px;
            width: 100%;
            display: block;

            /* margin: 0 10px 10px 0; 因为宽度放这边已经是100%，放在li标签才能有间距效果*/

        }
        .wrapper li{
            margin: 0 0 10px 0;
            float: left;
        }
    </style>
</head>
<body>

<div class="wrapper">
<ul>
    <li><a href="#"><img src="./images/lili.jpg" alt="test"></a></li>
     <li><a href="#"><img src="./images/lili.jpg" alt="test"></a></li>
     <li><a href="#"><img src="./images/lili.jpg" alt="test"></a></li>
     <li><a href="#"><img src="./images/lili.jpg" alt="test"></a></li>
     <li><a href="#"><img src="./images/lili.jpg" alt="test"></a></li>
</ul>
</div>
<script>
    $(function () {
        $(".wrapper li").hover(
            //鼠标进入时的渲染效果
            function () {
                $(this).siblings().stop().fadeTo(400,0.5);
            },
            //鼠标移开时渲染效果
            function () {
                $(this).siblings().stop().fadeTo(400,1);
            }
        )
    })
</script>

</body>
</html>

效果：鼠标指向的条，高亮显示
在这里插入图片描述

单选框复选框

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.content{
				width: 500px;
				border: 1px solid red;
				margin: 0 auto;
			}
			.a{
				border-bottom: 1px solid green;
			}
			.b .j-checkbox{
				display: block;  /*这个display block只对input这个标签有效*/
				margin: 20px 3px;
			}
			.c{
				border-top: 1px solid yellow;
			}
			.a,.b,.c{
				margin: 50px 0;
			}
		</style>
		<script src="jquery-3.5.1.min.js"></script>
	</head>

	<body>
		<div class="content">
			<div class="a">

                <label>
                    <input type="checkbox" class="checkall">
                </label>

            </div>
			<div class="b">
                <label>
                <input type="checkbox" class="j-checkbox">
				<input type="checkbox" class="j-checkbox">
				<input type="checkbox" class="j-checkbox">
                </label>
			</div>
			<div class="c">
                <label>
                    <input type="checkbox" class="checkall">
                </label>
            </div>
		</div>

		<script>
			$('.checkall').change(function() {
				$(".j-checkbox,.checkall").prop("checked", $(this).prop("checked")); //checkbox 本身就具有checked这个属性，选中为true 取消为false
				console.log($(this).prop("checked"))
			});

			$('.j-checkbox').change(function() {
				if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
					$(".checkall").prop("checked", true);
				} else {
					$(".checkall").prop("checked", false);
				}
				console.log($('.j-checkbox:checked').length);
				console.log($('.j-checkbox').length);
			});
		</script>
	</body>

</html>

返回顶部功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height: 1500px;
        }

		 .container { /*主容器*/
			width: 900px;
			height: 500px;
			background-color: skyblue;
			margin: 200px auto;

		}

        .back { /*底部容器*/
            position: fixed;/*元素的位置相对于浏览器窗口是固定位置 即使窗口是滚动的它也不会移动*/
            width: 1000px;
            height: 50px;
            background-color: pink;
			left: 500px;
			bottom: 100px;

        }


    </style>
    <script src="jquery-3.5.1.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件

             var boxTop = $(".container").offset().top;
              console.log(boxTop);
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());

                if ($(document).scrollTop() >= boxTop) {  //scrollTop 是返回被选元素的垂直滚动条位置
                    $(".back").fadeIn(); //淡入 显示出来
                } else {
                    $(".back").fadeOut();//淡出 隐藏起来
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").animate({
                    scrollTop: 0
                });

            })
        })
    </script>
</body>

</html>

滑块点击及滚动效果

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			.slider-bar {
				position: fixed;
				right: 0;
				top: 50%;
				/*margin-left: 600px;*/ /*right去掉后才能生效*/
				display: none;
			}

			.a,
			.b,
			.c {
				width: 150px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border: 1px solid black;
				cursor: pointer;
			}

			.w {
				width: 1200px;
				margin: 10px auto; /*这是外边距*/
			}

			.header {
				height: 150px;
				background-color: purple;
			}

			.banner {
				height: 250px;
				background-color: skyblue;
			}

			.green {
				height: 500px;
				background-color: green;
			}

			.blue {
				height: 500px;
				background-color: blue;
			}

			.black {
				height: 500px;
				background-color: black;
			}

			.selected {
				background-color: red;
				color: #FFFFFF;
			}

			.floot {
				height: 1000px;
			}
		</style>
		<script src="jquery-3.5.1.min.js"></script>
	</head>

	<body>
		<div class="slider-bar">
			<div class="a selected">绿色</div>
			<div class="b">蓝色</div>
			<div class="c">黑色</div>
		</div>

		<div class="header w"></div>

		<div class="banner w"></div>

		<div class="main">
			<div class="green w"></div>
			<div class="blue w"></div>
			<div class="black w"></div>
		</div>

		<div class="floot">

		</div>

		<script>
			function toggleTllo() {
				if ($(document).scrollTop() >= $(".banner").offset().top) {
					$(".slider-bar").fadeIn();
				} else {
					$(".slider-bar").fadeOut();
				}
			}
			var flag = true;
			$(window).scroll(function() {
				// console.log($(document).scrollTop());
				// console.log($(".banner").offset().top);
				toggleTllo();
				if (flag) {
					$(".main div").each(function(i, ele) {
						// console.log($(document).scrollTop());
						// console.log($(ele).offset().top);
						if ($(document).scrollTop() >= $(ele).offset().top) {//each() 方法为每个匹配元素规定要运行的函数。 三个div依次触发
							$(".slider-bar div").eq(i).addClass("selected").siblings().removeClass("selected");
						}
					});
				}

			});

			$(".slider-bar div").click(function() {
				    flag = false; /*这个flag是为了点击animate偏移的时候使toggleTllo失效*/
					var wz = $(".main div").eq($(this).index()).offset().top;

				$("body,html").stop().animate({
					scrollTop: wz
				},function(){
					flag = true;
				});
				$(this).addClass("selected").siblings().removeClass("selected");
			});
		</script>
	</body>

</html>

悬停显示提示框

鼠标放在提示信息上 显示出提示框，移开后隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>鼠标悬停显示提示信息窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.contact{
	width: 80px;
	height:20px;
	padding: 2px;
margin:20px 0 10px 50px;background-color:#CCCCCC;
text-align:center;
}
.us{display:none;width:300px;height:40px;
padding:10px;position:relative;top:0;left:50px;
background-color:#0099FF;
}
</style>
<script src="jquery-3.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contact").mouseover(function(){
$(".us").show("slow");
$(".test").hide("slow");
$(".contact").mouseout(function(){
$(".us").hide("slow");
$(".test").show("slow");
});
});
})
</script>
</head>
<body>
<div class="contact">联系我们</div>
<div class="us">提示内容！提示内容！提示内容！</div>
<div class="test">上面会显示悬浮内容</div>
</body>
</html>

电影排行榜

<!DOCTYPE html>
<html lang="en">
<head>
	<title>js测试案例</title>
    <meta http-equiv="Content-Type"
			content="text/html; charset=utf-8"/>

<style type="text/css">
	* {padding: 0;
        margin: 0;}

	.box{
		width: 300px;
		height: 450px;
		margin: 50px auto;
		border: 1px solid #000;
	}
    .box>h1{
		font-size: 20px;
		line-height: 35px;
		color: deeppink;
		padding-left: 10px;
		border-bottom: 1px dashed #ccc;
	}

	ul>li{
		list-style: none;padding: 5px 10px;
		border: 1px dashed #ccc;

	}
	ul>li:nth-child(-n+3) span{
		background: deeppink;
	}
	ul>li>span{
		display: inline-block;
		width: 20px;
		height: 20px;
		background: #ccc;
		text-align:center;
		line-height: 20px;
		margin-right: 10px;
	}
	.content{
		overflow: hidden;
		display: none;
	}
	.content>img{
		width: 80px;
		height: 100px;
		float: left;
	}
	.content>p{
		width: 180px;
		height: 100px;
		float: right;
		font-size: 12px;
		line-height: 20px;
	}
	.current .content{  /*current下的content才能有block效果*/
		display: block;
	}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function() {
	$("li").hover(function(){
		$(this).addClass("current")
	},function(){
		$(this).removeClass("current")
	})
})
</script>
</head>
<body>
	<div class="box">
		<h1>电影排行榜</h1>
		<ul>
			<li><span>1</span>战狼1
				<div class="content">
					<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1075481921,1149912994&fm=58&w=121&h=140&img.JPEG">
					<p>
						简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一...
					</p>
				</div>
			</li>
			<li><span>2</span>战狼2
				<div class="content">
					<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1075481921,1149912994&fm=58&w=121&h=140&img.JPEG">
					<p>
						简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一...
					</p>
				</div>
			</li>
			<li><span>3</span>战狼3</li>
			<li><span>4</span>战狼4</li>
			<li><span>5</span>战狼5</li>
			<li><span>6</span>战狼6</li>
			<li><span>7</span>战狼7</li>
		</ul>
	</div>
</body>
</html>

效果
在这里插入图片描述

两侧对联式弹窗

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	body{
		height: 2500px;
	}
	.left{
		float: left;
		position: fixed;
		left: 0;
		top: 200px;
	}
	.right{
		float: right;
		position: fixed;
		right:  0;
		top: 200px;
	}
	img{
		display: none;
	}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function() {
$(window).scroll(function(){
	// 网页滚动偏移位
	var offset = $("html,body").scrollTop();
	if(offset>=800){
		$("img").show(1000)
	}else{
		$("img").hide(1000)
	}
	console.log(offset)
})
})
</script>
</head>
<body>
	<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpgg" class="left">
	<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg" class="right">
</body>
</html>

效果(下滑滚动条，滚动800px弹出)
在这里插入图片描述

菜单展示方式一

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta http-equiv="Content-Type"
		content="text/html; charset=utf-8"/>
<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	.nav{
		list-style: none;
		width: 300px;
		height: 50px;
		background: red;
		margin: 100px auto;
	}
	.nav>li{
		width: 100px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		float: left;
	}

	.current{
		list-style: none;
		background: blue;
		display: none;
	}

</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function() {
	//监听一级菜单的移入事件
	$(".nav>li").mouseenter(function(){
		var $current = $(this).children(".current");
		//让当前正在运行的动画停止，
		$current.stop();
		//展示二级菜单
		$current.slideDown()
	});
	$(".nav>li").mouseleave(function(){
		var $current = $(this).children(".current");
		$current.stop();
		$current.slideUp()
	})
})
</script>
</head>
<body>
	<ul class="nav">
		<li>一级菜单
			<ul class="current">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>一级菜单
			<ul class="current">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>一级菜单
			<ul class="current">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
	</ul>

</body>
</html>

菜单展示二

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	.nav{
		list-style: none;
		width: 300px;
		margin: 100px auto;
		/*border: 1px solid #000;*/
	}
	.nav>li{
		border: 1px solid #000;
		line-height: 35px;
		border-bottom: none;
		text-indent: 2em;
	}
	.nav>li:last-child{
		border-bottom: 1px solid #000;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
	.nav>li:first-child{
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}
	.nav>li>span{
		float: right;
		padding-right: 20px;

	}
	.sub{
		display: none;
	}
	.sub>li{
		list-style: none;
		background: mediumpurple;
		border-bottom: 1px solid white;

	}
	.sub>li:hover{
		background: red;
	}
	.nav>.current>span{
		transform: rotate(90deg); /*旋转90度*/
	}

</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function() {
		//监听一级菜单 点击事件
		$(".nav>li").click(function(){
			// 拿到二级菜单
			var $sub = $(this).children(".sub");
			$sub.slideDown();
			//拿到非当前的二级菜单 ，让非当前的二级菜单收起
			var otherSub = $(this).siblings().children(".sub");
			otherSub.slideUp();
			//让箭头90度旋转
			$(this).addClass("current");
			$(this).siblings().removeClass("current")
	})
})
</script>
</head>
<body>
	<ul class="nav">
		<li>一级菜单<span>></span>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>一级菜单<span>></span>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>一级菜单<span>></span>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
	</ul>
</body>
</html>

弹窗广告

<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
<style type="text/css">
	* { padding: 0; margin: 0; 	}
	.ad{ position: fixed; right: 0; bottom:0; display: none; }
	.ad>span{ display: inline-block; width: 30px; height: 30px; /*background: red;*/ position: absolute; top: 0; right: 0; }
	.ad>img{
		width: 200px;
		height: 200px;
	}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function() {
	$("span").click(function(){
		$(".ad").remove();

	});

	// 动画之前先调用 stop()，避免出现动画队列
	// slideDown()、fadeOut()、fadeIn()参数1动画耗时，参数2动画完毕执行的动作
	// $(".ad").stop().slideDown(1000,function(){
	// 	$(".ad").fadeOut(1000, function(){
	// 		$(".ad").fadeIn(1000)
	// 	})
	// });


	$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(2000)  /*slideDown() 适用于通过 jQuery 方法隐藏的元素，或在 CSS 中声明 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。*/

});
</script>
</head>
<body>
	<div class="ad">
		<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1498827195,3078250300&fm=26&gp=0.jpg" alt="">
		<span></span>
	</div>
</body>
</html>

animate的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	div{
		width: 100px;
		height: 100px;
		margin-top: 10px;
		background: red;
	}
	.two{
		background: blue;
	}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function() {
	$("button").eq(0).click(function(){
		$(".one").animate({
			width:50
		},2000);
		$(".two").animate({
			marginLeft:500
		},2000);

	});
	$("button").eq(1).click(function(){
		$(".one").animate({
			width:"+=100"
		},2000)
	});
	$("button").eq(2).click(function(){
		$(".one").animate({
			width:"hide"  /*只要是animate里面的就是渐变的动作*/
		},2000)
	});
	$("button").eq(3).click(function(){
		$(".one").animate({
			width:"toggle"  /*如果内容显示，width: "toggle" 将会结果隐藏DIV及内容；如果内容隐藏，width: "toggle" 将会结果显示DIV及内容；*/
		},2000)
	})
});
</script>
</head>
<body>
	<button>操作属性</button>
	<button>累加属性</button>
	<button>关键字hide</button>
	<button>关键字toggle</button>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>
@小时候可乖了@
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js案例——数据渲染
qq_43151638的博客
10-18 1239
通过对象循环插入数据，进行数据渲染 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ ...
JS-实现案例渲染
m0_47559177的博客
10-09 324
需求：按照数据渲染页面 节点操作: 添加节点 全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="i
Vue.js实例学习：条件渲染
若水弹丸之地
03-06 818
一、v-if 在 Vue 中， v-if 相当于 if(){} ; v-else 相当于 else{} ; v-else-if相当于elseif(){} v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。 1、v-if、v-else &amp;lt;d...
【javascript继承案例】function class 渲染页面
m0_49442965的博客
01-08 101
【代码】【javascript继承案例】function class 渲染页面。
用JS渲染的单页面应用其实性能还是比较差的
张同光 (Tongguang Zhang)：Hello everyone !
04-16 3998
https://github.com/xufei/blog/issues/5 证明这个结论之前，要先阐述一下浏览器的渲染机制，这里先祭出这篇文章：《关键呈现路径》，文章主要介绍了浏览器渲染过程，其实大家也大概都了解过： 如上图，浏览器通过网络请求加载页面资源，在页面呈现之前无论如何都要经历以下过程： HTML→DOMCSS→CSSOMDOM + CSSOM → Ren
持续更新中的微信小程序和小游戏的源码案例库。目前涵盖了120多个微信小程序或小游戏。.zip
最新发布
01-05
这个压缩包文件包含了超过120个微信小程序和小游戏的源码案例，对于学习和理解这两类应用的开发流程、设计模式以及最佳实践具有极高的价值。 1. 微信小程序概述： 微信小程序是由腾讯公司推出的轻型应用平台，用户...
微信小程序开发-LOL战绩查询案例源码.zip
11-21
在这个案例中，开发者可以查看整个项目的结构，包括app.js、app.json、app.wxss等核心文件，以及各个页面的js、json、wxml和wxss文件。这些文件分别对应小程序的全局配置、页面配置、样式表和界面结构。 3. **数据...
微信小程序开发-乐租租房工具案例源码.zip
12-12
3. **JS逻辑处理**：在微信小程序中，JS文件用于编写业务逻辑和数据管理。它引入了Page对象，每个页面都有独立的数据域和生命周期方法，如onLoad、onShow等，便于处理页面加载、显示等事件。 4. **API调用**：微信...
微信小程序开发-微乐居房产综合版案例源码.zip
12-12
里面可能包含了app.js（全局配置）、app.json（全局配置文件）、pages目录（存放各页面的代码）、utils目录（通用工具函数）等，通过深入分析这些源码，可以学习到实际项目中的开发技巧和最佳实践。 8. **版本控制*...
SpringBoot+Vue的实战入门案例
08-02
在本实战入门案例中，我们将探索如何结合Spring Boot与Vue.js构建一个现代Web应用程序。Spring Boot简化了Java的Spring框架的使用，而Vue.js则是一个轻量级且强大的前端JavaScript框架，两者结合可以构建出高性能、...
JavaScript中完成渲染购物车案例
qq_53847322的博客
09-05 835
reduce累计器的使用，filter过滤筛选的使用
渲染商品列表及综合价格筛选案例（es6)
helongzhi的博客
07-08 990
渲染商品列表及综合价格筛选案例（es6)
浏览器渲染例子记录
weixin_33841722的博客
10-30 49
这个东西有一个滚动条，是一个js插件。当频道超过9个的时候就使用，使之出现滚动条。 但css一开始是默认把所有频道都显示出来的。这样，就导致超过9个频道时，会出现一个折叠部分频道而导致的屏幕闪动。 若开始把整个列表css display:none， js时再打开；也会出现打开折叠的闪动。 解决方法： css max-height：370px； 原因： css比js预先加载。间隔效果...
2023年web前端开发之JavaScript基础(五)基础完结
全栈技术分享，项目分享，资料分享
03-11 360
JavaScript 基础 - 对象语法
js 渲染上传图片
weixin_43326384的博客
05-10 806
function previewImage(fileList,imgStyle,preview) { for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; var imageType = new RegExp("^image\/"); if (!imageType.test(file.type)) continue;
【 Threejs 】- Shader 着色器实例渲染教程
老司机的后备箱
12-20 2136
1.顶点着色器和片元着色器需要保持变量统一，uniform变量和varying变量2.顶点着色器和片元着色器的都需要main函数3.顶点着色器的实际修改是，片元着色器的实际修改是4.浏览器不执行着色器语言，需要借助Threejs5.Threejs使用ShaderMaterial来使用着色器，可以通过变量间接修改着色器内容！6.着色器是通过GPU渲染的，不会占用CPU资源好了接下来所学即所用，把这些枯燥的知识运用到代码当中。main.js 完整代码init();animate()
JavaScript 页面渲染
weixin_33733810的博客
05-18 2482
1. 从输入url到得到html的详细过程 　　1.1 加载资源的形式 　　 输入 URL 或跳转页面 加载 html 　　1.2 加载一个资源的过程 　　　　浏览器根据DNS服务器得到域名的IP地址 　　　　向这个IP的机器发送http请求 　　　　服务器收到后 处理并返回 http请求 　　　　浏览器得到返回内容 　　1.3 浏览器渲染页面的过程 　　　　根据 HTM...
利用js简单的渲染数据
m0_62877814的博客
11-03 1573
利用js简单的渲染数据,并且刷新页面数据不丢失
js 数字滚动 动画
赶路人儿
07-22 1505
无标题文档 var a=[]; var s=0; var b=[]; function x(num){ for(var i=0;i var n=num.charAt(i); a.push(n); } m(); } function m(){ var k=0; var span=document.createElement('span'); document.body
three.js editor 中renderer渲染更新场景
06-08
在three.js editor中，要更新场景，可以按照以下步骤： 1. 获取场景对象和渲染器对象。 ```javascript var scene = editor.scene; var renderer = editor.renderer; ``` 2. 更新场景对象。 在编辑器中进行场景的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值