练习

１.输入你的性别，身高，体重，查看是否符合标准

html外

<script>
function age()
{
  var a=document.getElementById("sex").value;
  var b=document.getElementById("height").value;
  var c=document.getElementById("weight").value; 
  if(a==""||b==""||c=="")
  { alert("不能为空");}
  else
  {
  if(a=="男")
  {
     var n=b-c-100;
     if(n>=-3&&n<=3)
     {alert("体重符合标准");}
     else
     {alert("体重不符合标准")}
  }
   else if(a=="女")
  {
         var n=b-c-110; 
         if(n>=-3&&n<=3)
     {alert("体重符合标准");}
     else
     {alert("体重不符合标准")}
  }
  else
  {alert("性别输入错误");}
  }
}
</script>

body里

<input type="text" id="weight" placeholder="请输入体重"/>
<input type="text" id="sex"  placeholder="请输入性别"/>
<input type="text" id="height" placeholder="请输入身高"/>
<input type="button" value="点击获取值" onclick="age()" />

 

２.设置一个div，准备好3张图片，设置3个按钮，分别更改不同的背景

head里

<style>
#a{
    width:250px;
    height:240px;
    border:1px solid black;
    background-image:url(1.png);
    }
</style>

body里

<div id="a"></div>
<input type="button" value="样式1"  onclick="s1()" />
<input type="button" value="样式2"  onclick="s2()" />
<input type="button" value="样式3"  onclick="s3()" />

html外

<script>
function s1()
{ var a=document.getElementById("a");
a.style.backgroundImage="url(2.png)";
      }
function s2()
{  var a=document.getElementById("a");
a.style.backgroundImage="url(3.png)"; }
function s3()
{ var a=document.getElementById("a");
a.style.backgroundImage="url(4.png)";}
</script>

 

4.设置一个p标签，当点击这个p标签所在的位置时，更改文字的颜色，更改文字的大小

head里

<style>        
#b{
    color:#0F0;
    font-size:20px;}    
</style>

body里

<p id="b" onclick="s4()">你好</p>

html外

<script>
function s4()
{ var a=document.getElementById("b");
a.style.color="blue";
a.style.fontSize="40px";
    }
</script>