前端小风车 HTML，CSS，Javascript

#小风车代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body{margin:0 0 0 0; background-image: url(img/caodi.png);}   img{width: 400px;}#i1{position: absolute;top: 250px;left: 380px;}#i2{position: absolute;top: 500px;left: 830px;}#i3{position: absolute;top: 420px;left: 1205px;}</style></head><body><button type="button" onclick="start(80)">一档</button><button type="button" onclick="start(40)">二档</button><button type="button" onclick="start(10)">三档</button><button type="button" onclick="stop()">暂停</button><img src="./img/fengche.png" alt="" id="i1"/><img src="./img/fengche.png" alt="" id="i2"/><img src="./img/fengche.png" alt="" id="i3"/><script type="text/javascript">var interval=null;function start(i){stop();interval=setInterval(method,i);}var k=0;function method(){k+=10;if(k>360){k=0;}var img=document.getElementsByTagName("img");for(var j=0;j<img.length;j++){img[j].style.transform=('rotate('+k+'deg)');}}function stop(){if(interval!=null){clearInterval(interval);}}</script></body>
</html>

点击进入操作小风车界面

前端小风车 HTML，CSS，Javascript相关推荐

Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
一个注册页面的前端模板（html+css+javascript）可自适应屏幕
一个注册页面的前端模板(html+css+javascript)可自适应屏幕,修改样式即可用. 截图代码 <!DOCTYPE html> <html><head> ...
前端小demo_day02_聚光灯(CSS)实现
前端小demo_day02_聚光灯(CSS)实现写在前面前端练习的第三天,今天实现了一个聚光灯的效果,看到这个效果的第一眼的时候,就感觉会用到我们第一天学习到的一个新属性clip-path ,一起 ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案
什么是Web技术? 答:Web即全球广域网(World Wide Web),也称为万维网,它是一种基于超文本和HTTP的.全球性的.动态交互的.跨平台的分布式图形信息系统.它是建立在Internet上 ...
文成小盆友python-num14 － web 前端基础 html ，css, JavaScript
本部分主要内容 html - 基础 css - 基础一.html 标签 html 文档标签树如下: head 部分 Meta(metadata information) 提供有关页面的元信息,例:页 ...
WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
（完整源码）H5贪吃蛇小游戏——HTML+CSS+JavaScript实现
最近因为帮助大一的学妹做网页,又接触了一下前端方面的知识.(学妹已经成了女朋友!!!,嘻嘻)感谢自己当年认真学习,大三了好多东西还能拾起来,哈哈.我翻出了我当年写的代码,还真不少呢.今天复习复习,看一 ...

前端小风车 HTML，CSS，Javascript

前端小风车 HTML，CSS，Javascript相关推荐

最新文章

热门文章