JavaScript操作BOM对象的练习题分享

18-07-16 来源：[db:作者]

收藏我要投稿

第一题:

html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>病毒页面效果title>
head>
<body>
<body onload="open_adv();">
<div class="content">
 <div class="logo">
  <img src="picture/webPic.jpg">
 div>
div>
<script type="text/javascript">
 function open_adv1(){
  window.open("第一题病毒网页.html","_back","width=250px,height=250px;");
 }
 var open_adv = setInterval("open_adv1()",1000);
script>
body>
body>
html>

第二题：

html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>根据当前时间显示问候语title>
head>
<body>
<div id="myclock" style="font-size: 20px;">div>
<script type="text/javascript">
 function disptime(){
  var today = new Date(); //获得当前时间
  var nian = today.getFullYear();//获得年份
  var yue = today.getMonth()+1; //获得月份
  var tian= today.getDate();//获得天数
  var hh = today.getHours();  //获得小时
  var mm = today.getMinutes();//获得分钟
  var ss = today.getSeconds(); //获得秒
  if (hh<=12){
a=("上午好！欢迎来到贵美")
  }else if (hh > 12 && hh <= 18){
a=("下午好！欢迎来到贵美")
  }else{
a=("晚上好！欢迎来到贵美")
  }
  /*设置div的内容为当前时间*/
  document.getElementById("myclock").innerHTML="今天日期:"+nian+"年"+yue+"月"+tian+"日
"+"现在的时间:"+hh +":"+mm+": "+ss+"
"+a;
 }
 /*使用setInterval()每间隔指定毫秒后调用disptime()*/
 var myTime = setInterval("disptime()",1000);
script>
body>
html>

第三题：

html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>选择颜色title>
 <style type="text/css">
  #Fruits{
font-family: "微软雅黑";
font-size: 16px;
color: darkblue;
font-weight: bold;
  }
 style>
head>
<body>
<div>
 您得到的水果是:<span id="Fruits">span>
 <input type="button" value="" onclick="selColor();">
div>
<script type="text/javascript">
 function selColor(){
  var color=Array("Pear","Apple","Banana","Peach","watermelon","lemon");
  var num=Math.ceil(Math.random()*6)-1;
  document.getElementById("Fruits").innerHTML=color[num];
 }
script>
body>
html>

点击复制链接与好友分享!回本站首页