html事件

style代码

 #box1{

            height: 100px;

            width: 200px;

            background: #bfa;

            border: 2px solid red;

        }

body代码

<body>

    <input type="button" id="btn_1" value="新增元素">

    获取焦点事件:<input type="text" id="input_1">

</body>

<script>

    //实现在js代码中绑定事件

    //1、获取事件源对象,按钮

    var button=document.querySelector("#btn_1");

    var input_1=document.querySelector("#input_1");

    //2、绑定事件

    button.οnclick=function(){

        // alert("绑定成功");

        addElement();

        changeColor();

    }

    //  **在随机生成图片的基础上,加上随机改变页面的背景色

        function changeColor(){

            var body=document.body;

            var R=Math.random()*255;

            var G=Math.random()*255;

            var B=Math.random()*255;

            body.style.backgroundColor="rgb("+R+","+G+","+B+")";

               

        }

    function addElement(){

        //实现向页面添加元素

        var box=document.createElement("img");

        box.style.width="100px";

        box.style.height="100px";

        box.style.backgroundColor="#bfa";

        box.style.position="absolute";

        box.style.left=Math.random()*800+"px";

        box.style.top=Math.random()*200+"px";

        box.src="img/3.jpg";

        var body=document.body;

        body.appendChild(box);

    }

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值