救救孩子吧!

这是移动端视频直播的页面,使用了mui框架,我想在id为liuyan的div中加上一个滚动条,但是不论怎么加都会出现样式的错误,求求大牛们帮帮忙!

<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body "getTime()">
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">视频直播</h1>
		</header>
		<div class="mui-content" style="background: white;">
			<div id="shipin">
				<video src="images/WeChat.mp4" controls="true" width="100%" height="280px"></video>
			</div>

			<div id="liuyan" style="height:245px ;" >
				<p id="date1"></p>
				<p id="name">张三:6666</p>
			</div>

			<div>
				<input id='messageValue' type="text" class="mui-input-clear mui-input" placeholder="请输入" style="width: 60%;">
				<button id='onMessage' data-loading-text="提交中" class="mui-btn mui-btn-success " style="width: 35%;height: 40px;">发送</button>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js "></script>
	<script src="publicJs/common.js "></script>
	<script type="text/javascript " src="js/html5video.js "></script>
	<script>
		function getTime() {
			var newDate = " ";
			var dateObj = new Date();
			var year = dateObj.getFullYear(); //年
			var month = dateObj.getMonth() + 1; //月  (注意:月份+1)
			var date = dateObj.getDate(); //日
			var day = dateObj.getDay();
			var weeks = ["星期日 ", "星期一 ", "星期二 ", "星期三 ", "星期四 ", "星期五 ", "星期六 "];
			var week = weeks[day]; //根据day值,获取星期数组中的星期数。
			var hours = dateObj.getHours(); //小时
			var minutes = dateObj.getMinutes(); //分钟
			var seconds = dateObj.getSeconds(); //秒

			if(month < 10) {
				month = "0 " + month;
			}
			if(date < 10) {
				date = "0 " + date;
			}
			if(hours < 10) {
				hours = "0 " + hours;
			}
			if(minutes < 10) {
				minutes = "0 " + minutes;
			}
			if(seconds < 10) {
				seconds = "0 " + seconds;
			}

			newDate = year + "年 " + month + "月 " + date + "日 " + hours + ": " + minutes + ": " + seconds + "&nbsp &nbsp " + week;
			document.getElementById("date1").innerHTML = newDate; //在div中写入时间
			setTimeout('getTime()', 500); //每隔500ms执行一次getTime()

		}

		//发送消息点击事件
		document.getElementById("onMessage").addEventListener('tap', function() {
			var message = document.getElementById("messageValue");
			if(message == null || message == "" || message == undefined) {
				alert("发送消息不能为空");
			} else {
				document.getElementById("liuyan").innerHTML += '<p>李四:'+message.value+'</p>';
				message.value = "";
			}

		});
	</script>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值