aa.style.backgroundColor = '#ff0000'就可以了
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title>YuGiOh</title>
<style type="text/css">
#wrap {
margin: auto
position: relative
width: 80%
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var a = new Array ([
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
], [
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
])
var randX = Math.floor (Math.random () * a.length), randY = Math.floor (Math.random () * a[randX].length)
a[randX][randY] = 0
for ( var i = 0 i < a.length i++)
{
var array = []
for ( var j = 0 j < a[i].length j++)
{
var aa = document.createElement ("div")
aa.style.position = "absolute"
aa.style.border = '1px solid black'
aa.style.width = W + "px"
aa.style.height = H + "px"
aa.style.left = j * W + "px"
aa.style.top = i * H + "px"
aa.id = i + "_" + j
if (a[i][j] == 0)
{
aa.style.backgroundColor = 'red'
X = i
Y = j
}
else
{
aa.style.backgroundColor = 'green'
}
wrap.appendChild (aa)
array.push (aa)
}
SITE.push (array)
}
}
var exchange = function (dir)
{
var tx = X, ty = Y, d
if (dir == 37)
{
if (Y < 1)
{
return
}
else
{
ty--
d = 'left'
}
}
else if (dir == 38)
{
if (X < 1)
{
return
}
else
{
tx--
d = 'top'
}
}
else if (dir == 39)
{
if (Y > SITE[X].length - 2)
{
return
}
else
{
ty++
d = 'left'
}
}
else if (dir == 40)
{
if (X > SITE.length - 2)
{
return
}
else
{
tx++
d = 'top'
}
}
var that = SITE[tx][ty]
var me = SITE[X][Y]
var sd = that.style[d]
that.style[d] = me.style[d]
me.style[d] = sd
var tmp = SITE[tx][ty]
SITE[tx][ty] = SITE[X][Y]
SITE[X][Y] = tmp
X = tx
Y = ty
}
var W = 50, H = 50, X = -1, Y = -1, SITE = []
document.onkeydown = function (e)
{
e = e || window.event
var keyCode = e.keyCode
if (!/^(37|38|39|40)$/.test (keyCode))
{
return false
}
exchange (keyCode)
}
document.ondragstart = document.onselectstart = document.oncontextmenu = function ()
{
return false
}
</script>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
对于Web服务器来说，不管是Apache、IIS还是其他容器，图片是最消耗资源的，于是我们有必要将图片与页面进行分离，这是基本上大型网站都会采用的策略，他们都有独立的图片服务器，甚至很多台图片服务器。这样的架构可以降低提供页面访问请求的服务器系统压力，并且可以保证系统不会因为图片问题而崩溃，在应用服务器和图片服务器上，可以进行不同的配置优化，比如apache在配置ContentType的时候可以尽量少支持，尽可能少的LoadModule，保证更高的系统消耗和执行效率。本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下：/**
*
动态导入静态资源文件js/css
*/
var
$import
=
function(){
return
function(rId,
res,
callback){
if(res
&&
'string'
==
typeof
res){
if(rId){
if($($('#'
+
rId),
$('head')).length>0){
return
}
}
//加载资源文件
var
sType
=
res.substring(res.lastIndexOf('.')
+
1)
//
支持js/css
if(sType
&&
('js'
==
sType
||
'css'
==
sType)){
var
isScript
=
(sType
==
'js')
var
tag
=
isScript
?
'script'
:
'link'
var
head
=
document.getElementsByTagName('head')[0]
//
创建节点
var
linkScript
=
document.createElement(tag)
linkScript.type
=
isScript
?
'text/javascript'
:
'text/css'
linkScript.charset
=
'UTF-8'
if(!isScript){
linkScript.rel
=
'stylesheet'
}
isScript
?
linkScript.src
=
res
:
linkScript.href
=
res
if(callback
&&
'function'
==
typeof
callback){
if
(linkScript.addEventListener){
linkScript.addEventListener('load',
function(){
callback.call()
},
false)
}
else
if
(linkScript.attachEvent)
{
linkScript.attachEvent('onreadystatechange',
function(){
var
target
=
window.event.srcElement
if
(target.readyState
==
'complete')
{
callback.call()
}
})
}
}
head.appendChild(linkScript)
}
}
}
}()
希望本文所述对大家的javascript程序设计有所帮助。
