JS简单示例
首先感谢海棠学院提供的优质视频资源
学习总是一个由简单到难的过程,由浅入深,一步一个脚印,将学过的点玩的深入一点,才能有所进步,单学习总是枯燥而乏味的,切忌焦躁;
示例代码另存放在github:https://github.com/CharlesQQ/Python_Data_Analyse/tree/master/js%E5%AD%A6%E4%B9%A0
1.看一个简单的例子,有如下需求
需求:点击按钮,背景变为黄色;
分析:
步骤:
1、拿到按钮
document.getElementByid("btn")
2、给按钮添加点击事件
按钮.onclick= function(){
}
修改属性
元素.style.样式=值;
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background: #f00;
}
</style>
</head>
<body>
<input type="button" name="btn" id="btn" value="按钮" />
<div id="box"></div>
<script>
document.getElementById('btn').onclick = function(){
document.getElementById('btn').style.background='red';
};
</script>
</body>
</html>
2.JS简单示例2
需求:
需求:
1、点击按钮,让div的高度和宽度变化;
分析:
步骤:
1、拿到按钮
document.getElementByid("btn")
2、给按钮添加点击事件
a、拿到要改的元素
document.getElementById('box')
b、修改它的宽度和高度
div.style.width=值
div.style.height=值
按钮.onclick= function(){
}
修改属性:元素.style.样式=值;
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background: #f00;
}
</style>
</head>
<body>
<input type="button" name="btn" id="btn" value="按钮" />
<div id="box"></div>
<script>
document.getElementById('btn').onclick = function(){
document.getElementById('box').style.width = '200px';
document.getElementById('box').style.height = '200px'; };
</script>
</body>
</html>
JS简单示例的更多相关文章
- ECharts.js 简单示例
ECharts.js学习(一) 简单入门 EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Vi ...
- windows版的node.js简单示例
1.下载node.exe放到任意目录,假设E:\nodejs\ 2.在E:\nodejs\下新建helloworld.js,输入以下内容,保存关闭 var http = require('http') ...
- Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
- [转]Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例
本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...
- Nodejs学习笔记(十五)—Node.js + Koa2 构建网站简单示例
前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...
- Dropzone.js拖拽上传(简单示例)
今天碰到一个需求,页面上有“点击上传”的按钮,点击可以执行上传事件,从桌面拖拽图片拖拽到任何地方,都可以执行上传,且不影响点击按钮事件.下面是简单示例: 简单示例如下: <!DOCTYPE ht ...
- jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
- 根据juery CSS点击一个标签弹出一个遮罩层的简单示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- spring-servlet.xml简单示例
spring-servlet.xml简单示例 某个项目中的spring-servlet.xml 记下来以后研究用 <!-- springMVC简单配置 --> <?xml versi ...
随机推荐
- 01.File文件基本操作
1-创建File对象 /** * 创建我们 java.io.File对象 */ public static void test1() { //第一创建对象方式 File parent=new File ...
- Maven 包含资源文件
Maven打包时,如何包含资源文件(src/main/java | src/main/resources): 参考博客:http://blog.csdn.net/jsflzhong/article/d ...
- tips:Java的Random类和Random函数
tips:Java的Random类和Random函数! 随机数是一个很有趣的东西,在java中可以通过下面这2种方法得到: (1)Random类: Random类是java.util.Random这个 ...
- 过滤器Filter的四种拦截方式
过滤器有四种拦截方式!分别是:REQUEST.FORWARD.INCLUDE.ERROR. REQUEST: 直接访问目标资源时执行过滤器.包括:在地址栏中直接访问.表单提交.超链接.重定向,只要在地 ...
- php删除字符串最后一位
一.前言 从数据库中select()读取一对多的信息时,经常需要将取出的数组用某个特定的字符分割,然后拼接成字符串. 常见的语法格式: foreach ($arr as $key => $val ...
- 微信小程序支付签名老是失败,在官网的校验签名工具校验成功,老是返回签名失败
在网上也百度了各种签名不正确的解决方法,都没有问题,但签名就是不成功,实在找不出问题了,我就重置了一下api秘钥,结果成功了…… 不知道什么原因第一次填写的api秘钥也是我重置的,填写的也没有问题,但 ...
- C#winform抓取百度,Google搜索关键词结果
基于网站seo,做了一采集百度和Google搜索关键字结果的采集.在这里与大家分享一下 先看先效果图 代码附加: 1 private void baidu_Click(object sender ...
- centos7 安装Node.js并配置为全局可用
本文Node.js版本为5.12.0,登录 https://nodejs.org/dist/v5.12.0/,需指定其他版本的话可以直接修改版本号进行登录. 为了方便使用tar命令对文件进行解压,我们 ...
- linux问题集
Too many authentication failures for root (code 2) 原因:服务器可能由于装了一下安全软件导致有时用ssh远程工具登陆不了,提示太多认证失败for ro ...
- oracle 表或视图不存在
导入导出时,会自动表名自动加上了““双引号需要将表名改一下就可以了 alter table "oldtablename" rename to newtableName;