<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="width:400px;height:100px;margin:50px auto;">
<div id="noticetxt" style="width:600px;height:30px;border:1px dashed;padding:5px;line-height:30px;white-space: nowrap;overflow: hidden;"><span id="" style="color:red">通知：</span><span>要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是一旦放弃就不要抱怨</span></div>
</div>
<div style="width:200px;height:200px;border:1px solid;padding:20px;margin:100px;line-height:30px;overflow: hidden;" id="box">
要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是一旦放弃就不要抱怨， 要得到你必须要付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是一旦放弃就不要抱怨，
</div>
<script type="text/javascript">
//js盒子模型指的是通过js提供的一系列的属性和方法，获取页面中元素的样式信息
//clientHeight(clientWeight):指定的内容宽度(随内容高度)+padding
//offsetWidth(offsetHeight): 指定的内容宽度+padding+border
//scrollWidth(scrollHeight):真实内容的宽度（包含溢出）+（padding-top）
var divNotice = document.getElementById('noticetxt');
var timer = setInterval(function() {
var originLeft = divNotice.scrollLeft;
divNotice.scrollLeft = originLeft + 1;
var moveLeft = divNotice.scrollLeft;
if (originLeft === moveLeft) {
//clearInterval(timer);
divNotice.scrollLeft = 0;
}
}, 10)
</script>
</body>
</html>
