<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>直接双击页面元素进行修改的HTML代码</title>
<script type="text/javascript">
function ShowElement(element)
{
var oldhtml = element.innerHTML //获得元素之前的内容
var newobj = document.createElement('input') //创建一个input元素
newobj.type = 'text' //为newobj元素添加类型
newobj.value=oldhtml
//设置newobj失去焦点的事件
newobj.onblur = function(){
element.innerHTML = this.value ? this.value : oldhtml //当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml。
}
element.innerHTML = '' //设置元素内容为空
element.appendChild(newobj) //添加子元素
newobj.focus() //获得焦点
}
</script>
</head>
<body>
<dl>
<dt>用户名</dt>
<dd ondblclick="ShowElement(this)">这里是用户名</dd>
<dt>个人宣言</dt>
<dd ondblclick="ShowElement(this)">这里是个人宣言</dd>
</body>
</html>
1、canvas绘制矩形<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas绘制矩形</title>
<script type="text/javascript" src="canvas2.js"></script>
<style type="text/css">
body {
margin: 0
padding: 0
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
js:
/**
* Created by winson on 2016/9/11.
*/
function draw(id) {
var canvas = document.getElementById(id)//用getElementById获取到canvas对象
var context = canvas.getContext('2d')//取得上下文
context.fillStyle = "green"//绘制背景的颜色
context.strokeStyle = "#fff"//绘制边框的颜色
context.lineWidth = 5//设置画笔宽度
context.fillRect(0, 0, 400, 300)//绘制
context.strokeRect(50, 50, 180, 120)
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）