1.html 的 input
2.css的图标背景和发float
3.js取值
4.js计时器,文字滚动实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="css1.css">-->
<style>
.left_1 {
float: left;
}
.right_1 {
float: right;
}
</style>
</head>
<body>
<div id="headline" style="text-align:center;font-size: large">欢迎经理莅临指导!</div>
<div style="height:35px;400px;position: relative;">
<div><input id="search_value" type="text" class='left_1' style="height:35px;320px;padding-right: 30px;"></div>
<div><input type="button" class="right_1" style=" 44px;height: 41px " onclick="GetData();" value="提交"/></div>
<div style="clear: both"></div>
<span style="position: absolute;right: 50px;top:11px; background-image: url(camera.png) ;height: 20px; 18px ;display: inline-block"> </span>
</div>
<script>
function GetData() { <!-- 获取数据弹出框 -->
var i = document.getElementById('search_value');
alert(i.value);
}
function f1() { <!--滚动-->
var tag = document.getElementById('headline'); <!-- 获取数据弹出框 -->
var content = tag.innerText;
var f = content.charAt(0); <!--取首个字符-->
var l = content.substring(1, content.length);
var content_new = l + f; <!--把首个字符放在最后-->
tag.innerText = content_new;
}
setInterval('f1()', 1000)
<!--定时器 1000ms执行一次 -->
</script>
<!--<script src="js1.js"></script>-->
</body>
</html>