通过JavaScript设置样式和jQuey设置样式,还有随机数抛出水果的习题
一:通过JavaScript的方式设置样式(:拿习题为例):
var shuiguo = document.getElementById('fruit');
shuiguo.style.backgroundColor = 'Red'; //1
shuiguo.onclick = function () {
shuiguo.style.cssText = "background-color:green;font-size:20px;"; //2
}
1:style.属性=属性值;这里把CSS里面的”background-color“的横线去掉,后面单词首字母大写,这种写法的其他属性书写格式一致;
2:style.cssText后的样式跟CSS样式书写格式相同;
二:通过jQuery的方式设置样式,首先需要导入jQuery库,引入到程序中,并且jQuery库的文本标签要在自定义标签之上:
<script src="jquery/jquery-2.1.1.js"></script> //jQuery库的标签
// 这里的标签在VS2012版本之前应该是 <script src="jquery/jquery-2.1.1.js" type="text/javascript"></script>显示的
<script type="text/javascript"> //自定义标签
$(function () {
$('#fruit').css("color", "yellow").css("background-color","pink"); //1
var $obj = $('#fruit').click(function () {
$obj.css("font-size","30px");
});
})
</script>
1:.css("属性名",”属性值“);其中background-color或backgroundColor等书写方式都可以!
2:如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法。示例如下:
$(function(){
var divcss = {
background: '#EEE',
};
$("#fruit").css(divcss);
}
)
三:练习题随机数抛水果的游戏:
window.onload = function () {
var shuiguo = document.getElementById('fruit');
shuiguo.style.backgroundColor = 'Red';
shuiguo.onclick = function () {
shuiguo.style.cssText = "background-color:green;font-size:20px;";
fa();
}
}
function fa() {
var fruits = ["apple", "orange", "banana", "watermelon"];
var num = Math.floor(Math.random() * fruits.length + 1);
alert(fruits[num-1]);
}
这里随机数用到了JavaScript里Math对象,它是全局对象,不需要创建,它的常用方法有:
ceil():对数进行上舍入 如:Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor():对数进行下舍入 如Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round():把数四舍五入为最接近的数 Math.round(25.5);返回26 Math.round(-25.5);返回-26
random():返回0-1中的随机数 Math.random();
random()方法返回的随机数不包括0和1,且都是小数
如果希望返回的整数为2-99之间,中间有98个数字,最小值为2,最大值为99,则代码应该:
Math.floor(Math.random()*98+2);
这里Math.random()出的最小值*98在0和1之间,再+2向下取整,所以最小值为2;Math.random()出的最大值也都小于1,所以Math.random()*98<1*98
也就是最大值在97.多+2向下取整最大值也就是99;
通过JavaScript设置样式和jQuey设置样式,还有随机数抛出水果的习题的更多相关文章
- JavaScript通过ID和name设置样式
JavaScript通过ID和name设置样式 1.说明 (1)根据所提供的元素的id值,返回对该元素的引用或节点 document.getElementById("tr_th") ...
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- jQuery学习笔记(4)-设置元素的属性和样式
一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- 学习微信小程序之css4设置颜色,单位表示,字体样式
颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距
- 黄聪:phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...
- UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等
(1)可以根据需要设置文本框的样式(包括形状.边框颜色.背景等). (2)可以根据需要设置文字显示样式(包括输入密码时的密文显示.文字横向居中.纵向居中上下.输入的文字是否首席木大写.文字超过后是否缩 ...
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
转:http://www.cnblogs.com/huangcong/p/3687665.html 首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包 ...
- WPF后台设置xaml控件的样式System.Windows.Style
WPF后台设置xaml控件的样式System.Windows.Style 摘-自 :感谢 作者: IT小兵 http://3w.suchso.com/projecteac-tual/wpf-zhi ...
随机推荐
- MyEclipse8.5 以debug模式启动tomcat6.0服务器 报错cannot connect to vm。
打开MyEclipse8.5 想以debug模式启动tomcat6.0服务器,报 a configuration error occurred during startup.please verif ...
- 利用sqlserver日志恢复数据
如果你已经急的焦头烂额,看到这篇文章的时候,请你换个坐姿,深呼吸几次,静下心来将这篇文章读完,也许你的问题迎刃而解. 我遇 到的情况是这样的,网站被植入木马,盗取了我的web.config文件,web ...
- jquery全选+下拉+单选+事件+挂事件
1.全选 <body> <input type="checkbox" id="qx" /> 全选 <input type=&quo ...
- threading多线程
什么是线程? 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务.一 ...
- Magento修改邮件模板内容
Magento 默认邮件模板 都是带着官方的标志和一些官方的基本信息.为了建立品牌形象我们需要把邮件模板中的所有官方信息换成自己的信息.修改步骤如下: 1.找到Magento的邮件模板文件(这里以 e ...
- VMware中CentOS设置静态IP
因为之前搭建的MongoDB分片没有采用副本集,最近现网压力较大,所以准备研究一下,于是在自己电脑的虚拟机中搭建环境,但是发现之前VMware设置的是DHCP,所以每次重新resume后虚拟机中IP都 ...
- signed和unsigned
signed:表示有符号位,最高位包括正数.负数和0: unsigned:表示无符号位,最高位表示 数值,不表示符号: signed int a:a 的取值范围是:-2^..... 这个就想不起来要占 ...
- Windows-006-映射网络驱动器图文详解
此文主要讲述 Win7 中,如何映射网络驱动器,一般用于网络共享时.敬请亲们参阅,若有不足之处,敬请大神指正,不胜感激! 打开计算机,选择工具栏中的 映射网络驱动器,依据下图中的操作进行映射网络驱动器 ...
- oracle 条件语句的写法
1.基本的if else DECLARE I ; BEGIN THEN DBMS_OUTPUT.PUT_LINE('TRUE'); ELSE DBMS_OUTPUT.PUT_LINE('FALSE') ...
- spring MVC的困惑--url-pattern的/和/*有区别
总是现象就是:spring用到forward("/WEB-INF/jsp/*.jsp")而forward当然是又要经过web.xml的映射的,然后,在URL匹配时,<url- ...