webAPP开发三：实现数据的交互显示

最新推荐文章于 2024-05-30 09:47:08 发布

lvzekun-IT

最新推荐文章于 2024-05-30 09:47:08 发布

阅读量7.5k

点赞数

分类专栏：前端基础前端学习

本文链接：https://blog.csdn.net/m0_37727198/article/details/81630708

版权

在webAPP开发过程中遇到代码逻辑错误，错误地将初始化函数置于对象初始化之前，导致.html()方法失效，引发未定义的错误。通过参考http://read.t.imooc.io/的代码和下载资源进行问题解决。附带开发截图和代码结构展示。

摘要由CSDN通过智能技术生成

开发中遇到的错误: 代码逻辑错误，将初始化函数放在了初始化对象之前，造成了 “.html()”无法识别，表示未定义、

http://read.t.imooc.io/ 参考代码下载地址。

开发截图：

代码结构：

<!DOCTYPE html>
<html ng-app ="app">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui" >
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="css/reset.css">
		<style type="text/css">
		   html{
		   	width: 100%;
		   	height: 100%;
		   	overflow-x: hidden;
		   }
		   
			body{
				text-align: left;
				width:100%;
				
				background: #e9dfc7;
			}
			.m-read-content{
				font-size: 14px;
				color: #555;
				line-height: 31px;
				padding: 15px;
			}
			.m-read-content h4{
				font-size: 20px;
				color: #736357;
				border-bottom:solid 1px #736357;
				letter-spacing: 2px;			
			}
			/*处理p间距缩进*/
			.m-read-content p{
				text-indent: 2em;
				margin: 0.5em 0;
				letter-spacing: 0px ;
				line-height: 24px;
			}
			/*处理按钮*/
			.u-tab{
				height: 34px;/*高度，居中自动，垂直居中，圆角raduis
				边距，设置字体字号，背景色，不能用red,white等，用色值，透明度*/
				margin: 10px auto;
				line-height: 34px;
				border-radius: 8px;
				border:1px solid #858382;
				font-size: 12px;
				background: #000 ;
				opacity: 0.9;
				
   			}
   			.u-tab li {
   				/*纵向排列*/
   				display: inline-block;
   				width:49%;
   				border-right: 1px solid #858382;/*中间有竖线*/
   				text-align: center;
   				color:#fff;
   			}
   			.u-tab li:nth-child(2){
   				/*选择器处理第二个无右边框*/
   				border-right: none;
   			}
   			/*按钮父元素设置宽度*/
   			.m-button-bar {
   				width: 70%;
   				max-width: 800px;
   				padding:5px ;
   				margin: 0 auto;
   			}
   			  
   		.top-nav{
   			position: fixed;
   			top: 0px;
   			height: 50px;
   			width: 100%;
   			z-index: 9999;
   			background: #000;
   			
   		}
   		.icon-back{
   			/*想对于父元素决定对位*/
   			position: absolute;
   			top:14px;
   			left:10px;
   			width:23px;
   			height: 23px;
   			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJGMkEyQkQxMjdBNDExRTU4NjA2QTJDMjFDQ0I0ODhEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJGMkEyQkQyMjdBNDExRTU4NjA2QTJDMjFDQ0I0ODhEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkYyQTJCQ0YyN0E0MTFFNTg2MDZBMkMyMUNDQjQ4OEQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkYyQTJCRDAyN0E0MTFFNTg2MDZBMkMyMUNDQjQ4OEQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Ia560AAAHWklEQVR42uyd7W9U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);
   			background-size: contain;
   			
   		   }
   		   .nav-title{
   		   	position:absolute;
   		   	top: 16px;
   		   	left: 42px;
   		   	color: #d5d5d6;
   		   	
   		   }
   		  /*写完dom模块的div,开始写底部导航栏样式*/
   		 /*背景*/
   		.bottom-nav-bk{
   			position: fixed;
   			bottom: 0px;
   			height: 70px;
   			background: #000;
   			width: 100%;
   			/*透明度*/
   			opacity: 0.9;
   			z-index: 1004;/*最大宽度*/
   		}
   		/*设置内容框位置固定，透明度为1，居中，内容居中*/
   		.bottom-nav{
   			position:fixed;
   			bottom: 0px;
   			height:70px;
   			background: none;
   			width: 100%;
   			opacity: 1;
   			z-index: 1004;
   			margin: 0 auto;/*文字*/
   			text-align: center;/*DOMdiv居中*/
   		}
   		/*设置3个div在居中,水平垂直分布*/
   		.bottom-nav .item{
   			display: inline-block;/*水平分布*/
   			width: 32%;
   			color: #FFFFFF;
   			text-align: center;
   			margin: 0 auto;
   		}
   		/*设置样式div位置居中，相对于父类item，相对位置*/
   		  .item-warp {
                width: 26px;
                margin: 0 auto;
                position: relative;
            }
   		/*设置图标文字内容样式*/
   		.icon-text{
   			position:absolute;
   			top: 25px;/*向下偏移25px*/
   			font-size: 10px;
   		}
   		/*设置图标*/
   		.icon-menu,.icon-ft, .icon-day, .icon-night{
   			position: absolute;
   			top: 3px;
   			left: 2px;
   			width:18px;
   			height: 13px;
   			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAoCAYAAABerrI1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXN

最低0.47元/天解锁文章

lvzekun-IT

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webAPP开发三：实现数据的交互显示

开发中遇到的错误: 代码逻辑错误，将初始化函数放在了初始化对象之前，造成了 “.html()”无法识别，表示未定义、http://read.t.imooc.io/ 参考代码下载地址。开发截图：代码结构：&lt;!DOCTYPE html&gt;&lt;html ng-app ="app"&gt; &lt;head&gt; &lt;meta charset="...
复制链接

扫一扫

专栏目录