使用php在网页上输出两个div，两个div的宽高都是100px；一个背景为红色，一个为绿色。
页面默认显示红色的div。
echo输出一个按钮，为其编写javascript方法。
实现每点击一次，就交换显示一个div，红绿相互切换的效果。
按钮中的文字内容为你点击的次数，默认为:0，每点击一次，按钮内容加1.
具体要求：
a、div样式必须使用css，并且是外部css文件，目录为：css/style.css
b、javascript必须使用外部js调用，目录为：js/script.js
<meta charset="utf-8" />
你这个问题真是让人不想回答，呃。。
为了方便测试我把js和css集成到一个文件中
你自己新建文件把内容弄进去就行
引用方法写好了只要去掉注释就行
<!--
html注释，引用js和css
<script type="text/javascript" src="js/script.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css" />
-->
这个玩意根本用不上php
<script type="text/javascript">
function hide(id){
document.getElementById(id).style.display="none";
}
function show(id){
document.getElementById(id).style.display="block";
}
var num=1;
function kk(obj){
if((num%2)==0){//除2取余等于0说明是偶数
hide("div2");show("div1");
}else{
hide("div1");show("div2");
}
obj.value="已经点击了"+num+"次";
num++;//自身加1
}
</script>
<style type="text/css">
#div1,#div2{
width:100px;
height:100px;
background-color:#f00;
}
#div2{
background-color:#0f0;
display:none;
}
</style>
<input type="button" onclick="kk(this)" value="点我相互切换" />
<div id="div1">这是div1</div>
<div id="div2">这是div2</div>
有问题可以继续问
你这个问题真是让人不想回答，呃。。
为了方便测试我把js和css集成到一个文件中
你自己新建文件把内容弄进去就行
引用方法写好了只要去掉注释就行
<!--
html注释，引用js和css
<script type="text/javascript" src="js/script.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css" />
-->
这个玩意根本用不上php
<script type="text/javascript">
function hide(id){
document.getElementById(id).style.display="none";
}
function show(id){
document.getElementById(id).style.display="block";
}
var num=1;
function kk(obj){
if((num%2)==0){//除2取余等于0说明是偶数
hide("div2");show("div1");
}else{
hide("div1");show("div2");
}
obj.value="已经点击了"+num+"次";
num++;//自身加1
}
</script>
<style type="text/css">
#div1,#div2{
width:100px;
height:100px;
background-color:#f00;
}
#div2{
background-color:#0f0;
display:none;
}
</style>
<input type="button" onclick="kk(this)" value="点我相互切换" />
<div id="div1">这是div1</div>
<div id="div2">这是div2</div>
有问题可以继续问
温馨提示：答案为网友推荐，仅供参考
第1个回答 2015-11-25
<?php
echo '<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css"/></head>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<button id="btn">0</button>
<script src="/js/script.js"></script>
</body>
</html>';
width: 100px;
height: 100px;
}
#red{
background-color: red;
}
#green{
background-color: green;
display: none;
}
red = document.getElementById("red"),
green = document.getElementById("green");
btn.onclick = function() {
if (red.style.display == "" || red.style.display == "block") {
red.style.display = "none";
green.style.display = "block";
} else {
green.style.display = "none";
red.style.display = "block";
}
btn.innerHTML ++;
}
echo '<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css"/></head>
</head>
<body>
<div id="red"></div>
<div id="green"></div>
<button id="btn">0</button>
<script src="/js/script.js"></script>
</body>
</html>';
style.css
#red,#green{width: 100px;
height: 100px;
}
#red{
background-color: red;
}
#green{
background-color: green;
display: none;
}
script.js
var btn = document.getElementById("btn"),red = document.getElementById("red"),
green = document.getElementById("green");
btn.onclick = function() {
if (red.style.display == "" || red.style.display == "block") {
red.style.display = "none";
green.style.display = "block";
} else {
green.style.display = "none";
red.style.display = "block";
}
btn.innerHTML ++;
}
