<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body { /* 一些标签的自定义 */
background: url(../img/backgroud.jpg);
background-attachment: fixed;
}
div.right_top {
position: absolute;
top: 0px;
left:1050px;
}
a.cai {
text-decoration: none;
}
a.cai:link, a.cai:visited {
display: block;
width: 120px;
font-weight: 500;
text-align:center;
color: #FFFFFF;
height: 25px;
background-color:#98bf21;
padding: 1px;
}
a.cai:active, a.cai:hover {
background:#7A991A;
}
</style>
<script> //js 脚本
function answer() { //建立一个函数
var x = document.getElementById("problem").innerHTML; //设变量并赋值
if(x == "2018年") {
document.getElementById("problem").innerHTML = "今年是哪一年？";
}
else {
document.getElementById("problem").innerHTML = "2018年"; //给 id 赋值
}
}
function lucky() {
var x = Math.random()*10000;
x = parseInt(x);
document.getElementById("lucky").innerHTML = x;
}
function alert1() { //弹出警告框
alert("请不要随便乱点按钮!!!");
}
function alert2(x) {
alert("Hello " + x);
}
function startTime(){ //得到系统时间
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById('time').innerHTML=h+":"+m+":"+s; //将时间打印到界面上
t=setTimeout(function(){startTime()},500); //自动刷新
}
</script>
</head>
<body onload="startTime()">
<a class="cai" href="http://www.runoob.com" target="_blank">菜鸟教程</a>
<a class="cai" href="http://www.runoob.com/js/js-examples.html" target="_blank">JavaScript</a>
<div class="right_top"> <!-- _blank：打开新标签页 -->
<h2 id="problem">今年是哪一年？</h2>
<button onclick="answer()">转换</button>
</div>
<script>document.write("<br>Hello world!")</script>
<script>
var name="Asimple";
document.write("<br>" + name + "<br>");
</script>
<h3 id="lucky">查看你今天的幸运数字</h3>
<button onclick="lucky()">查看</button>
<button onclick="alert1()">点击试试</button>
<button onclick="alert2('Tom')">点击试试</button><br>
<h2 id="time" style="position: absolute; top:100px; left: 1050px;"></h2>
</body>
</html>